/* design-tokens.css — EE pages: matches FI home color scheme.
 * Same brand red (#ff4f3a), same near-black text, same off-white surface as flowdial.io.
 * Keeps editorial typography (Fraunces + DM Sans) to distinguish body content. */
:root {
  /* === FI brand chrome (header/footer) === */
  --fi-brand: #ff4f3a;
  --fi-brand-hover: #e04432;
  --fi-brand-tint: rgba(255, 79, 58, 0.08);
  --fi-text: #0f1115;
  --fi-text-muted: #4a5360;
  --fi-text-light: #8a93a3;
  --fi-bg-white: #ffffff;
  --fi-border: #e7eaef;
  --fi-footer-bg: #0f1115;
  --fi-footer-text: #a0aec0;
  --fi-footer-divider: #1e2330;

  /* === EE body — same palette as FI home for brand cohesion === */
  --color-bg: #ffffff;
  --color-bg-warm: #fafbfc;
  --color-surface: #ffffff;
  --color-surface-raised: #ffffff;
  --color-surface-hover: #fff4f2;
  --color-text: #0f1115;
  --color-text-muted: #4a5360;
  --color-text-faint: #8a93a3;
  --color-border: #e7eaef;
  --color-border-strong: #d2d6dd;
  --color-divider: #f0f2f5;

  --color-accent: #ff4f3a;             /* same as FI brand */
  --color-accent-soft: rgba(255, 79, 58, 0.08);
  --color-accent-hover: #e04432;

  --color-positive: #2e8b57;            /* sea green for revenue up */
  --color-positive-soft: rgba(46, 139, 87, 0.08);
  --color-negative: #c44536;            /* oxblood for revenue down */
  --color-negative-soft: rgba(196, 69, 54, 0.08);
  --color-warm: #ffaa3a;                /* secondary accent */

  --gradient-paper:
    radial-gradient(at 5% 8%, rgba(255, 79, 58, 0.04) 0px, transparent 38%),
    radial-gradient(at 95% 4%, rgba(46, 139, 87, 0.03) 0px, transparent 35%);

  /* === Typography (kept editorial — Fraunces + DM Sans for body distinction) === */
  --font-display: 'Fraunces', 'Georgia', serif;
  --font-body: 'DM Sans', -apple-system, system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;
  --font-fi: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

  --weight-light: 300;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-bold: 700;
  --weight-black: 800;
  --weight-display: 600;

  --line-tight: 1.05;
  --line-normal: 1.55;
  --line-relaxed: 1.7;

  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px;
  --space-6: 24px; --space-8: 32px; --space-12: 48px; --space-16: 64px;
  --space-20: 80px; --space-24: 96px;

  --radius-sm: 3px; --radius-md: 8px; --radius-lg: 14px; --radius-xl: 20px; --radius-full: 9999px;

  --shadow-sm: 0 1px 2px rgba(15, 17, 21, 0.04);
  --shadow-md: 0 4px 16px rgba(15, 17, 21, 0.06);
  --shadow-lg: 0 24px 48px -12px rgba(15, 17, 21, 0.10);

  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out-back: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --duration-fast: 200ms;
  --duration-normal: 350ms;
  --duration-slow: 600ms;
}