/* ═══════════════════════════════════════════════════════════════
   FindInvestors · Design Tokens
   Shared by the workspace app (dashboard.css) and any surface that
   needs the app palette. The marketing site keeps its own :root in
   styles.css; this file is the app-side source of truth.
   Accent: cobalt blue — the same hue-250 palette as the marketing
   site (styles.css), so app and landing read as one product.
   ═══════════════════════════════════════════════════════════════ */

:root {
  /* ————— Surfaces & ink (cool, hue 250 — mirrors styles.css) ————— */
  --color-paper:       oklch(98.5% 0.003 250);
  --color-paper-2:     oklch(97% 0.004 250);
  --color-paper-3:     oklch(95% 0.005 250);
  --color-rule:        oklch(90% 0.004 250);
  --color-rule-2:      oklch(86% 0.005 250);
  --color-rule-strong: oklch(85% 0.005 250);
  --color-ink:         oklch(18% 0.01 250);
  --color-ink-2:       oklch(40% 0.012 250);
  --color-ink-soft:    oklch(28% 0.01 250);
  --color-neutral:     oklch(55% 0.008 250);
  --color-muted:       oklch(45% 0.008 250);

  /* ————— Accent (cobalt — identical to the landing page) ————— */
  --color-accent:       oklch(55% 0.2 250);
  --color-accent-2:     oklch(48% 0.21 250);
  --color-accent-hover: oklch(50% 0.22 250);
  --color-accent-dim:   oklch(55% 0.2 250 / 0.10);
  --color-accent-ink:   oklch(99% 0.005 250);
  --color-focus:        oklch(60% 0.18 250);

  /* ————— Status ————— */
  --color-positive: oklch(55% 0.15 160);
  --color-warning:  oklch(66% 0.15 75);
  --color-negative: oklch(52% 0.19 25);
  --color-info:     oklch(55% 0.2 250);

  /* ————— Type ————— */
  --font-display: "Space Grotesk", system-ui, sans-serif;
  --font-body:    "Inter", system-ui, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, SFMono-Regular, monospace;

  --step-small: 0.8125rem;
  --step-body:  0.9375rem;
  --step-lead:  1.0625rem;
  --step-h3:    1.125rem;
  --step-h2:    1.375rem;
  --step-h1:    1.75rem;

  --leading-body:  1.55;
  --leading-tight: 1.25;

  --weight-regular: 400;
  --weight-medium:  500;
  --weight-semi:    600;
  --weight-bold:    700;

  --tracking-label: 0.08em;
  --tracking-snug:  -0.011em;

  /* ————— Space (4pt scale) ————— */
  --space-3xs: 0.125rem;
  --space-2xs: 0.25rem;
  --space-xs:  0.5rem;
  --space-sm:  0.75rem;
  --space-md:  1rem;
  --space-lg:  1.5rem;
  --space-xl:  2.5rem;
  --space-2xl: 4rem;
  --space-3xl: 6rem;
  --space-4xl: 9rem;

  /* ————— Structure ————— */
  --rule: 1px;
  --radius-sm:   4px;
  --radius-md:   6px;
  --radius-lg:   8px;
  --radius-btn:  6px;
  --radius-card: 10px;

  /* ————— Motion ————— */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:     cubic-bezier(0.7, 0, 0.84, 0);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-micro: 120ms;
  --dur-short: 220ms;
  --dur-long:  420ms;
  --t-quiet: var(--dur-short) var(--ease-out);

  /* ————— Layers ————— */
  --z-base:     1;
  --z-raised:   10;
  --z-dropdown: 100;
  --z-sticky:   200;
  --z-modal:    400;
  --z-toast:    500;
  --z-tooltip:  600;

  /* ————— Layout ————— */
  --page-max: 72rem;
  --page-gutter: clamp(1rem, 4vw, 2rem);
  --sidebar-w: 232px;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-micro: 0ms;
    --dur-short: 0ms;
    --dur-long:  0ms;
  }
}