/* ============================================================
   Lucia Design Tokens — Magnum styling
   Relace-inspired warm minimal — cream, dark, gold
   3-color discipline: #fffef2 / #191918 / #fcaa2d

   --df-* tokens carry magnum's real values.
   --lc-* tokens are aliases onto --df-* so every legacy
   lucia component stylesheet adopts the magnum palette.
   ============================================================ */

/* ── Parabole Font Faces ── */
@font-face { font-family: 'Parabole Display'; src: url('../fonts/parabole-display.woff2') format('woff2'); font-display: swap; font-style: normal; font-weight: 400; }
@font-face { font-family: 'Parabole Text'; src: url('../fonts/parabole-text.woff2') format('woff2'); font-display: swap; font-style: normal; font-weight: 400; }
@font-face { font-family: 'Parabole Text'; src: url('../fonts/parabole-text-medium.woff2') format('woff2'); font-display: swap; font-style: normal; font-weight: 500; }
@font-face { font-family: 'Parabole Text'; src: url('../fonts/parabole-text-bold.woff2') format('woff2'); font-display: swap; font-style: normal; font-weight: 700; }

:root {
  /* ── Background Layers (warm cream — used by website, auth pages, sidebar) ── */
  --df-bg-deepest:    #f3f2e7;
  --df-bg-base:       #fffef2;
  --df-bg-surface:    #fffef2;
  --df-bg-elevated:   #f3f2e7;
  --df-bg-hover:      #eceadf;

  /* ── Accent Surfaces ── */
  --df-bg-light:      #f3f2e7;
  --df-bg-white:      #fffef2;
  --df-bg-light-warm: #eceadf;
  --df-bg-cream:      #f3f2e7;

  /* ── Accent: Warm Gold ── */
  /* Legacy: --df-blue tokens store gold values from palette v2. Use --df-accent aliases in new code. */
  --df-blue:          #fcaa2d;
  --df-blue-bright:   #fdba4d;
  --df-blue-dim:      #e89a1f;
  --df-blue-deep:     #d48a15;
  --df-blue-glow:     rgba(252, 170, 45, 0.10);
  --df-blue-border:   rgba(252, 170, 45, 0.25);
  --df-blue-subtle:   rgba(252, 170, 45, 0.08);
  /* Semantic aliases (preferred) */
  --df-accent:        var(--df-blue);
  --df-accent-bright: var(--df-blue-bright);
  --df-accent-dim:    var(--df-blue-dim);
  --df-accent-glow:   var(--df-blue-glow);
  --df-accent-border: var(--df-blue-border);
  --df-accent-subtle: var(--df-blue-subtle);

  /* ── Status (functional only, never decorative) ── */
  --df-green:         #16A34A;
  --df-green-bright:  #22C55E;
  --df-green-glow:    rgba(22, 163, 74, 0.08);
  --df-red:           #DC2626;
  --df-red-glow:      rgba(220, 38, 38, 0.08);
  --df-amber:         #fcaa2d;
  --df-amber-dim:     #e89a1f;
  --df-amber-glow:    rgba(252, 170, 45, 0.10);

  /* ── Text (high-contrast for readability) ── */
  --df-text-primary:  #191918;
  --df-text-secondary: rgba(25, 25, 24, 0.85);
  --df-text-tertiary:  rgba(25, 25, 24, 0.7);
  --df-text-muted:     rgba(25, 25, 24, 0.5);

  /* ── Borders (warm) ── */
  --df-border:        #e3e2d8;
  --df-border-2:      rgba(209, 208, 198, 0.6);
  --df-border-3:      rgba(209, 208, 198, 0.8);
  --df-border-light:  rgba(209, 208, 198, 0.3);
  --df-border-light-2:rgba(209, 208, 198, 0.4);

  /* ── Shadows (warm-tinted) ── */
  --df-shadow-xs:     0 1px 2px rgba(25, 25, 24, 0.04);
  --df-shadow-sm:     0 1px 3px rgba(25, 25, 24, 0.06), 0 1px 2px rgba(25, 25, 24, 0.04);
  --df-shadow:        0 4px 12px rgba(25, 25, 24, 0.06);
  --df-shadow-md:     0 8px 24px rgba(25, 25, 24, 0.08);
  --df-shadow-lg:     0 16px 40px rgba(25, 25, 24, 0.10);
  --df-shadow-blue:   0 4px 20px rgba(252, 170, 45, 0.15);
  --df-shadow-blue-lg:0 8px 40px rgba(252, 170, 45, 0.20);

  /* ── Typography ── */
  --df-font-headline: 'Parabole Display', 'Space Grotesk', -apple-system, sans-serif;
  --df-font-display:  'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --df-font-body:     'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --df-font-mono:     'JetBrains Mono', 'Fira Code', 'SF Mono', 'Consolas', monospace;

  /* ── Type Scale ── */
  --df-text-display:  clamp(2.25rem, 4vw, 3.25rem);
  --df-text-display-2:clamp(1.375rem, 2.2vw, 1.625rem);
  --df-text-h1:       clamp(1.875rem, 3vw, 2.5rem);
  --df-text-h2:       clamp(1.5rem, 2.2vw, 2rem);
  --df-text-h3:       1.375rem;
  --df-text-h4:       1.125rem;
  --df-text-body:     1.0625rem;
  --df-text-small:    0.9375rem;
  --df-text-micro:    0.8125rem;
  --df-text-nano:     0.75rem;

  /* ── Letter Spacing ── */
  --df-tracking-tight:  -0.03em;
  --df-tracking-tighter:-0.05em;
  --df-tracking-wide:   0.04em;

  /* ── Line Heights ── */
  --df-leading-tight: 1.15;
  --df-leading-snug:  1.3;
  --df-leading-normal:1.6;
  --df-leading-relaxed:1.75;

  /* ── Font Weights ── */
  --df-weight-normal:  400;
  --df-weight-medium:  500;
  --df-weight-semibold:600;
  --df-weight-bold:    700;

  /* ── Spacing (4px baseline) ── */
  --df-space-0:  0;
  --df-space-1:  4px;
  --df-space-2:  8px;
  --df-space-3:  12px;
  --df-space-4:  16px;
  --df-space-5:  20px;
  --df-space-6:  24px;
  --df-space-8:  32px;
  --df-space-10: 40px;
  --df-space-12: 48px;
  --df-space-16: 64px;
  --df-space-20: 80px;
  --df-space-24: 96px;
  --df-space-32: 128px;

  /* ── Border Radius (Relace: near-square) ── */
  --df-radius-xs:  1px;
  --df-radius-sm:  2px;
  --df-radius:     4px;
  --df-radius-md:  4px;
  --df-radius-lg:  4px;
  --df-radius-xl:  8px;
  --df-radius-2xl: 8px;
  --df-radius-full:9999px;

  /* ── Layout ── */
  --df-container:    1200px;
  --df-container-sm: 960px;
  --df-container-lg: 1400px;
  --df-nav-height:   72px;
  --df-sidebar-width:280px;
  --df-topbar-height:56px;
  --df-ai-panel-width:380px;

  /* ── Transitions ── */
  --df-ease:         cubic-bezier(0.4, 0, 0.2, 1);
  --df-ease-in:      cubic-bezier(0.4, 0, 1, 1);
  --df-ease-out:     cubic-bezier(0, 0, 0.2, 1);
  --df-ease-bounce:  cubic-bezier(0.34, 1.56, 0.64, 1);
  --df-duration-fast:150ms;
  --df-duration:     200ms;
  --df-duration-slow:300ms;
  --df-duration-slower:500ms;

  /* ── Z-Index Scale ── */
  --df-z-base:       0;
  --df-z-elevated:   10;
  --df-z-sticky:     100;
  --df-z-overlay:    200;
  --df-z-modal:      300;
  --df-z-toast:      400;
  --df-z-tooltip:    500;

  /* ============================================================
     Legacy --lc-* aliases → magnum --df-* values.
     Lucia component stylesheets reference --lc-* names; mapping
     them here makes every page render with the magnum palette
     without rewriting the component CSS.
     ============================================================ */

  /* Surfaces */
  --lc-bg-1: var(--df-bg-base);
  --lc-bg-2: var(--df-bg-surface);
  --lc-bg-3: var(--df-bg-elevated);
  --lc-bg-4: var(--df-bg-hover);

  /* Surfaces — Data Room port aliases (magnum-named) */
  --lc-bg-base: var(--df-bg-base);
  --lc-bg-surface: var(--df-bg-surface);
  --lc-bg-elevated: var(--df-bg-elevated);
  --lc-bg-elev: var(--df-bg-elevated);
  --lc-bg-hover: var(--df-bg-hover);
  --lc-border-light: var(--df-border-light);
  --lc-radius: var(--df-radius);
  --lc-text-primary: var(--df-text-primary);
  --lc-text-tertiary: var(--df-text-tertiary);
  --lc-accent-bright: var(--df-accent-bright);
  --lc-accent-dim: var(--df-accent-dim);
  --lc-accent-subtle: var(--df-accent-subtle);
  --lc-accent-border: var(--df-accent-border);
  --lc-amber-dim: var(--df-amber-dim);
  --lc-weight-regular: var(--df-weight-normal);
  --lc-weight-semibold: var(--df-weight-semibold);
  --lc-weight-bold: var(--df-weight-bold);
  --lc-font-body: var(--df-font-body);
  --lc-space-7: 28px;

  /* Dark surfaces (hero, sidebar, CTA) — magnum near-black */
  --lc-dark-1: #191918;
  --lc-dark-2: #1f1f1e;
  --lc-dark-3: #2a2a29;
  --lc-dark-4: #111110;

  /* Text */
  --lc-text: var(--df-text-primary);
  --lc-text-light: var(--df-bg-base);
  --lc-text-secondary: var(--df-text-secondary);
  --lc-text-muted: var(--df-text-muted);

  /* Accent — magnum warm gold */
  --lc-accent: var(--df-accent);
  --lc-accent-hover: var(--df-accent-dim);
  --lc-accent-light: var(--df-accent-glow);

  /* Borders */
  --lc-border: var(--df-border);
  --lc-border-dashed: var(--df-border-light-2);
  --lc-border-solid: var(--df-border);
  --lc-border-dark: var(--df-border-3);

  /* Status */
  --lc-green: var(--df-green);
  --lc-green-bg: var(--df-green-glow);
  --lc-green-light: var(--df-green-glow);
  --lc-amber: var(--df-amber);
  --lc-amber-bg: var(--df-amber-glow);
  --lc-amber-light: var(--df-amber-glow);
  --lc-red: var(--df-red);
  --lc-red-bg: var(--df-red-glow);
  --lc-red-light: var(--df-red-glow);

  /* Button surfaces */
  --lc-btn-ghost: rgba(25, 25, 24, 0.03);
  --lc-btn-ghost-border: var(--df-border);

  /* Input */
  --lc-input-bg: var(--df-bg-elevated);
  --lc-input-placeholder: var(--df-text-muted);
  --lc-input-focus: var(--df-accent-glow);

  /* Typography */
  --lc-font: var(--df-font-body);
  --lc-font-mono: var(--df-font-mono);
  --lc-font-accent: var(--df-font-headline);

  /* Font sizes */
  --lc-text-display: var(--df-text-display);
  --lc-text-h1: var(--df-text-h1);
  --lc-text-h2: var(--df-text-h2);
  --lc-text-h3: var(--df-text-h3);
  --lc-text-h4: var(--df-text-h4);
  --lc-text-h5: var(--df-text-h4);
  --lc-text-body: var(--df-text-body);
  --lc-text-small: var(--df-text-small);
  --lc-text-micro: var(--df-text-micro);
  --lc-text-nano: var(--df-text-nano);

  /* Line heights */
  --lc-lh-tight: var(--df-leading-tight);
  --lc-lh-heading: var(--df-leading-snug);
  --lc-lh-body: var(--df-leading-normal);
  --lc-lh-relaxed: var(--df-leading-relaxed);

  /* Letter spacing */
  --lc-ls-display: var(--df-tracking-tighter);
  --lc-ls-h1: var(--df-tracking-tight);
  --lc-ls-h2: var(--df-tracking-tight);
  --lc-ls-h3: var(--df-tracking-tight);
  --lc-ls-body: 0;
  --lc-ls-label: var(--df-tracking-wide);
  --lc-ls-tag: var(--df-tracking-wide);

  /* Font weights */
  --lc-fw-regular: var(--df-weight-normal);
  --lc-fw-medium: var(--df-weight-medium);
  --lc-fw-semibold: var(--df-weight-semibold);
  --lc-fw-bold: var(--df-weight-bold);

  /* Spacing */
  --lc-space-1: var(--df-space-1);
  --lc-space-2: var(--df-space-2);
  --lc-space-3: var(--df-space-3);
  --lc-space-4: var(--df-space-4);
  --lc-space-5: var(--df-space-5);
  --lc-space-6: var(--df-space-6);
  --lc-space-8: var(--df-space-8);
  --lc-space-10: var(--df-space-10);
  --lc-space-12: var(--df-space-12);
  --lc-space-16: var(--df-space-16);
  --lc-space-20: var(--df-space-20);
  --lc-space-24: var(--df-space-24);
  --lc-space-32: var(--df-space-32);

  /* Radius — magnum near-square */
  --lc-radius-sm: var(--df-radius-sm);
  --lc-radius-md: var(--df-radius-md);
  --lc-radius-lg: var(--df-radius-lg);
  --lc-radius-pill: var(--df-radius-full);

  /* Layout */
  --lc-container: var(--df-container);
  --lc-container-sm: var(--df-container-sm);
  --lc-container-lg: var(--df-container-lg);
  --lc-nav-height: var(--df-nav-height);
  --lc-sidebar-width: var(--df-sidebar-width);
  --lc-topbar-height: var(--df-topbar-height);
  --lc-ai-panel-width: var(--df-ai-panel-width);
  --lc-section-nav-width: 220px;

  /* Shadows */
  --lc-shadow-sm: var(--df-shadow-sm);
  --lc-shadow-md: var(--df-shadow-md);
  --lc-shadow-lg: var(--df-shadow-lg);
  --lc-shadow-overlay: var(--df-shadow-lg);

  /* Transitions */
  --lc-ease: var(--df-ease);
  --lc-ease-snappy: var(--df-ease-bounce);
  --lc-ease-smooth: var(--df-ease);
  --lc-duration-fast: var(--df-duration-fast);
  --lc-duration-normal: var(--df-duration);
  --lc-duration-slow: var(--df-duration-slow);

  /* Z-index */
  --lc-z-base: var(--df-z-base);
  --lc-z-lines: 3;
  --lc-z-sticky: var(--df-z-elevated);
  --lc-z-dropdown: 50;
  --lc-z-nav: var(--df-z-sticky);
  --lc-z-overlay: var(--df-z-overlay);
  --lc-z-modal: var(--df-z-modal);
  --lc-z-toast: var(--df-z-toast);
  --lc-z-tooltip: var(--df-z-tooltip);

  /* Dashed line texture (resolves through aliased border tokens) */
  --lc-line-dash-h: repeating-linear-gradient(
    to right,
    var(--lc-border-dashed) 0 7px,
    transparent 7px 14px
  );
  --lc-line-dash-v: repeating-linear-gradient(
    to bottom,
    var(--lc-border-dashed) 0 7px,
    transparent 7px 14px
  );
  --lc-line-solid: linear-gradient(to right, var(--lc-border));
  --lc-line-mask: linear-gradient(
    to right,
    transparent 0%,
    black 5%,
    black 95%,
    transparent 100%
  );

  /* Chart colors — magnum gold monochrome ramp */
  --lc-chart-1: var(--df-accent);
  --lc-chart-2: #fdba4d;
  --lc-chart-3: #f7c97d;
  --lc-chart-4: #f0d6a8;
  --lc-chart-5: #e8e2cf;
  --lc-chart-6: #f3f2e7;
}