/* ============================================================================
   SEO Tracker — Design Tokens (canonical)
   ----------------------------------------------------------------------------
   Single source of truth for every color, size, space, radius, shadow,
   motion, and breakpoint in the app. Theme files (theme-dark.css,
   future theme-editorial.css) map these tokens onto surfaces; components
   and templates consume the semantic names.

   Naming convention
     --accent-*      Brand accent (currently Nexus gold).
     --surface-*     Background layers (darker = lower, lighter = higher).
     --ink-*         Text / foreground (opacity scale on white in dark theme).
     --border-*      Divider lines.
     --status-*      Success/warning/danger/info.
     --space-*       Padding / margin / gap scale.
     --radius-*      Border radius scale.
     --shadow-*      Elevation shadows.
     --text-*        Font-size scale.
     --weight-*      Font-weight scale.
     --leading-*     Line-height scale.
     --tracking-*    Letter-spacing scale.
     --motion-*      Transition duration scale.
     --ease-*        Timing functions.
     --bp-*          Media-query breakpoints (informational).

   Legacy aliases at the bottom of :root keep existing stylesheets working
   during migration. Remove once all templates adopt the .ui-* classes.
   ============================================================================ */

:root {
    /* ── Accent ───────────────────────────────────────────────────────────── */
    --accent:             #f0e050;
    --accent-hover:       #e0d848;
    --accent-ink:         #0a0a0a;          /* text on accent surface */
    --accent-ghost:       rgba(240, 224, 80, 0.04);
    --accent-tint:        rgba(240, 224, 80, 0.08);
    --accent-border:      rgba(240, 224, 80, 0.30);
    --accent-focus:       rgba(240, 224, 80, 0.20);

    /* ── Surfaces (dark theme) ────────────────────────────────────────────── */
    --surface-0:          #000000;           /* page background */
    --surface-1:          #0a0a0a;           /* elevated card */
    --surface-2:          #141418;           /* elevated modal / dropdown */
    --surface-3:          #1a1a20;           /* hover over elevated */
    --surface-scrim:      rgba(0, 0, 0, 0.75);

    /* ── Ink / text (opacity scale on white) ──────────────────────────────── */
    --ink-strong:         rgba(255, 255, 255, 0.92);
    --ink-body:           rgba(255, 255, 255, 0.72);
    --ink-muted:          rgba(255, 255, 255, 0.52);
    --ink-faint:          rgba(255, 255, 255, 0.58);
    --ink-disabled:       rgba(255, 255, 255, 0.18);

    /* ── Borders / dividers ───────────────────────────────────────────────── */
    --border-subtle:      rgba(255, 255, 255, 0.06);
    --border-standard:    rgba(255, 255, 255, 0.10);
    --border-strong:      rgba(255, 255, 255, 0.16);

    /* ── Status ───────────────────────────────────────────────────────────── */
    --status-success:     #8bc34a;
    --status-success-bg:  rgba(139, 195, 74, 0.12);
    --status-success-border: rgba(139, 195, 74, 0.25);

    --status-warning:     #e89040;
    --status-warning-bg:  rgba(232, 144, 64, 0.12);
    --status-warning-border: rgba(232, 144, 64, 0.25);

    --status-danger:      #e06060;
    --status-danger-bg:   rgba(224, 96, 96, 0.12);
    --status-danger-border: rgba(224, 96, 96, 0.25);

    --status-info:        #38bdf8;
    --status-info-bg:     rgba(56, 189, 248, 0.12);
    --status-info-border: rgba(56, 189, 248, 0.25);

    /* ── Spacing (4/8 + documented off-scale sizes actually in use) ───────────
       NOTE: prefix --sp-* not --space-* to avoid colliding with the legacy
       --space-1/2/3/4/5/6/8 scale in style.css (4/8/12/16/24/32/48). Legacy
       CSS reads from those; our new CSS reads from --sp-*. One day when
       legacy CSS is deleted we can rename --sp-* → --space-*.
       ───────────────────────────────────────────────────────────────────── */
    --sp-0:               0;
    --sp-05:              2px;
    --sp-1:               4px;
    --sp-2:               6px;
    --sp-3:               8px;
    --sp-4:               10px;
    --sp-5:               12px;
    --sp-6:               14px;
    --sp-7:               16px;
    --sp-8:               20px;
    --sp-9:               24px;
    --sp-10:              32px;
    --sp-12:              48px;
    --sp-16:              64px;
    --sp-20:              80px;

    /* ── Radius ───────────────────────────────────────────────────────────────
       NOTE: prefix --r-* not --radius-* to avoid colliding with the legacy
       scale in style.css (sm=8, md=10, lg=16, xl=20). Same rationale as
       spacing: legacy CSS keeps its values, new CSS reads from --r-*.
       ───────────────────────────────────────────────────────────────────── */
    --r-xs:               4px;
    --r-sm:               6px;
    --r-md:               8px;
    --r-lg:               12px;   /* fixes legacy --radius-md: 10px anomaly */
    --r-xl:               16px;
    --r-2xl:              20px;
    --r-pill:             9999px;

    /* ── Shadow (dark-theme values — previous --shadow-* were for light) ──── */
    --shadow-xs:          0 1px 2px rgba(0, 0, 0, 0.30);
    --shadow-sm:          0 1px 3px rgba(0, 0, 0, 0.40);
    --shadow-md:          0 4px 12px rgba(0, 0, 0, 0.50);
    --shadow-lg:          0 12px 32px rgba(0, 0, 0, 0.60);
    --shadow-modal:       0 30px 80px rgba(0, 0, 0, 0.60), 0 0 1px rgba(255, 255, 255, 0.10);
    --shadow-dropdown:    0 16px 48px rgba(0, 0, 0, 0.60);
    --shadow-gold-glow:   0 8px 24px rgba(240, 224, 80, 0.12);

    /* ── Typography ───────────────────────────────────────────────────────── */
    --font-display:       'Bethany Elingston', Georgia, serif;
    --font-body:          'Inter', 'SF Pro Display', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
    --font-mono:          'JetBrains Mono', 'SF Mono', 'Fira Code', ui-monospace, monospace;

    /* Type scale — includes 2xs (11px) that mobile-overhaul actually uses */
    --text-2xs:           0.6875rem;  /* 11px */
    --text-xs:            0.75rem;    /*  12px */
    --text-sm:            0.8125rem;  /* 13px */
    --text-base:          0.875rem;   /* 14px — dominant */
    --text-md:            0.9375rem;  /* 15px */
    --text-lg:            1rem;       /* 16px */
    --text-xl:            1.125rem;   /* 18px */
    --text-2xl:           1.375rem;   /* 22px */
    --text-3xl:           1.75rem;    /* 28px */
    --text-4xl:           2.5rem;     /* 40px */

    --weight-regular:     400;
    --weight-medium:      500;
    --weight-semibold:    600;   /* dominant — 246 uses in audit */
    --weight-bold:        700;

    --leading-tight:      1.2;   /* de-facto standard */
    --leading-snug:       1.35;
    --leading-normal:     1.5;
    --leading-relaxed:    1.75;

    --tracking-caps:      0.08em;
    --tracking-wide:      0.05em;
    --tracking-normal:    0;
    --tracking-tight:     -0.01em;

    /* ── Icons ────────────────────────────────────────────────────────────── */
    --icon-sm:            14px;
    --icon-md:            16px;
    --icon-lg:            18px;
    --icon-xl:            20px;

    /* ── Motion ───────────────────────────────────────────────────────────── */
    --motion-fast:        120ms;
    --motion-base:        200ms;
    --motion-slow:        320ms;
    --ease-standard:      cubic-bezier(0.2, 0, 0, 1);
    --ease-emphasis:      cubic-bezier(0.3, 0, 0, 1);

    /* ── Z-index scale ────────────────────────────────────────────────────── */
    --z-base:             1;
    --z-elevated:         10;
    --z-sticky:           100;
    --z-dropdown:         1000;
    --z-modal-backdrop:   9000;
    --z-modal:            9500;
    --z-toast:            9900;
    --z-loader:           999999;

    /* ── Breakpoints (informational — used in @media below) ───────────────── */
    --bp-sm:              640px;
    --bp-md:              768px;
    --bp-lg:              992px;
    --bp-xl:              1200px;
    --bp-2xl:             1440px;


    /* ── Legacy aliases ───────────────────────────────────────────────────
       Keep existing CSS/templates working during migration. Remove these
       once all templates reference the canonical names above.
       ───────────────────────────────────────────────────────────────────── */
    --opt-yellow:         var(--accent);
    --opt-yellow-hover:   var(--accent-hover);
    --opt-yellow-subtle:  var(--accent-tint);
    --opt-yellow-muted:   var(--accent-tint);
    --opt-yellow-light:   var(--accent-ghost);
    --opt-yellow-focus:   var(--accent-focus);
    --opt-yellow-border:  var(--accent-border);
    --opt-black:          var(--accent-ink);
    --opt-white:          #ffffff;
    --opt-accent-yellow:  var(--accent);
    --opt-primary-dark:   var(--accent-ink);

    /* Legacy status names (dark-theme values) */
    --success:            var(--status-success);
    --success-bg:         var(--status-success-bg);
    --warning:            var(--status-warning);
    --warning-bg:         var(--status-warning-bg);
    --danger:             var(--status-danger);
    --danger-bg:          var(--status-danger-bg);
    --info:               var(--accent);           /* was gold-aliased; keep behaviour */
    --info-bg:            var(--accent-tint);
    --opt-success:        var(--status-success);
    --opt-warning:        var(--status-warning);
    --opt-danger:         var(--status-danger);
    --opt-info:           var(--accent);

    /* Legacy text / bg (dark-theme values — override the light ones in style.css) */
    --text-900:           var(--ink-strong);
    --text-700:           var(--ink-body);
    --text-500:           var(--ink-muted);
    --text-400:           var(--ink-faint);
    --text-primary:       var(--ink-strong);
    --text-secondary:     var(--ink-muted);
    --text-tertiary:      var(--ink-faint);
    --opt-text-secondary: var(--ink-muted);
    --opt-text-muted:     var(--ink-faint);

    --bg-0:               var(--surface-0);
    --bg-50:              var(--surface-0);
    --bg-100:              var(--surface-1);
    --bg-200:             var(--surface-2);
    --bg-primary:         var(--surface-0);
    --bg-secondary:       var(--surface-1);
    --bg-hover:           var(--surface-3);
    --bg-active:          var(--accent-tint);
    --card-bg:            var(--surface-1);

    --border-100:         var(--border-subtle);
    --border-200:         var(--border-subtle);
    --border-300:         var(--border-standard);
    --border-color:       var(--border-subtle);
    --border-light:       var(--border-subtle);
    --opt-border-gray:    var(--border-standard);
    --opt-light-gray:     var(--surface-1);

    /* Legacy grays — in dark theme map to surface/ink pairs */
    --gray-50:            var(--ink-faint);
    --gray-100:           var(--surface-1);
    --gray-200:           var(--border-subtle);
    --gray-300:           var(--border-standard);
    --gray-400:           var(--ink-faint);
    --gray-500:           var(--ink-muted);
    --gray-600:           var(--ink-muted);
    --gray-700:           var(--ink-body);
    --gray-800:           var(--ink-strong);
    --gray-900:           var(--ink-strong);

    /* Legacy shadow names now point to dark-appropriate values */
    --shadow-soft:        var(--shadow-xs);

    /* Legacy type / radius / spacing aliases */
    --font-sans:          var(--font-body);
    --font-size-xs:       var(--text-xs);
    --font-size-sm:       var(--text-sm);
    --font-size-base:     var(--text-base);
    --font-size-md:       var(--text-md);
    --font-size-lg:       var(--text-lg);
    --font-size-xl:       var(--text-xl);
    --font-size-2xl:      var(--text-2xl);
    --font-size-3xl:      var(--text-3xl);
    --font-size-4xl:      var(--text-4xl);
    --line-height-tight:  var(--leading-snug);
    --line-height-normal: var(--leading-normal);
    --line-height-relaxed:var(--leading-relaxed);

    --transition-fast:    var(--motion-fast) var(--ease-standard);
    --transition-normal:  var(--motion-base) var(--ease-standard);
}