/*
 * femfas.net v2 — Design Tokens
 * Single raw-value boundary. Do not hardcode colors or fonts outside this file.
 * Sibling to quantapix.com; shares palette but is more austere, document-forward.
 * Generated: 2026-04-24
 */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Inter:wght@400;500;600&family=JetBrains+Mono:ital,wght@0,400;0,500;1,400;1,500&display=swap');

/* ─── Canvas ──────────────────────────────────────────────────────────────── */
:root {
  --color-bg-base:      #08090d;
  --color-bg-raised:    #0f1117;
  --color-bg-card:      #13161e;
  --color-bg-hover:     #191d28;
  --color-bg-border:    #1e2333;

  /* ─── Foreground ─────────────────────────────────────────────────────────── */
  --color-fg-base:      #e8edf5;
  --color-fg2:          #9aa3b8;
  --color-fg3:          #5c6480;
  --color-fg-inverse:   #08090d;

  /* ─── Teal — primary / evidence accent ───────────────────────────────────── */
  --color-teal:         #00c9a7;
  --color-teal-dim:     oklch(55% 0.12 175);
  --color-teal-muted:   oklch(30% 0.07 175);
  --color-teal-glow:    oklch(70% 0.18 175 / 0.15);

  /* ─── Amber — authority / overline accent ────────────────────────────────── */
  --color-amber:        #f5a623;
  --color-amber-dim:    oklch(65% 0.14 65);
  --color-amber-muted:  oklch(32% 0.08 65);

  /* ─── Status ──────────────────────────────────────────────────────────────── */
  --color-pending:      var(--color-amber);
  --color-active:       var(--color-teal);
  --color-closed:       var(--color-fg3);

  /* ─── Typography ──────────────────────────────────────────────────────────── */
  --font-display:       'Space Grotesk', 'Helvetica Neue', sans-serif;
  --font-body:          'Inter', 'Helvetica Neue', sans-serif;
  --font-mono:          'JetBrains Mono', 'Menlo', monospace;

  /* ─── Type scale (fluid, clamp-based) ────────────────────────────────────── */
  --text-xs:            0.75rem;    /* 12px */
  --text-sm:            0.875rem;   /* 14px */
  --text-base:          1rem;       /* 16px */
  --text-md:            1.125rem;   /* 18px */
  --text-lg:            1.375rem;   /* 22px */
  --text-xl:            1.75rem;    /* 28px */
  --text-2xl:           2.25rem;    /* 36px */
  --text-3xl:           clamp(2.5rem, 5vw, 3.75rem);
  --text-4xl:           clamp(3rem, 7vw, 5.5rem);

  /* ─── Spacing ─────────────────────────────────────────────────────────────── */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-24: 6rem;

  /* ─── Layout ──────────────────────────────────────────────────────────────── */
  --max-width:          1200px;
  --content-width:      720px;
  --gutter:             clamp(1.25rem, 4vw, 3rem);

  /* ─── Borders & radius ────────────────────────────────────────────────────── */
  --radius-sm:   3px;
  --radius-md:   6px;
  --radius-lg:   10px;
  --border-card: 1px solid var(--color-bg-border);
  --border-teal: 2px solid var(--color-teal);
  --border-amber:2px solid var(--color-amber);

  /* ─── Motion ──────────────────────────────────────────────────────────────── */
  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast:    150ms;
  --dur-mid:     280ms;
  --dur-slow:    500ms;
}