/* ════════════════════════════════════════════════════════════════════════
   Design Tokens — exact match with Yozafy theme (assets/theme.css)
   Single source of truth for colors, spacing, typography, shadows.
   ════════════════════════════════════════════════════════════════════════ */

:root {
  /* ── Colors ───────────────────────────────────────── */
  --color-primary:        #ff6600;
  --color-primary-hover:  #e55a00;
  --color-primary-dark:   #c2410c;
  --color-primary-light:  #fff5ee;
  --color-dark:           #1a1a1a;
  --color-text:           #444444;
  --color-text-light:     #666666;
  --color-text-muted:     #999999;
  --color-bg:             #ffffff;
  --color-bg-warm:        #fff5ee;
  --color-bg-light:       #f9f9f9;
  --color-surface:        #ffffff;
  --color-border:         #e8e8e8;
  --color-border-light:   #f0f0f0;
  --color-white:          #ffffff;

  --color-success:        #22c55e;
  --color-success-hover:  #16a34a;
  --color-success-dark:   #15803d;
  --color-success-light:  #f0fdf4;
  --color-error:          #ef4444;
  --color-error-hover:    #dc2626;
  --color-error-dark:     #b91c1c;
  --color-error-light:    #fef2f2;
  --color-warning:        #f59e0b;
  --color-warning-dark:   #b45309;
  --color-warning-light:  #fffbeb;
  --color-info:           #3b82f6;
  --color-info-dark:      #1d4ed8;
  --color-info-light:     #eff6ff;

  /* Alpha-blend tokens — semi-transparent compositions of the brand colors.
     Needed because CSS variables can't be interpolated inside rgba()
     (e.g. rgba(var(--color-primary), 0.12) is invalid). Pre-mixed here so
     focus rings + overlays still reference tokens, not raw rgba in components. */
  --color-primary-ring:        rgba(255, 102, 0, 0.12);   /* focus ring on form fields */
  --color-primary-ring-strong: rgba(255, 102, 0, 0.18);   /* focus ring on icon buttons */
  --color-modal-overlay:       rgba(0,   0,   0, 0.50);   /* primary modal backdrop (strong dim) */
  --color-overlay-soft:        rgba(0,   0,   0, 0.40);   /* sidebar drawer / secondary dialog (lighter dim) */

  /* Star colors (consistent with theme) */
  --rev-star-color:       #f59e0b;
  --rev-star-empty:       #d1d5db;

  /* ── Typography ───────────────────────────────────── */
  --font-family:          'Inter', system-ui, -apple-system, sans-serif;
  --font-family-mono:     ui-monospace, SFMono-Regular, Menlo, monospace;

  --font-size-xs:         11px;
  --font-size-sm:         13px;
  --font-size-base:       14px;
  --font-size-lg:         16px;
  --font-size-xl:         20px;
  --font-size-2xl:        24px;
  --font-size-3xl:        30px;
  --font-size-display:    40px;

  --font-weight-normal:   400;
  --font-weight-medium:   500;
  --font-weight-semibold: 600;
  --font-weight-bold:     700;

  --line-height-tight:    1.2;
  --line-height-snug:     1.4;
  --line-height-normal:   1.6;

  /* ── Spacing ──────────────────────────────────────── */
  --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-12: 64px;
  --space-16: 80px;

  /* ── Border radius ────────────────────────────────── */
  --radius-sm:   4px;
  --radius-md:   6px;
  --radius-lg:   10px;
  --radius-xl:   14px;
  --radius-full: 9999px;

  /* ── Shadows ──────────────────────────────────────── */
  --shadow-xs:    0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-sm:    0 1px 3px rgba(0, 0, 0, 0.06);
  --shadow-md:    0 4px 12px rgba(0, 0, 0, 0.08);
  --shadow-lg:    0 8px 24px rgba(0, 0, 0, 0.1);
  --shadow-xl:    0 16px 40px rgba(0, 0, 0, 0.12);
  --shadow-primary: 0 8px 20px rgba(255, 102, 0, 0.18);

  /* ── Transitions ──────────────────────────────────── */
  --t-hover:  0.18s cubic-bezier(0.4, 0, 0.2, 1);
  --t-enter:  0.28s cubic-bezier(0.4, 0, 0.2, 1);
  --t-exit:   0.18s cubic-bezier(0.4, 0, 0.2, 1);
  --t-spring: 0.32s cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ── Layout sizes ─────────────────────────────────── */
  --sidebar-width:        240px;
  --sidebar-width-mobile: 100%;
  --header-height:        56px;
  --content-max-width:    1536px;

  /* ── Component sizes ──────────────────────────────── */
  /* Toggle (md/default) track. Exposed so external layout placeholders
     can reserve the same footprint without re-hardcoding the values. */
  --toggle-track-w: 36px;
  --toggle-track-h: 20px;

  /* ── Container widths ─────────────────────────────── */
  --container-sm: 640px;
  --container-md: 1024px;
  --container-lg: 1280px;
  --container-xl: 1440px;

  /* ── Z-index scale ────────────────────────────────── */
  --z-base:           0;
  --z-dropdown:       100;
  --z-sticky:         200;
  --z-modal-backdrop: 900;
  --z-modal:          1000;
  --z-toast:          9000;
  --z-tooltip:        10000;
}