/* ==========================================================================
   DESIGN TOKENS
   All CSS custom properties for the FSP Content Engine.
   ========================================================================== */

:root {

  /* --------------------------------------------------------------------------
     BRAND COLORS
     -------------------------------------------------------------------------- */
  --gold:           #c9a96e;
  --gold-bright:    #e8c882;
  --gold-dim:       #8a6d42;
  --gold-alpha-10:  rgba(201, 169, 110, 0.10);
  --gold-alpha-20:  rgba(201, 169, 110, 0.20);
  --gold-alpha-40:  rgba(201, 169, 110, 0.40);

  --ink:            #0a0a0a;
  --ink-90:         rgba(10, 10, 10, 0.90);
  --ink-70:         rgba(10, 10, 10, 0.70);
  --ink-50:         rgba(10, 10, 10, 0.50);

  --surface:        #111111;
  --surface-2:      #1a1a1a;
  --surface-3:      #222222;
  --surface-4:      #2a2a2a;
  --surface-glass:  rgba(26, 26, 26, 0.80);

  --text-primary:   #f0ece4;
  --text-secondary: #a09880;
  --text-muted:     #5a5444;
  --text-inverse:   #0a0a0a;

  --border:         rgba(201, 169, 110, 0.15);
  --border-strong:  rgba(201, 169, 110, 0.35);
  --border-subtle:  rgba(255, 255, 255, 0.06);

  /* Accent palette — used when accent != gold */
  --accent:         var(--gold);
  --accent-bright:  var(--gold-bright);
  --accent-dim:     var(--gold-dim);
  --accent-alpha-10: var(--gold-alpha-10);
  --accent-alpha-20: var(--gold-alpha-20);

  /* Status colors */
  --success:        #4caf7d;
  --success-alpha:  rgba(76, 175, 125, 0.15);
  --warning:        #e8a838;
  --warning-alpha:  rgba(232, 168, 56, 0.15);
  --danger:         #e05252;
  --danger-alpha:   rgba(224, 82, 82, 0.15);
  --info:           #5b9bd5;
  --info-alpha:     rgba(91, 155, 213, 0.15);

  /* --------------------------------------------------------------------------
     SPACING SCALE
     -------------------------------------------------------------------------- */
  --sp-0:  0px;
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  20px;
  --sp-6:  24px;
  --sp-8:  32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;
  --sp-20: 80px;
  --sp-24: 96px;

  /* --------------------------------------------------------------------------
     TYPE SCALE
     -------------------------------------------------------------------------- */
  --text-xs:   10px;
  --text-sm:   12px;
  --text-base: 13px;
  --text-md:   15px;
  --text-lg:   18px;
  --text-xl:   24px;
  --text-2xl:  32px;
  --text-3xl:  48px;
  --text-hero: 64px;

  --font-mono:  'DM Mono', 'JetBrains Mono', 'Fira Code', 'Courier New', monospace;
  --font-sans:  'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-serif: 'Georgia', 'Times New Roman', serif;

  --leading-tight:   1.2;
  --leading-snug:    1.4;
  --leading-base:    1.6;
  --leading-relaxed: 1.8;

  --tracking-tight:  -0.03em;
  --tracking-normal:  0;
  --tracking-wide:    0.06em;
  --tracking-wider:   0.12em;

  /* --------------------------------------------------------------------------
     BORDER RADIUS
     -------------------------------------------------------------------------- */
  --radius-sm:   4px;
  --radius-base: 8px;
  --radius-md:   12px;
  --radius-lg:   16px;
  --radius-xl:   24px;
  --radius-full: 9999px;

  /* --------------------------------------------------------------------------
     SHADOWS
     -------------------------------------------------------------------------- */
  --shadow-sm:   0 1px 3px rgba(0,0,0,0.4);
  --shadow-base: 0 2px 8px rgba(0,0,0,0.5), 0 1px 3px rgba(0,0,0,0.3);
  --shadow-md:   0 4px 16px rgba(0,0,0,0.6), 0 2px 6px rgba(0,0,0,0.3);
  --shadow-lg:   0 8px 32px rgba(0,0,0,0.7), 0 4px 12px rgba(0,0,0,0.4);
  --shadow-xl:   0 16px 64px rgba(0,0,0,0.8);
  --shadow-gold: 0 0 20px rgba(201, 169, 110, 0.25);
  --shadow-inner: inset 0 1px 3px rgba(0,0,0,0.4);

  /* --------------------------------------------------------------------------
     Z-INDEX LAYERS
     -------------------------------------------------------------------------- */
  --z-base:    0;
  --z-raised:  10;
  --z-overlay: 100;
  --z-modal:   200;
  --z-toast:   300;
  --z-top:     999;

  /* --------------------------------------------------------------------------
     MOTION
     -------------------------------------------------------------------------- */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:     cubic-bezier(0.4, 0, 1, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-linear: linear;

  --dur-instant: 60ms;
  --dur-fast:    120ms;
  --dur-base:    200ms;
  --dur-slow:    400ms;
  --dur-xslow:   600ms;
  --dur-lazy:    900ms;

  /* --------------------------------------------------------------------------
     BREAKPOINTS (reference values — use in JS via getComputedStyle)
     -------------------------------------------------------------------------- */
  --bp-mobile: 640px;
  --bp-tablet: 1024px;
  --bp-desktop: 1280px;

  /* --------------------------------------------------------------------------
     LAYOUT
     -------------------------------------------------------------------------- */
  --max-width:      1200px;
  --panel-width:    480px;
  --sidebar-width:  260px;
  --tab-nav-height: 64px;
  --header-height:  56px;

  /* Safe area insets (filled by JS or device) */
  --safe-top:    env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left:   env(safe-area-inset-left, 0px);
  --safe-right:  env(safe-area-inset-right, 0px);

  /* --------------------------------------------------------------------------
     COMPONENT TOKENS
     -------------------------------------------------------------------------- */

  /* Input / fields */
  --input-bg:        var(--surface-2);
  --input-border:    var(--border);
  --input-border-focus: var(--accent);
  --input-radius:    var(--radius-base);
  --input-height:    44px;
  --input-height-lg: 56px;

  /* Button */
  --btn-height:      44px;
  --btn-height-sm:   32px;
  --btn-height-lg:   52px;
  --btn-radius:      var(--radius-base);

  /* Card */
  --card-bg:         var(--surface-2);
  --card-border:     var(--border-subtle);
  --card-radius:     var(--radius-lg);
  --card-padding:    var(--sp-6);

  /* Refraction overlay */
  --refraction-opacity: 0.03;
}

/* --------------------------------------------------------------------------
   LIGHT THEME OVERRIDES
   -------------------------------------------------------------------------- */
[data-theme="light"] {
  --ink:            #ffffff;
  --ink-90:         rgba(255, 255, 255, 0.90);
  --ink-70:         rgba(255, 255, 255, 0.70);
  --ink-50:         rgba(255, 255, 255, 0.50);

  --surface:        #f5f2ed;
  --surface-2:      #ede9e2;
  --surface-3:      #e3ddd4;
  --surface-4:      #d9d2c7;
  --surface-glass:  rgba(240, 236, 228, 0.85);

  --text-primary:   #1a1714;
  --text-secondary: #5a5040;
  --text-muted:     #9a8f7a;

  --border:         rgba(26, 23, 20, 0.12);
  --border-strong:  rgba(26, 23, 20, 0.25);
  --border-subtle:  rgba(26, 23, 20, 0.06);

  --shadow-sm:   0 1px 3px rgba(0,0,0,0.10);
  --shadow-base: 0 2px 8px rgba(0,0,0,0.12);
  --shadow-md:   0 4px 16px rgba(0,0,0,0.15);
  --shadow-lg:   0 8px 32px rgba(0,0,0,0.18);
  --card-bg:     var(--surface-2);
}

/* --------------------------------------------------------------------------
   ACCENT VARIANTS
   -------------------------------------------------------------------------- */
[data-accent="silver"] {
  --accent:          #b0b8c4;
  --accent-bright:   #d0d8e4;
  --accent-dim:      #707880;
  --accent-alpha-10: rgba(176, 184, 196, 0.10);
  --accent-alpha-20: rgba(176, 184, 196, 0.20);
  --border:          rgba(176, 184, 196, 0.15);
  --border-strong:   rgba(176, 184, 196, 0.35);
}

[data-accent="coral"] {
  --accent:          #e07060;
  --accent-bright:   #f09080;
  --accent-dim:      #904840;
  --accent-alpha-10: rgba(224, 112, 96, 0.10);
  --accent-alpha-20: rgba(224, 112, 96, 0.20);
  --border:          rgba(224, 112, 96, 0.15);
  --border-strong:   rgba(224, 112, 96, 0.35);
}

[data-accent="sage"] {
  --accent:          #7a9e7e;
  --accent-bright:   #9abea0;
  --accent-dim:      #4a6e50;
  --accent-alpha-10: rgba(122, 158, 126, 0.10);
  --accent-alpha-20: rgba(122, 158, 126, 0.20);
  --border:          rgba(122, 158, 126, 0.15);
  --border-strong:   rgba(122, 158, 126, 0.35);
}