/* ════════════════════════════════════════════════════════════════
 * FlowRiver CEO Dashboard — Design Tokens
 * Linen & Eucalyptus system (adapted from design_handoff_flowriver/tokens.css)
 * ════════════════════════════════════════════════════════════════ */

:root {
  /* ── Surface (warm linen paper) ── */
  --fr-paper:        #F4F1E8;
  --fr-paper-2:      #ECE6D4;
  --fr-paper-3:      #DCD3BB;
  --fr-paper-soft:   #FAF7EE;

  /* ── Eucalyptus (calm primary) ── */
  --fr-sage-50:      #EDF1EC;
  --fr-sage-100:     #DCE5DF;
  --fr-sage-300:     #9DB4A7;
  --fr-sage-500:     #6B8E7F;
  --fr-sage-700:     #3F6B5B;
  --fr-sage-900:     #2D3A33;

  /* ── Terracotta clay (accent) ── */
  --fr-bronze-50:    #F6EAE3;
  --fr-bronze-100:   #EBD3C5;
  --fr-bronze-300:   #DBAA94;
  --fr-bronze-500:   #C49680;
  --fr-bronze-700:   #9A6A53;

  /* ── Ink (eucalyptus-tinted, never pure black) ── */
  --fr-ink:          #2D3A33;
  --fr-ink-2:        #4F5A52;
  --fr-ink-3:        #7C857C;
  --fr-ink-4:        #ABB1AB;

  /* ── Semantic accents ── */
  --fr-coral:        #B85A47;
  --fr-coral-50:     #F4E5DF;
  --fr-violet:       #4A6B7A;
  --fr-violet-50:    #E5EBEE;

  /* ── Typography ── */
  --fr-font-display: 'Instrument Serif', Georgia, serif;
  --fr-font-sans:    'DM Sans', system-ui, -apple-system, sans-serif;
  --fr-font-mono:    'Geist Mono', ui-monospace, 'SF Mono', monospace;

  --fr-text-xs:   11px;
  --fr-text-sm:   13px;
  --fr-text-base: 15px;
  --fr-text-md:   16px;
  --fr-text-lg:   19px;
  --fr-text-xl:   24px;
  --fr-text-2xl:  32px;

  --fr-tracking-tight:   -0.025em;
  --fr-tracking-display: -0.02em;
  --fr-tracking-wide:     0.14em;

  /* ── Spacing (4px base) ── */
  --fr-space-1: 4px;  --fr-space-2: 8px;  --fr-space-3: 12px;
  --fr-space-4: 16px; --fr-space-5: 20px; --fr-space-6: 24px;
  --fr-space-7: 32px; --fr-space-8: 48px;

  /* ── Radii ── */
  --fr-radius-sm: 6px;  --fr-radius-md: 10px; --fr-radius-lg: 14px;
  --fr-radius-xl: 18px; --fr-radius-2xl: 24px; --fr-radius-pill: 100px;

  /* ── Shadows (eucalyptus-tinted) ── */
  --fr-shadow-sm:   0 1px 2px rgba(45,58,51,0.04), 0 1px 3px rgba(45,58,51,0.06);
  --fr-shadow-md:   0 1px 2px rgba(45,58,51,0.04), 0 8px 16px -4px rgba(45,58,51,0.08);
  --fr-shadow-lg:   0 1px 2px rgba(45,58,51,0.04), 0 24px 48px -16px rgba(45,58,51,0.16);
  --fr-shadow-card: 0 1px 0 rgba(255,255,255,0.6) inset, 0 1px 2px rgba(45,58,51,0.04), 0 16px 32px -12px rgba(45,58,51,0.12);
  --fr-shadow-cta:  0 1px 0 rgba(255,255,255,0.18) inset, 0 8px 24px -6px rgba(63,107,91,0.4);

  /* ── Motion ── */
  --fr-duration-fast: 150ms;
  --fr-duration-normal: 250ms;
  --fr-duration-slow: 500ms;
  --fr-ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --fr-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ════════════════════════════════════════════════════════════════
   * Backward-compatible aliases
   * Maps old var(--xxx) names to new design tokens so that 130+
   * references in CSS and JS template literals auto-remap.
   * ════════════════════════════════════════════════════════════════ */
  --bg:             var(--fr-paper);
  --bg-sidebar:     var(--fr-sage-900);
  --card:           var(--fr-paper-soft);
  --card-border:    rgba(45,58,51,0.08);
  --card-hover:     #FFFFFF;
  --primary:        var(--fr-sage-500);
  --primary-glow:   rgba(107,142,127,0.12);
  --success:        var(--fr-sage-700);
  --success-glow:   rgba(63,107,91,0.1);
  --warning:        var(--fr-bronze-500);
  --warning-glow:   rgba(196,150,128,0.1);
  --danger:         var(--fr-coral);
  --danger-glow:    rgba(184,90,71,0.1);
  --info:           var(--fr-violet);
  --info-glow:      rgba(74,107,122,0.1);
  --text:           var(--fr-ink);
  --text-secondary: var(--fr-ink-2);
  --muted:          var(--fr-ink-3);
  --dim:            var(--fr-ink-4);
  --font:           var(--fr-font-sans);
  --font-mono:      var(--fr-font-mono);
  --sidebar-width:  240px;
  --header-height:  64px;
  --radius:         var(--fr-radius-xl);
  --radius-sm:      var(--fr-radius-md);
}