/* ============================================================
   ARACA — DESIGN TOKEN LAYER   (Phase 03 / 03B)
   ------------------------------------------------------------
   ARACA = ARAKA. THE single Source of Truth for design tokens.
   Hand-authored mirror of tokens/araca.tokens.json
   (this repo has no CSS build step).

   OWNERSHIP (Phase 03B):
   This file now owns every :root / [data-theme] design token.
   The old token blocks were removed from:
     main.css, dashboard.css (kept: a few genuinely divergent
     values, see note there), admin-dashboard.css, skeleton.css.
   home.css keeps its marketing-local palette (--bg/--text/
   --radius/--transition/--header-h/--eco-*) — documented as a
   domain surface to be reconciled in Phase 04.

   LOAD ORDER: linked LAST on every themed page, after all other
   stylesheets, so it authoritatively wins the :root cascade.

   PHASE 03 RULE — NO VISUAL CHANGE. Values below reproduce the
   CURRENT EFFECTIVE result (what the user sees today, including
   the values theme.js used to inject). Canonical targets that
   would shift the visuals are in the JSON under "$phase04"
   and are NOT applied here.
   ============================================================ */

/* ---- Iran Yekan (Yekan Bakh) — canonical ARAKA UI font ----
   Real supplied weights: 400 Regular · 500 Medium · 700 Bold.
   Weight 400 maps to 500 font file to prevent thin/washed-out Persian rendering. */
@font-face {
  font-family: 'Yekan Bakh';
  src: url('/assets/fonts/yekan-bakh/yekan-bakh-500.woff2') format('woff2'),
       url('/assets/fonts/yekan-bakh/yekan-bakh-500.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Yekan Bakh';
  src: url('/assets/fonts/yekan-bakh/yekan-bakh-500.woff2') format('woff2'),
       url('/assets/fonts/yekan-bakh/yekan-bakh-500.woff') format('woff');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Yekan Bakh';
  src: url('/assets/fonts/yekan-bakh/yekan-bakh-700.woff2') format('woff2'),
       url('/assets/fonts/yekan-bakh/yekan-bakh-700.woff') format('woff');
  font-weight: 600 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ========================================================
     1 · PRIMITIVES  (raw, theme-independent)
     ======================================================== */
  /* brand */
  --yellow: #FFC107;
  --yellow-hover: #E0A800;
  --araca-yellow-600: #B98900;           /* Phase 04 — brand active, unused today */
  --navy: #16213E;
  --navy-rgb: 22, 33, 62;
  --dark-navy: #0f1a30;
  --dark-navy-rgb: 15, 26, 48;
  /* neutrals */
  --black: #0D0D0D;
  --white: #FFFFFF;
  --fix-black: #000;
  --fix-white: #fff;
  --gray-organizational: #757575;
  --gray-organizational-light: #E0E0E0;
  --gray-organizational-soft: #F5F5F5;
  --gray-organizational-dark: #424242;
  --light-gray: var(--gray-organizational-soft);
  --medium-gray: var(--gray-organizational-light);
  --dark-gray: var(--gray-organizational-dark);
  /* light surfaces — warm neutral ramp, clearly stepped
     page (#f0ece4) < frame/panel (#faf7f1) < card (#ffffff) */
  --light-bg: #f0ece4;
  --light-bg-rgb: 240, 236, 228;
  --light-frame: #faf7f1;
  --light-card: #ffffff;
  --light-header: #ffffff;
  /* dark surfaces — warm charcoal ramp (warm, not navy/cold)
     page (#17130f) < surface (#221d17) < card (#2c251d) */
  --dark-bg: #17130f;
  --dark-bg-rgb: 23, 19, 15;
  --dark-surface: #221d17;   /* warm dark (was navy #141b2e) */
  --dark-card: #2c251d;      /* warm dark (was navy #1e2740) */
  --dark-sunken: #100d0a;
  --dark-text: #F3EEE4;      /* warm off-white (was cool #E6E6F0) */
  --dark-text-secondary: #B4A88F; /* warm gray (was cool #A0A0B0) */
  --dark-border: #4a3f30;    /* warm (was cool #3a3a4a) */
  --dark-accent: #3498db;
  --dark-header: #1c1712;
  /* canonical primitive aliases (Phase 04 naming) */
  --araca-ink-700: #212121;

  /* status hues (theme-independent, both themes) */
  --color-success: #2ecc71;  --color-success-rgb: 46, 204, 113;
  --color-danger:  #e74c3c;  --color-danger-rgb:  231, 76, 60;
  --color-warning: #e67e22;  --color-warning-rgb: 230, 126, 34;
  --color-info:    #3498db;  --color-info-rgb:    52, 152, 219;
  --color-purple:  #9b59b6;  --color-purple-rgb:  155, 89, 182;
  --color-violet:  #6f42c1;  --color-violet-rgb:  111, 66, 193;
  --color-muted:   #95a5a6;  --color-muted-rgb:   149, 165, 166;
  --color-gold:    #f1c40f;  --color-gold-rgb:    241, 196, 15;
  --color-orange:  #FFA000;  --color-orange-rgb:  255, 160, 0;
  --color-guest:   #ff9800;  --color-guest-rgb:   255, 152, 0;
  --color-white:   #ffffff;  --color-white-rgb:   255, 255, 255;
  /* canonical status aliases */
  --color-error:   var(--color-danger);  --color-error-rgb: var(--color-danger-rgb);

  /* ========================================================
     2 · SEMANTIC — LIGHT
     values = CURRENT EFFECTIVE (incl. theme.js BASE_COLORS.light)
     ======================================================== */
  /* legacy semantic names (owned here now) */
  --primary-color: var(--yellow);
  --primary-color-hover: var(--yellow-hover);
  --primary-color-rgb: 255, 193, 7;
  --secondary-color: #000000;                 /* was theme.js-injected */
  --accent-color: var(--primary-color);
  --accent-rgb: var(--primary-color-rgb);
  --accent-soft: rgba(var(--primary-color-rgb), 0.6);
  --accent-strong: var(--primary-color-hover);
  --accent-contrast: #212121;
  /* Foreground for icons sitting on a PALE accent-tint square (e.g. rgba(--accent-rgb, .1)
     badges) — unlike --accent-contrast this depends on the page background, not just the
     yellow itself: on light's near-white page the tint is nearly white, so the icon needs
     the same dark tone as --accent-contrast; on dark's near-black page (see the override
     below) that same dark tone would vanish, so it flips back to the bright yellow. */
  --accent-tint-fg: var(--accent-contrast);
  --focus-ring: rgba(var(--accent-rgb), 0.26);
  --background-color: var(--light-bg);
  --background-color-rgb: var(--light-bg-rgb);
  --text-color: #201c16;                      /* warm near-black (was pure #000) */
  --text-color-secondary: #5a5344;            /* warm mid — ~7:1 on card, ~6:1 on page */
  --card-bg: var(--light-card);
  --border-color: #d9d1c1;                    /* warm, visible on white (was #E9E9E9) */
  --header-bg: var(--light-header);
  --footer-bg: var(--light-header);
  --section-bg: var(--light-frame);
  --surface-tint-rgb: 0, 0, 0;

  /* canonical semantic names (Phase 04 code targets these) */
  --color-primary:          var(--yellow);
  --color-primary-hover:    var(--yellow-hover);
  --color-primary-active:   var(--araca-yellow-600);
  --color-primary-rgb:      255, 193, 7;
  --color-primary-subtle:   rgba(255, 193, 7, 0.14);
  /* legible brand tone for TEXT / GLYPHS on light surfaces (amber #FFC107
     itself is ~1.6:1 on white — unreadable). Fills & borders keep --color-primary. */
  --color-primary-ink:      #8a6200;
  --color-focus-ring:       rgba(255, 193, 7, 0.4);
  --color-navy:             var(--navy);
  --color-bg:               var(--light-bg);
  --color-bg-rgb:           var(--light-bg-rgb);
  --color-surface:          var(--light-frame);
  --color-surface-elevated: var(--light-card);
  --color-surface-sunken:   #ece7dd;
  --color-text-primary:     var(--text-color);
  --color-text-secondary:   var(--text-color-secondary);
  --color-text-muted:       #7b7260;               /* warm — ~4.6:1 on white */
  --color-text-on-primary:  #201c16;
  --color-text-on-navy:     #ffffff;
  --color-border:           var(--border-color);
  --color-border-subtle:    #e7e0d3;               /* visible hairline on white */
  --color-border-strong:    #c0b49b;
  --color-header:           var(--light-header);
  --color-overlay:          rgba(20, 16, 10, 0.5);

  /* ========================================================
     3 · TYPOGRAPHY
     ======================================================== */
  /* Iran Yekan (Yekan Bakh) is the single canonical Persian UI font.
     Legacy aliases --font-primary / --font-heading resolve through this. */
  --font-family-base: 'Yekan Bakh', Tahoma, Arial, sans-serif;
  --font-primary: var(--font-family-base);
  --font-heading: var(--font-family-base);
  --fw-light: 400;
  --fw-regular: 500;
  --fw-medium: 600;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-heavy: 800;
  --font-weight-light: 400;
  --font-weight-regular: var(--fw-regular);
  --font-weight-normal: var(--fw-regular);
  --font-weight-medium: var(--fw-medium);
  --font-weight-semibold: var(--fw-semibold);
  --font-weight-bold: var(--fw-bold);
  --lh-tight: 1.3;
  --lh-snug: 1.45;
  --lh-normal: 1.6;
  --lh-relaxed: 1.8;
  --ls-tighter: -0.02em;
  --ls-tight: -0.01em;
  --ls-normal: 0;
  --ls-wide: 0.08em;
  /* Upgraded type scale for optimal Persian legibility */
  --font-size-extra-small: 12.5px;
  --font-size-xs: var(--font-size-extra-small);
  --font-size-small: 13.5px;
  --font-size-sm: var(--font-size-small);
  --font-size-medium: 15px;
  --font-size-md: var(--font-size-medium);
  --font-size-base: var(--font-size-medium);
  --font-size-large: 16.5px;
  --font-size-lg: var(--font-size-large);
  --font-size-xl: 20px;
  --font-size-xxl: 26px;
  --font-size-xxxl: 32px;
  /* canonical typographic role tokens */
  --text-caption:  12.5px;
  --text-body-sm:  13.5px;
  --text-body:     15px;
  --text-body-lg:  16.5px;
  --text-h4:       17.5px;
  --text-h3:       20px;
  --text-h2:       24px;
  --text-h1:       28px;
  --text-display:  34px;

  /* ========================================================
     4 · SPACING
     ======================================================== */
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --spacing-xl: 32px;
  --spacing-xxl: 48px;
  --page-inline-space: clamp(12px, 2vw, 26px);
  --page-block-space: clamp(10px, 1.5vh, 22px);
  /* canonical scale */
  --space-0: 0;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 48px;
  --space-16: 64px;
  --space-page-inline: var(--page-inline-space);
  --space-page-block: var(--page-block-space);
  --space-input-padding-y: 12px;
  --space-input-padding-x: 15px;
  --space-button-padding: 12px 20px;
  --space-list-gap: 8px;

  /* ========================================================
     5 · RADIUS
     ======================================================== */
  --border-radius: 8px;
  --border-radius-lg: 12px;
  --border-radius-modal: 14px;
  --border-radius-badge: 50px;
  --radius-none: 0;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;        /* PHASE 04: modal / bottom-sheet */
  --radius-2xl: 20px;
  --radius-full: 9999px;

  /* ========================================================
     6 · BORDER
     ======================================================== */
  --border-width-hairline: 1px;
  --border-width-strong: 2px;

  /* ========================================================
     7 · ELEVATION  (light) — Phase 04 remaps CURRENT shadows here
     ======================================================== */
  --elevation-0: none;
  --elevation-1: 0 1px 2px rgba(13,13,13,.06), 0 1px 3px rgba(13,13,13,.08);
  --elevation-2: 0 4px 12px rgba(13,13,13,.10);
  --elevation-3: 0 8px 24px rgba(13,13,13,.12);
  --elevation-4: 0 16px 40px rgba(13,13,13,.16);
  --elevation-5: 0 24px 60px rgba(13,13,13,.22);
  /* legacy aliases — these were referenced but never defined (rendered as no
     shadow). Phase 04: map to the elevation scale. */
  --box-shadow: var(--elevation-2);
  --box-shadow-lg: var(--elevation-4);

  /* ========================================================
     8 · OPACITY
     ======================================================== */
  --opacity-disabled: 0.45;
  --opacity-muted: 0.65;
  --opacity-overlay: 0.5;
  --opacity-hover-tint: 0.08;
  --opacity-press-tint: 0.14;

  /* ========================================================
     9 · Z-INDEX
     Phase 03C: values PRESERVE the current stacking numbers
     exactly (no visual/order change) — only centralised and
     named. Phase 04 rationalises the numbers onto a clean
     0–1700 scale once visual testing is available.
     ======================================================== */
  --z-base: 0;
  --z-raised: 2;
  --z-sticky: 100;
  --z-nav: 1000;               /* page header, base modal, sidebar */
  --z-nav-overlay: 1001;       /* mobile "بیشتر" drawer backdrop */
  --z-drawer: 1002;            /* mobile drawer panel */
  --z-header-sticky: 2000;     /* admin sticky header */
  --z-modal-backdrop: 2050;
  --z-modal: 2100;
  --z-modal-standalone: 5000;  /* dashboard standalone modal overlay */
  --z-toast-legacy: 9999;      /* auth-page toast container */
  --z-popover: 10001;          /* popup-selector dropdown */
  --z-page-overlay: 100000;    /* skeleton overlay / fullscreen loaders */
  --z-blocking-overlay: 100001;/* forced-password overlay (non-dismissible) */
  --z-sheet-backdrop: 2147483000;
  --z-sheet: 2147483001;       /* multiselect bottom-drawer */
  --z-toast: 2147483647;       /* toasts must render above everything */
  /* canonical aliases for Phase 04 code (currently == the above) */
  --z-dropdown: var(--z-popover);
  --z-overlay: var(--z-page-overlay);
  --z-tooltip: var(--z-toast);

  /* ========================================================
     10 · MOTION
     ======================================================== */
  --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-fast: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
  --theme-transition-fast: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  --theme-transition-normal: 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  --theme-transition-slow: 0.55s cubic-bezier(0.4, 0, 0.2, 1);
  --dur-instant: 100ms;
  --dur-fast: 150ms;
  --dur-base: 250ms;
  --dur-slow: 350ms;
  --dur-slower: 500ms;
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-decelerate: cubic-bezier(0, 0, 0.2, 1);
  --ease-accelerate: cubic-bezier(0.4, 0, 1, 1);
  --ease-spring: cubic-bezier(0.34, 1.4, 0.64, 1);

  /* ========================================================
     11 · ICON / CONTAINER
     ======================================================== */
  --icon-xs: 14px;
  --icon-sm: 16px;
  --icon-md: 20px;
  --icon-lg: 24px;
  --icon-xl: 32px;
  --container-sm: 640px;
  --container-md: 768px;
  --container-lg: 960px;
  --container-xl: 1200px;

  /* ========================================================
     13 · THEME BRIDGE — user primary (was theme.js-injected)
     ======================================================== */
  --user-primary: var(--accent-color);
  --user-primary-rgb: var(--accent-rgb);

  /* ========================================================
     14 · USER-SCOPED TOKENS
     PHASE 04: converged onto the shared semantic layer. These
     aliases stay only so existing --user-* consumers keep
     working; Phase 05/React should reference --color-* directly.
     ⚠ VISUAL VERIFICATION PENDING (light text #333→#000,
     surfaces #f5f5f5→#f8fafc, border #d5d5d5→#E9E9E9).
     ======================================================== */
  --ad-type-badge-bg: #4c1d95;
  --user-dark: var(--color-surface);
  --user-darker: var(--color-surface-elevated);
  --user-gray: #e3dcce;
  --user-light-gray: #c7bda6;
  --user-bg: var(--color-bg);
  --user-header-bg: var(--color-header);
  --user-sidebar-bg: var(--color-surface-elevated);
  --user-main-bg: var(--color-bg);
  --user-card-bg: var(--color-surface-elevated);
  --user-stat-card-bg: var(--color-surface-elevated);
  --user-chart-card-bg: var(--color-surface-elevated);
  --user-chart-placeholder-bg: var(--color-surface);
  --user-form-input-bg: var(--color-surface-elevated);
  --user-table-bg: var(--color-surface-elevated);
  --user-settings-card-bg: var(--color-surface-elevated);
  --user-text: var(--color-text-primary);
  --user-text-secondary: var(--color-text-secondary);
  --user-text-muted: var(--color-text-muted);
  --user-border: var(--color-border);
  --user-hover-bg: rgba(var(--accent-rgb), 0.1);
  --user-active-bg: rgba(var(--accent-rgb), 0.2);
  --user-overlay-bg: var(--color-overlay);
  /* status: aliased to the shared semantic tokens where identical */
  --user-success: var(--color-success);
  --user-success-rgb: var(--color-success-rgb);
  --user-danger: var(--color-danger);
  --user-danger-rgb: var(--color-danger-rgb);
  --user-info: var(--color-info);
  --user-info-rgb: var(--color-info-rgb);
  --user-purple: var(--color-purple);
  --user-purple-rgb: var(--color-purple-rgb);
  --user-warning: var(--color-warning);         /* PHASE 04: reconciled (was #f39c12) */
  --user-warning-rgb: var(--color-warning-rgb);
  --user-scrollbar-thumb: var(--accent-color);
  --user-scrollbar-track: #e6dfd1;
  --btn-padding-y: 8px;
  --btn-padding-x: 18px;
  --btn-font-size: var(--font-size-medium);
  --btn-radius: 8px;
  --modal-backdrop: rgba(0, 0, 0, 0.5);
  --modal-radius: 14px;

  /* ========================================================
     15 · ADMIN-SCOPED TOKENS  (moved from admin-dashboard.css :root)
     Same Phase 04 reconciliation note as §14.
     NOTE: --admin-info still aliases the brand colour — a known
     bug (badge-info renders yellow). Fix in Phase 04, not here
     (would be a visible change).
     ======================================================== */
  --admin-primary: var(--accent-color);
  --admin-primary-rgb: var(--accent-rgb);
  /* PHASE 04: converged onto the shared semantic layer (same as --user-*). */
  --admin-dark: var(--color-surface);
  --admin-darker: var(--color-surface-elevated);
  --admin-gray: #e3dcce;
  --admin-light-gray: #c7bda6;
  --admin-text: var(--color-text-primary);
  --admin-text-secondary: var(--color-text-secondary);
  --admin-border: var(--color-border);
  --admin-card-bg: var(--color-surface-elevated);
  --admin-success: var(--color-success);
  --admin-success-rgb: var(--color-success-rgb);
  --admin-danger: var(--color-danger);
  --admin-danger-rgb: var(--color-danger-rgb);
  --admin-warning: var(--color-warning);        /* PHASE 04: reconciled (was #f39c12) */
  --admin-warning-rgb: var(--color-warning-rgb);
  --admin-info: var(--color-info);              /* PHASE 04: bug fix — info is blue, not brand yellow */
  --admin-info-rgb: var(--color-info-rgb);
  --admin-bg: var(--color-bg);
  --admin-header-bg: var(--color-header);
  --admin-sidebar-bg: var(--color-surface-elevated);
  --admin-main-bg: var(--color-bg);
  --admin-stat-card-bg: var(--color-surface-elevated);
  --admin-chart-card-bg: var(--color-surface-elevated);
  --admin-chart-placeholder-bg: var(--color-surface);
  --admin-form-input-bg: var(--color-surface-elevated);
  --admin-table-bg: var(--color-surface-elevated);
  --admin-settings-card-bg: var(--color-surface-elevated);
  --admin-hover-bg: rgba(var(--accent-rgb), 0.1);
}

/* ============================================================
   DARK THEME — navy-tinted (ARACA identity preserved)
   values = CURRENT EFFECTIVE dark (incl. theme.js BASE_COLORS.dark)
   ============================================================ */
:root[data-theme="dark"],
[data-theme="dark"] {
  /* legacy semantic — dark */
  --primary-color: var(--yellow);
  --primary-color-hover: var(--yellow-hover);
  --primary-color-rgb: 255, 193, 7;
  --secondary-color: #0D0D0D;                 /* was theme.js-injected */
  --accent-color: var(--primary-color);
  --accent-rgb: var(--primary-color-rgb);
  --accent-soft: rgba(var(--primary-color-rgb), 0.5);
  --accent-strong: var(--primary-color-hover);
  --accent-contrast: #212121;
  /* Dark page bg + a pale accent tint is still dark, so the dark --accent-contrast
     tone would vanish here — flip back to the bright yellow (see the light
     definition above for why the two themes need different values). */
  --accent-tint-fg: var(--accent-color);
  --focus-ring: rgba(var(--accent-rgb), 0.35);
  --background-color: var(--dark-bg);
  --background-color-rgb: var(--dark-bg-rgb);
  --text-color: #F3EEE4;                      /* warm off-white (was cool #E6E6F0) */
  --text-color-secondary: var(--dark-text-secondary);
  --card-bg: var(--dark-card);                /* warm #2c251d */
  --border-color: #4a3f30;                    /* warm border (was navy #33405c) */
  --header-bg: #1c1712;                       /* warm (was navy #141b2e) */
  --footer-bg: #1c1712;
  --section-bg: var(--dark-surface);
  --surface-tint-rgb: 255, 255, 255;

  /* canonical semantic — dark (warm charcoal set) */
  --color-primary-subtle:   rgba(255, 193, 7, 0.16);
  --color-primary-ink:      #ffcf5a;         /* light amber — high contrast on warm dark */
  --color-focus-ring:       rgba(255, 193, 7, 0.45);
  --color-bg:               var(--dark-bg);
  --color-bg-rgb:           var(--dark-bg-rgb);
  --color-surface:          var(--dark-surface);
  --color-surface-elevated: var(--dark-card);
  --color-surface-sunken:   var(--dark-sunken);
  --color-text-primary:     #F3EEE4;
  --color-text-secondary:   var(--dark-text-secondary);
  --color-text-muted:       #8b8069;
  --color-border:           #4a3f30;
  --color-border-subtle:    #3b3125;
  --color-border-strong:    #62553f;
  --color-header:           #1c1712;
  --color-overlay:          rgba(9, 6, 3, 0.62);

  /* elevation — dark (components should also add a hairline border) */
  --elevation-1: 0 1px 2px rgba(0,0,0,.4);
  --elevation-2: 0 4px 14px rgba(0,0,0,.45);
  --elevation-3: 0 8px 28px rgba(0,0,0,.5);
  --elevation-4: 0 16px 44px rgba(0,0,0,.55);
  --elevation-5: 0 24px 64px rgba(0,0,0,.6);
  --opacity-overlay: 0.6;

  /* user-scoped — dark. PHASE 04: converged onto the navy-tinted semantic
     surface set (--color-bg / --color-surface / --color-surface-elevated).
     ⚠ VISUAL VERIFICATION PENDING. */
  --user-dark: var(--dark-surface);
  --user-darker: var(--dark-bg);
  --user-gray: #322a20;
  --user-light-gray: #574b39;
  --user-bg: var(--dark-bg);
  --user-header-bg: var(--dark-surface);
  --user-sidebar-bg: var(--dark-surface);
  --user-main-bg: var(--dark-bg);
  --user-card-bg: var(--dark-card);
  --user-stat-card-bg: var(--dark-card);
  --user-chart-card-bg: var(--dark-card);
  --user-chart-placeholder-bg: var(--dark-surface);
  --user-form-input-bg: var(--dark-sunken);
  --user-table-bg: var(--dark-card);
  --user-settings-card-bg: var(--dark-card);
  --user-text: #F3EEE4;
  --user-text-secondary: var(--dark-text-secondary);
  --user-text-muted: #8b8069;
  --user-border: #4a3f30;
  --user-hover-bg: rgba(var(--accent-rgb), 0.12);
  --user-active-bg: rgba(var(--accent-rgb), 0.22);
  --user-overlay-bg: rgba(9, 6, 3, 0.62);
  --user-scrollbar-thumb: #574b39;
  --user-scrollbar-track: #33291f;

  /* admin-scoped — dark. PHASE 04: same convergence as --user-*. */
  --admin-dark: var(--dark-surface);
  --admin-darker: var(--dark-bg);
  --admin-gray: #322a20;
  --admin-light-gray: #574b39;
  --admin-text: #F3EEE4;
  --admin-text-secondary: var(--dark-text-secondary);
  --admin-border: #4a3f30;
  --admin-card-bg: var(--dark-card);
  --admin-bg: var(--dark-bg);
  --admin-header-bg: var(--dark-surface);
  --admin-sidebar-bg: var(--dark-surface);
  --admin-main-bg: var(--dark-bg);
  --admin-stat-card-bg: var(--dark-card);
  --admin-chart-card-bg: var(--dark-card);
  --admin-chart-placeholder-bg: var(--dark-surface);
  --admin-form-input-bg: var(--dark-sunken);
  --admin-table-bg: var(--dark-card);
  --admin-settings-card-bg: var(--dark-card);
  --admin-hover-bg: rgba(var(--accent-rgb), 0.12);
}

/* ============================================================
   RESPONSIVE TOKEN OVERRIDES
   (moved from dashboard.css @media(max-width:480px) :root)
   ============================================================ */
@media (max-width: 480px) {
  :root {
    --font-size-extra-small: 11.5px;
    --font-size-small: 12.5px;
    --font-size-sm: var(--font-size-small);
    --font-size-medium: 14px;
    --font-size-md: var(--font-size-medium);
    --font-size-base: var(--font-size-medium);
    --font-size-large: 15.5px;
    --font-size-lg: var(--font-size-large);
    --text-caption: 11.5px;
    --text-body-sm: 12.5px;
    --text-body: 14px;
    --text-body-lg: 15.5px;
    --btn-padding-y: 8px;
    --btn-padding-x: 14px;
  }
}

/* ============================================================
   REDUCED MOTION — global baseline
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-instant: 0ms;
    --dur-fast: 0ms;
    --dur-base: 0ms;
    --dur-slow: 0ms;
    --dur-slower: 0ms;
  }
}

/* ============================================================
   GLOBAL TYPOGRAPHY & SMOOTHING BASELINE
   ============================================================ */
html {
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body, button, input, select, textarea {
  font-family: var(--font-family-base);
  font-weight: var(--fw-regular);
}