/* ═══════════════════════════════════════════════════════════════
 *  TOKENS.CSS — Design System v2.9 · Canonical Token File
 *  ───────────────────────────────────────────────────────────
 *  Single source of truth for every CSS custom property.
 *  Accent defaults are neutral grey — overridden at runtime
 *  by theme-init.js from the site's config.json.
 *
 *  SURFACE RHYTHM:
 *    --bg-dark-1       #09090B   Hero / nav / footer (deepest)
 *    --bg-dark-2       #0F0F12   Secondary dark sections
 *    --bg-dark-surface #18181B   Cards inside dark sections
 *    --bg-light-well   #FFFFFF   Primary reading surface
 *    --bg-light-soft   #FAFAFA   Alternating light / ad breaks
 *    --bg-footer       #09090B   Footer
 *
 *  RULES:
 *    • Long-form text NEVER on dark backgrounds.
 *    • Dark sections use light content wells when text needed.
 *    • Cards, tables, FAQs default to light surfaces.
 * ═══════════════════════════════════════════════════════════════ */


/* ─────────────────────── 1. PALETTE ─────────────────────── */
:root {
    /* Neutral scale — Zinc */
    --white:    #FFFFFF;
    --gray-50:  #FAFAFA;
    --gray-100: #F4F4F5;
    --gray-200: #E4E4E7;
    --gray-300: #D4D4D8;
    --gray-400: #A1A1AA;
    --gray-500: #71717A;
    --gray-600: #52525B;
    --gray-700: #3F3F46;
    --gray-800: #27272A;
    --gray-900: #18181B;
    --gray-950: #09090B;

    /* Accent — neutral defaults; theme-init.js overrides from config */
    --accent:       #71717A;
    --accent-hover: #52525B;
    --accent-soft:  #F4F4F5;
    --accent-muted: #E4E4E7;
    --accent-text:  #3F3F46;
    --accent-r: 113;
    --accent-g: 113;
    --accent-b: 122;
}


/* ─────────────────────── 2. SURFACES ─────────────────────── */
:root {
    /* Dark environment */
    --bg-dark-1:       #09090B;
    --bg-dark-2:       #0F0F12;
    --bg-dark-surface: #18181B;

    /* Light environment */
    --bg-light-well: #FFFFFF;
    --bg-light-soft: #FAFAFA;

    /* Footer */
    --bg-footer: #09090B;

    /* Semantic surface aliases */
    --bg:          var(--gray-50);
    --surface:     var(--white);
    --surface-2:   var(--gray-100);
    --surface-3:   var(--gray-200);
    --surface-dark:   var(--gray-900);
    --surface-dark-2: var(--gray-800);

    /* Legacy aliases (old design-system.css compat) */
    --bg-elevated: #2B2B30;
    --bg-hover:    rgba(255,255,255,0.07);
    --bg-inset:    rgba(255,255,255,0.02);
    --bg-input:    rgba(255,255,255,0.05);
    --bg-input-focus: rgba(255,255,255,0.09);
    --bg-surface:  rgba(25,25,35,0.5);
    --bg-surface-hover: rgba(255,255,255,0.05);
    --bg-contrast: rgba(255,255,255,0.04);
    --bg-section-a: transparent;
    --bg-section-b: rgba(255,255,255,0.02);
    --header-bg:   rgba(0,0,0,0.82);
    --footer-bg:   rgba(0,0,0,0.6);
}


/* ─────────────────────── 3. TEXT ─────────────────────── */
:root {
    /* Light-surface text (readable hierarchy) */
    --text:             var(--gray-900);    /* #18181B — headings, primary */
    --text-secondary:   var(--gray-600);    /* #52525B — body prose */
    --text-muted:       var(--gray-400);    /* #A1A1AA — design-architecture overrides to slate-700 */
    --text-placeholder: var(--gray-300);    /* #D4D4D8 — design-architecture overrides to slate-500 */

    /* Readable light-surface hierarchy (explicit, won't conflict with legacy) */
    --text-body:         #374151;  /* gray-700 — long-form body text */
    --text-caption:      #4B5563;  /* gray-600 — labels, kickers, meta */
    --text-subtle:       #6B7280;  /* gray-500 — disclaimers, fine print */
    --text-disabled:     #9CA3AF;  /* gray-400 — disabled states only */

    /* Dark-surface text */
    --text-on-dark:           var(--gray-100);
    --text-on-dark-secondary: rgba(255,255,255,0.60);  /* was 0.50 — boosted */
    --text-on-dark-muted:     var(--gray-400);

    /* On-accent text */
    --text-on-accent: #FFFFFF;

    /* Legacy aliases */
    --text-primary: #FFFFFF;
    --text-faint: rgba(255,255,255,0.4);

    /* Contrast block text (legacy PHP templates) */
    --text-contrast:            #d1d5db;
    --text-contrast-heading:    #ffffff;
    --text-contrast-link:       var(--accent);
    --text-contrast-link-hover: var(--accent-hover);
    --text-contrast-blockquote: #9ca3af;
    --border-contrast:          rgba(255,255,255,0.1);
}


/* ─────────────────────── 4. BORDERS ─────────────────────── */
:root {
    /* Light context */
    --border:        var(--gray-200);
    --border-strong: var(--gray-300);
    --border-subtle: var(--gray-100);

    /* Dark context */
    --border-dark:        rgba(255,255,255,0.06);
    --border-dark-strong: rgba(255,255,255,0.10);
    --border-dark-subtle: rgba(255,255,255,0.03);

    /* Legacy alias (old design-system.css) */
    --border-default: rgba(255,255,255,0.08);
}


/* ─────────────────────── 5. SHADOWS ─────────────────────── */
:root {
    --shadow-xs: 0 1px 2px rgba(0,0,0,0.05);
    --shadow-sm: 0 1px 3px rgba(0,0,0,0.08);
    --shadow:    0 4px 6px -1px rgba(0,0,0,0.05), 0 2px 4px -2px rgba(0,0,0,0.03);
    --shadow-md: 0 8px 24px rgba(0,0,0,0.12);
    --shadow-lg: 0 20px 48px rgba(0,0,0,0.15);
    --shadow-xl: 0 32px 64px rgba(0,0,0,0.20);

    /* Accent glow */
    --shadow-accent-sm: 0 4px 12px rgba(var(--accent-r),var(--accent-g),var(--accent-b),0.30);
    --shadow-accent-md: 0 4px 16px rgba(var(--accent-r),var(--accent-g),var(--accent-b),0.40);
    --shadow-accent-lg: 0 8px 32px rgba(var(--accent-r),var(--accent-g),var(--accent-b),0.25);

    /* Focus ring */
    --ring: 0 0 0 2px var(--white), 0 0 0 4px var(--accent);

    /* Legacy */
    --shadow-dropdown: 0 16px 48px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.05);
    --shadow-btn: 0 8px 24px rgba(var(--accent-r),var(--accent-g),var(--accent-b),0.25);
    --shadow-btn-hover: 0 12px 32px rgba(var(--accent-r),var(--accent-g),var(--accent-b),0.3);
}


/* ─────────────────────── 6. RADII ─────────────────────── */
:root {
    --radius-sm:   6px;
    --radius:      8px;
    --radius-md:   10px;
    --radius-lg:   12px;
    --radius-xl:   16px;
    --radius-2xl:  20px;
    --radius-full: 9999px;
}


/* ─────────────────────── 7. TYPOGRAPHY ─────────────────────── */
:root {
    --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
    --font-mono: "SF Mono", "Cascadia Code", "Fira Code", ui-monospace, monospace;

    /* Core scale (design-architecture.css overrides xs/sm for light surfaces) */
    --text-xs:   0.75rem;    /* 12 — overridden to 15px on light surfaces */
    --text-sm:   0.875rem;   /* 14 — overridden to 15px on light surfaces */
    --text-base: 1rem;       /* 16 */
    --text-lg:   1.125rem;   /* 18 */
    --text-xl:   1.25rem;    /* 20 */
    --text-2xl:  1.5rem;     /* 24 */
    --text-3xl:  1.875rem;   /* 30 */
    --text-4xl:  2.25rem;    /* 36 */
    --text-5xl:  3rem;       /* 48 */

    /* Readable body floor — use for any body/card/UI text that must be readable */
    --text-readable:     1rem;        /* 16px — body / card text minimum */
    --text-readable-sm:  0.9375rem;   /* 15px — meta, labels, nav items */
    --text-readable-lg:  1.0625rem;   /* 17px — card headlines, callout text */

    --leading-tight:   1.2;
    --leading-snug:    1.35;
    --leading-normal:  1.5;
    --leading-relaxed: 1.65;
    --leading-loose:   1.75;
}


/* ─────────────────────── 8. SPACING / LAYOUT ─────────────────────── */
:root {
    --content-px:    1.25rem;
    --max-w:         72rem;
    --max-w-narrow:  48rem;
    --max-w-wide:    80rem;
    --space-section: 5rem;
}
@media (min-width: 768px)  { :root { --content-px: 2rem; } }
@media (min-width: 1024px) { :root { --content-px: 2.5rem; } }


/* ─────────────────────── 9. MOTION ─────────────────────── */
:root {
    --ease:        cubic-bezier(0.4, 0, 0.2, 1);
    --ease-out:    cubic-bezier(0.0, 0, 0.2, 1);
    --ease-in:     cubic-bezier(0.4, 0, 1, 1);
    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
    --duration:      200ms;
    --duration-slow: 250ms;
}


/* ─────────────────────── 10. SEMANTIC STATES ─────────────────────── */
:root {
    --success:        #16A34A;
    --success-soft:   #F0FDF4;
    --success-border: #BBF7D0;
    --success-text:   #15803D;

    --warning:        #CA8A04;
    --warning-soft:   #FEFCE8;
    --warning-border: #FEF08A;
    --warning-text:   #A16207;

    --error:          #DC2626;
    --error-soft:     #FEF2F2;
    --error-border:   #FECACA;
    --error-text:     #B91C1C;

    --info:           var(--accent);
    --info-soft:      var(--accent-soft);
    --info-border:    var(--accent-muted);
    --info-text:      var(--accent-text);
}


/* ─────────────────────── 11. CALCULATOR TOKENS ─────────────────────── */
/* Used by roman-numerals.php and other legacy calculators              */
:root {
    --calc-btn-bg:          rgba(255,255,255,0.06);
    --calc-btn-bg-hover:    rgba(255,255,255,0.1);
    --calc-btn-border:      rgba(255,255,255,0.08);
    --calc-btn-text:        #ffffff;
    --calc-display-text:    #ffffff;
    --calc-display-secondary: #6b7280;
    --calc-toggle-bg:       rgba(255,255,255,0.04);
    --calc-toggle-border:   rgba(255,255,255,0.1);
    --calc-toggle-text:     #9ca3af;
    --calc-toggle-hover-bg: rgba(255,255,255,0.06);
    --calc-toggle-hover-text: #d1d5db;

    /* Legacy brand tokens (kept for PHP template compat — theme-init.js sets these) */
    --primary-pink: var(--accent);
    --primary-pink-hover: var(--accent-hover);
    --primary-aqua: var(--accent);
    --primary-purple: var(--accent);
    --accent-secondary: var(--accent);
    --divider-gradient: linear-gradient(to right, transparent, rgba(255,255,255,0.08), transparent);
}


/* ─────────────────────── 12. BASE RESETS ─────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
    font-family: var(--font-sans);
    font-size: 16px;
    line-height: var(--leading-normal);
    color: var(--text);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    scroll-behavior: smooth;
    /* Prevent text inflation on mobile */
    text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
}

body { min-height: 100vh; }
a, button { transition: all var(--duration) var(--ease); }
img { display: block; max-width: 100%; }
[x-cloak] { display: none !important; }
input, select, textarea, button { font-family: inherit; }


/* ─────────────────────── 13. LAYOUT UTILITIES ─────────────────────── */
.container        { max-width: var(--max-w);        margin: 0 auto; padding: 0 var(--content-px); }
.container-narrow { max-width: var(--max-w-narrow); margin: 0 auto; padding: 0 var(--content-px); }
.container-wide   { max-width: var(--max-w-wide);   margin: 0 auto; padding: 0 var(--content-px); }


/* ─────────────────────── 14. AD-FREE MODE ─────────────────────── */
[data-ad-free="true"] .ad-slot { display: none !important; }


/* ─────────────────────── NOTE: ACCENT-ALPHA USAGE ─────────────── */
/*
 *  Use these anywhere you need accent at partial opacity:
 *
 *    background: rgba(var(--accent-r), var(--accent-g), var(--accent-b), 0.1);
 *    box-shadow: 0 0 0 4px rgba(var(--accent-r), var(--accent-g), var(--accent-b), 0.25);
 *    border: 1px solid rgba(var(--accent-r), var(--accent-g), var(--accent-b), 0.15);
 */