/**
 * Picker's Guide design tokens + core component classes.
 *
 * Loaded site-wide via wp_enqueue_style. Every feature file may reference
 * these tokens through `var(--pg-*)`.
 *
 * Architecture
 * ------------
 * 1. PRIMITIVES — concrete colors, type scale, radius, shadow. Constant.
 * 2. SEMANTIC TOKENS — surface / text / accent / border / etc. Components
 *    reference these, not primitives.
 * 3. DARK THEME OVERRIDE — set data-pg-theme="dark" on any element; all
 *    semantic tokens flip for its descendants.
 * 4. CORE COMPONENTS — .pg-btn, .pg-input, .pg-select, .pg-modal. Use
 *    semantic tokens so they adapt to theme automatically.
 *
 * The !important on .pg-btn properties is unfortunate but necessary until
 * we land a plugin-wide CSS reset. Twenty Twenty's
 * `button:not(:hover):not(:active):not(.has-background)` rule has
 * specificity 0,3,1 which beats our 0,1,0 without it.
 */

/* =====================================================
   GLOBAL BASELINE
   Applies the design system as the site's default typography and
   link styling, so the look is consistent even if/when we drop
   the theme. Intentionally minimal — feature files and components
   are still free to override, and nothing here touches layout.
   ===================================================== */
body {
    font-family: var(--pg-font-ui);
    color: var(--pg-text-primary);
    background: var(--pg-surface);
    line-height: 1.5;
}

a {
    color: var(--pg-accent);
    text-decoration: none;
    transition: color 0.15s ease;
}
a:hover {
    color: var(--pg-accent-hover);
    text-decoration: underline;
    text-underline-offset: 2px;
}
/* Navigation menus: let the parent's styling drive, don't re-color. */
.menu-item a,
.menu-item a:hover,
.pg-header-row2 a,
.pg-header-row2 a:hover,
nav a,
nav a:hover {
    color: inherit;
    text-decoration: none;
}

h1, h2, h3, h4, h5, h6 {
    color: var(--pg-text-primary);
    font-family: var(--pg-font-ui);
}

/* Suppress the default dashed / dotted browser focus outline on
   mouse clicks. Keep a branded focus ring for keyboard users so
   a11y isn't regressed. :focus-visible fires on keyboard focus only.
   !important is needed to beat Twenty Twenty's own `button:focus`
   rule (same specificity — last-loaded would otherwise win). */
button:focus,
a:focus,
select:focus,
input:focus,
textarea:focus,
[role="button"]:focus {
    outline: none !important;
}
button:focus-visible,
[role="button"]:focus-visible {
    outline: none !important;
    box-shadow: var(--pg-focus-ring);
}
a:focus-visible {
    outline: 2px solid var(--pg-accent) !important;
    outline-offset: 2px;
    text-decoration: none;
}
select:focus-visible,
input:focus-visible,
textarea:focus-visible {
    outline: none !important;
    border-color: var(--pg-accent);
    box-shadow: var(--pg-focus-ring);
}

/* Firefox: hide the inner-dotted-border that appears on button click */
button::-moz-focus-inner,
input[type="button"]::-moz-focus-inner,
input[type="submit"]::-moz-focus-inner,
input[type="reset"]::-moz-focus-inner {
    border: 0;
    padding: 0;
}

/* =====================================================
   PRIMITIVES + SEMANTIC TOKENS (light theme default)
   ===================================================== */
:root {
    /* Primitives */
    --pg-blue:         #1E4F75;
    --pg-blue-dark:    #163A56;
    --pg-green:        #53A96B;
    --pg-green-dark:   #47905B;
    --pg-red:          #E74C3C;
    --pg-red-dark:     #C0392B;
    --pg-gold:         #FFD700;

    --pg-white:        #FFFFFF;
    --pg-gray-50:      #F8FAFB;
    --pg-gray-100:     #F3F4F6;
    --pg-gray-200:     #E5E7EB;
    --pg-gray-300:     #CCCCCC;
    --pg-gray-500:     #888888;
    --pg-gray-700:     #444444;
    --pg-gray-800:     #222222;
    --pg-gray-900:     #111111;

    --pg-font-ui:      -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --pg-font-mono:    "Fira Mono", ui-monospace, monospace;

    --pg-text-xs:      11px;
    --pg-text-sm:      12px;
    --pg-text-base:    14px;
    --pg-text-lg:      16px;
    --pg-text-xl:      18px;
    --pg-text-2xl:     24px;
    --pg-text-3xl:     36px;

    --pg-radius-sm:    6px;
    --pg-radius-md:    8px;
    --pg-radius-lg:    12px;
    --pg-radius-xl:    20px;

    --pg-space-1:      4px;
    --pg-space-2:      8px;
    --pg-space-3:      12px;
    --pg-space-4:      16px;
    --pg-space-6:      24px;
    --pg-space-8:      32px;

    --pg-z-base:       1;
    --pg-z-sticky:     100;
    --pg-z-dropdown:   1000;
    --pg-z-overlay:    2000;
    --pg-z-modal:      3000;
    --pg-z-popup:      4000;
    --pg-z-toast:      5000;

    /* Semantic (light theme) */
    --pg-surface:          var(--pg-white);
    --pg-surface-raised:   var(--pg-white);
    --pg-surface-sunken:   var(--pg-gray-50);
    --pg-surface-inverse:  var(--pg-blue);

    --pg-text-primary:     var(--pg-gray-900);
    --pg-text-secondary:   var(--pg-gray-700);
    --pg-text-muted:       var(--pg-gray-500);
    --pg-text-on-accent:   var(--pg-white);
    --pg-text-on-success:  var(--pg-white);
    --pg-text-on-danger:   var(--pg-white);

    --pg-border:           var(--pg-gray-200);
    --pg-border-strong:    var(--pg-gray-300);
    /* Aliases used widely in pickersguide-core/assets/data-entry/style.css.
       Without these the borders fall back to currentColor and read too
       dark / blend with text. */
    --pg-border-default:   var(--pg-border);
    --pg-border-light:     var(--pg-gray-100);

    --pg-accent:           var(--pg-blue);
    --pg-accent-hover:     var(--pg-blue-dark);
    --pg-success:          var(--pg-green);
    --pg-success-hover:    var(--pg-green-dark);
    --pg-danger:           var(--pg-red);
    --pg-danger-hover:     var(--pg-red-dark);

    --pg-backdrop:         rgba(0, 0, 0, 0.6);
    --pg-hover-tint:       rgba(30, 79, 117, 0.06);
    --pg-focus-ring:       0 0 0 3px rgba(30, 79, 117, 0.25);

    --pg-shadow-sm:        0 1px 2px rgba(0, 0, 0, 0.05);
    --pg-shadow-md:        0 4px 12px rgba(0, 0, 0, 0.10);
    --pg-shadow-lg:        0 10px 30px rgba(0, 0, 0, 0.25);
    --pg-shadow-modal:     0 30px 60px rgba(0, 0, 0, 0.35);

    /* Button secondary — split from accent so dark-theme can give it
       a distinct treatment even when accent collides with success. */
    --pg-btn-secondary-bg:     var(--pg-accent);
    --pg-btn-secondary-bg-hover: var(--pg-accent-hover);
    --pg-btn-secondary-text:   var(--pg-text-on-accent);
    --pg-btn-secondary-border: transparent;
}

/* =====================================================
   DARK THEME OVERRIDE
   Apply data-pg-theme="dark" to any element to flip the
   semantic tokens for its descendants. Primitives stay the
   same; only roles change.
   ===================================================== */
[data-pg-theme="dark"] {
    --pg-surface:          #0D0D0D;
    --pg-surface-raised:   #1A1A1A;
    --pg-surface-sunken:   #000000;
    --pg-surface-inverse:  var(--pg-white);

    --pg-text-primary:     var(--pg-white);
    --pg-text-secondary:   var(--pg-gray-300);
    --pg-text-muted:       var(--pg-gray-500);

    --pg-border:           #2A2A2A;
    --pg-border-strong:    #3A3A3A;

    /* On dark, green reads as the primary pop color; blue is retained
       for brand accents (modal headers) but not as the main CTA. */
    --pg-accent:           var(--pg-green);
    --pg-accent-hover:     var(--pg-green-dark);

    --pg-hover-tint:       rgba(255, 255, 255, 0.08);
    --pg-focus-ring:       0 0 0 3px rgba(83, 169, 107, 0.35);

    --pg-shadow-sm:        0 1px 2px rgba(0, 0, 0, 0.3);
    --pg-shadow-md:        0 4px 12px rgba(0, 0, 0, 0.5);
    --pg-shadow-lg:        0 10px 30px rgba(0, 0, 0, 0.6);
    --pg-shadow-modal:     0 30px 60px rgba(0, 0, 0, 0.7);

    /* Secondary button on dark becomes an outlined variant so it
       doesn't collide with the solid-green primary. */
    --pg-btn-secondary-bg:       transparent;
    --pg-btn-secondary-bg-hover: var(--pg-hover-tint);
    --pg-btn-secondary-text:     var(--pg-accent);
    --pg-btn-secondary-border:   var(--pg-accent);
}

/* Convenience: apply dark surface styles to the container itself. */
[data-pg-theme="dark"] {
    background: var(--pg-surface);
    color: var(--pg-text-primary);
}

/* =====================================================
   LIGHT THEME EXPLICIT OVERRIDE
   Mirrors the :root defaults. Use this to escape a dark
   ancestor (e.g. a light panel inside a dark modal).
   ===================================================== */
[data-pg-theme="light"] {
    --pg-surface:          var(--pg-white);
    --pg-surface-raised:   var(--pg-white);
    --pg-surface-sunken:   var(--pg-gray-50);
    --pg-surface-inverse:  var(--pg-blue);

    --pg-text-primary:     var(--pg-gray-900);
    --pg-text-secondary:   var(--pg-gray-700);
    --pg-text-muted:       var(--pg-gray-500);

    --pg-border:           var(--pg-gray-200);
    --pg-border-strong:    var(--pg-gray-300);

    --pg-accent:           var(--pg-blue);
    --pg-accent-hover:     var(--pg-blue-dark);

    --pg-hover-tint:       rgba(30, 79, 117, 0.06);
    --pg-focus-ring:       0 0 0 3px rgba(30, 79, 117, 0.25);

    --pg-shadow-sm:        0 1px 2px rgba(0, 0, 0, 0.05);
    --pg-shadow-md:        0 4px 12px rgba(0, 0, 0, 0.10);
    --pg-shadow-lg:        0 10px 30px rgba(0, 0, 0, 0.25);
    --pg-shadow-modal:     0 30px 60px rgba(0, 0, 0, 0.35);

    --pg-btn-secondary-bg:       var(--pg-accent);
    --pg-btn-secondary-bg-hover: var(--pg-accent-hover);
    --pg-btn-secondary-text:     var(--pg-text-on-accent);
    --pg-btn-secondary-border:   transparent;

    background: var(--pg-surface);
    color: var(--pg-text-primary);
}

/* =====================================================
   CORE COMPONENT: BUTTONS
   ===================================================== */
.pg-btn {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: var(--pg-space-2);
    padding: 10px 16px !important;
    border-radius: var(--pg-radius-md) !important;
    font-family: var(--pg-font-ui) !important;
    font-size: var(--pg-text-base) !important;
    font-weight: 600 !important;
    border: none !important;
    cursor: pointer;
    transition: background-color 0.15s ease, transform 0.08s ease, box-shadow 0.15s ease !important;
    user-select: none;
    text-transform: none !important;
    letter-spacing: 0 !important;
    line-height: 1.25 !important;
}
.pg-btn:active { transform: scale(0.96) !important; }
.pg-btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none !important; }
.pg-btn:focus-visible { outline: none; box-shadow: var(--pg-focus-ring) !important; }

.pg-btn--primary {
    background: var(--pg-success) !important;
    color: var(--pg-text-on-success) !important;
}
.pg-btn--primary:hover { background: var(--pg-success-hover) !important; }

.pg-btn--secondary {
    background: var(--pg-btn-secondary-bg) !important;
    color: var(--pg-btn-secondary-text) !important;
    border: 1px solid var(--pg-btn-secondary-border) !important;
}
.pg-btn--secondary:hover { background: var(--pg-btn-secondary-bg-hover) !important; }

.pg-btn--ghost {
    background: transparent !important;
    color: var(--pg-text-primary) !important;
    border: 1px solid var(--pg-border-strong) !important;
}
.pg-btn--ghost:hover {
    background: var(--pg-hover-tint) !important;
    border-color: var(--pg-accent) !important;
    color: var(--pg-accent) !important;
}

.pg-btn--danger {
    background: var(--pg-danger) !important;
    color: var(--pg-text-on-danger) !important;
}
.pg-btn--danger:hover { background: var(--pg-danger-hover) !important; }

.pg-btn--sm { padding: 6px 12px !important; font-size: var(--pg-text-sm) !important; border-radius: var(--pg-radius-sm) !important; }
.pg-btn--lg { padding: 12px 20px !important; font-size: var(--pg-text-lg) !important; }

.pg-btn--icon {
    width: 36px !important; height: 36px !important; padding: 0 !important;
    background: transparent !important;
    color: var(--pg-text-primary) !important;
    border: none !important;
    border-radius: var(--pg-radius-sm) !important;
}
.pg-btn--icon:hover { background: var(--pg-hover-tint) !important; color: var(--pg-accent) !important; }

.pg-btn--close {
    width: 32px !important; height: 32px !important; padding: 0 !important;
    background: transparent !important;
    color: currentColor !important;
    font-size: 22px !important;
    line-height: 1 !important;
    opacity: 0.7;
    border: none !important;
    border-radius: var(--pg-radius-sm) !important;
}
.pg-btn--close:hover { opacity: 1; background: var(--pg-hover-tint) !important; }

/* =====================================================
   CORE COMPONENT: FORM CONTROLS
   ===================================================== */
.pg-input,
.pg-select {
    padding: 10px 12px;
    font-family: var(--pg-font-ui);
    font-size: var(--pg-text-base);
    font-weight: 500;
    color: var(--pg-text-primary);
    background: var(--pg-surface);
    border: 1px solid var(--pg-border-strong);
    border-radius: var(--pg-radius-md);
}
.pg-input::placeholder { color: var(--pg-text-muted); }
.pg-input:focus,
.pg-select:focus {
    border-color: var(--pg-accent);
    outline: none;
    box-shadow: var(--pg-focus-ring);
}
.pg-input:disabled,
.pg-select:disabled {
    background: var(--pg-surface-sunken);
    color: var(--pg-text-muted);
    cursor: not-allowed;
}

/* =====================================================
   CORE COMPONENT: MODAL
   ===================================================== */
.pg-modal {
    background: var(--pg-surface);
    color: var(--pg-text-primary);
    border-radius: var(--pg-radius-xl);
    box-shadow: var(--pg-shadow-modal);
    overflow: hidden;
    border: 1px solid var(--pg-border);
}
.pg-modal__header {
    background: var(--pg-blue); /* brand mark — constant across themes */
    color: var(--pg-white);
    padding: 12px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: var(--pg-text-base);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
}
.pg-modal__body   { padding: var(--pg-space-4); }
.pg-modal__footer {
    display: flex;
    justify-content: flex-end;
    gap: var(--pg-space-2);
    padding: var(--pg-space-3) var(--pg-space-4);
    border-top: 1px solid var(--pg-border);
    background: var(--pg-surface-sunken);
}

/* =====================================================
   TYPOGRAPHY HELPERS
   ===================================================== */
.pg-eyebrow {
    font-size: var(--pg-text-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--pg-accent);
}

.pg-facts-line { font-size: var(--pg-text-base); color: var(--pg-text-secondary); }
.pg-facts-line .pg-facts-label {
    font-size: var(--pg-text-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--pg-accent);
    margin-right: 6px;
}

/* =====================================================
   PROVISIONAL CHORDS
   Marks auto-guessed chord positions that need curator review.
   Warm orange tint distinguishes from confirmed chords without
   fading the chord out (gray-tint earlier obscured the chord text).
   ===================================================== */
.pg-chord-provisional {
    color: hsl(36, 95%, 45%); /* clear amber — matches the editor's amber
                                 pill so curator review state is recognizable
                                 across editor and public surfaces */
}

/* =====================================================
   CHORUS INDENT
   pg_lyrics_render() emits chorus stanzas as
   <p class="chorus-indent">…</p> (or <div class="chorus-indent">).
   Lives here in design-tokens (not in chord-manager.php) because
   the class is shared across multiple surfaces — chord-manager,
   karaoke, practice mode, print, data-entry preview. Practice mode
   has its own scoped declaration; this is the unscoped fallback so
   the live FR page actually indents (regression: nothing was
   indenting it after Phase 4 PR #238 introduced the class).
   ===================================================== */
.chorus-indent {
    margin-left: 5%;
}

/* =====================================================
   PERSON AVATARS
   Background-image circular avatars used by pg_render_person_avatar()
   and pg_render_avatar_from_url() (defined in featured-recording-page.php).
   Lives here (globally loaded) instead of inside the FR-page style
   block so that ANY surface using the helper gets the styling — incl.
   the instrumental page (audit #2 + #3, 2026-05-02), profile pages,
   and future consumers.
   ===================================================== */
.pg-person-avatar {
    display: inline-block;
    flex-shrink: 0;
    background-color: var(--pg-gray-100, #f3f4f6);
    background-size: cover;
    background-position: center;
    border-radius: 50%;
    border: 1px solid rgba(0, 0, 0, 0.06);
}
.pg-person-avatar--md {
    width: 48px;
    height: 48px;
}
.pg-person-avatar--sm {
    width: 26px;
    height: 26px;
}

/* Admin-only "Edit in data-entry" pencil link.
   Renders top-right of any container with position:relative.
   Helper pg_render_admin_edit_link($post_id) returns '' for non-admins. */
.pg-admin-edit-link {
    position: absolute;
    top: 8px;
    right: 10px;
    font-size: 16px;
    color: var(--pg-text-muted, #888);
    text-decoration: none;
    opacity: 0.4;
    transition: opacity 0.15s, color 0.15s;
    z-index: 5;
}
.pg-admin-edit-link:hover {
    opacity: 1;
    color: var(--pg-blue, #2e77a8);
}