/* ==========================================================================
   FlowCraft Web — tokens.css
   The locked design system. Single source of truth for color, type, space,
   shadow, motion, radii, and breakpoints. Phase 1 baseline (2026-05-11).

   Loading order in HTML:
     1. tokens.css   ← this file (canonical)
     2. styles.css   ← legacy base (Phase 2 will prune duplicates)
     3. styles-v2.css ← editorial overlay (Phase 2 will prune duplicates)

   Brand memo: docs/brand-system.md
   ========================================================================== */

:root {
  /* ─────────────────────────────────────────────────────────────────────
     SURFACE — backgrounds, cards, sections
     ───────────────────────────────────────────────────────────────────── */
  --paper:         #FBFAF6;  /* Page background. Bright ivory. */
  --surface:       #FFFFFF;  /* Cards, mockup canvases. */
  --bone:          #F0F2EB;  /* Sage band — section breaks. */
  --surface-warm:  #F6F7F1;  /* Soft sage wash. */
  --midnight:      #0B1220;  /* Deep dark surfaces, dark hero. */
  --midnight-2:    #131C30;  /* Layered midnight (dark cards). */
  --midnight-3:    #1B2740;  /* Lifted midnight (dark hover). */

  /* ─────────────────────────────────────────────────────────────────────
     INK — text colors
     ───────────────────────────────────────────────────────────────────── */
  --ink:           #0B1220;  /* Headings, the mark. */
  --ink-2:         #3A4358;  /* Body copy. AA-passing on paper. */
  --ink-3:         #6F7388;  /* Meta, captions, labels. */
  --ink-on-dark:   #F4F1E8;  /* Primary text on midnight. */
  --ink-on-dark-2: #B6BAC8;  /* Secondary text on midnight. */

  /* ─────────────────────────────────────────────────────────────────────
     ACCENTS — emerald primary, aurum + sapphire as editorial accents
     Rule: lead with ink + paper + sage. Emerald is for action.
     Gold is for editorial moments only. Sapphire is hairlines / trust.
     ───────────────────────────────────────────────────────────────────── */
  --accent:        #0E7A65;  /* Primary emerald — buttons, links, the inlay. */
  --accent-hover:  #0A5C4D;
  --accent-soft:   rgba(14,122,101,0.10);
  --accent-bright: #14B89B;  /* Brighter emerald for use on midnight. */
  --accent-wash:   #E8EFEA;
  --glow:          #2DE3B5;  /* Electric teal — halos only, never fills. */

  --gold:          #A88652;  /* Aurum — premium editorial accent. */
  --gold-soft:     rgba(168,134,82,0.18);
  --gold-deep:     #6F5530;  /* Aurum text on light bg. */

  --sapphire:      #3D6FE0;  /* Cool accent — hairlines, trust signals only. */
  --sapphire-soft: rgba(61,111,224,0.10);

  --pop:           #B85333;  /* Warm clay — typographic micro-accent. */

  /* ─────────────────────────────────────────────────────────────────────
     HAIRLINES + DIVIDERS
     ───────────────────────────────────────────────────────────────────── */
  --hairline:      #E4E7DE;
  --hairline-soft: rgba(11,18,32,0.08);
  --hairline-dark: rgba(244,241,232,0.10);  /* On midnight surfaces */

  /* ─────────────────────────────────────────────────────────────────────
     TYPOGRAPHY — families
     Display = Bricolage Grotesque (700 for hero, 600 for sections)
     Editorial = Instrument Serif italic (emphasis only — never body)
     Body = Sora (400-500)
     Mono = JetBrains Mono (eyebrows, numerics, technical labels)
     ───────────────────────────────────────────────────────────────────── */
  --font-display:   'Bricolage Grotesque', system-ui, -apple-system, sans-serif;
  --font-editorial: 'Instrument Serif', 'Times New Roman', Georgia, serif;
  --font-body:      'Sora', system-ui, -apple-system, sans-serif;
  --font-mono:      'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* ─────────────────────────────────────────────────────────────────────
     TYPE SCALE — fluid clamp()
     ───────────────────────────────────────────────────────────────────── */
  --type-eyebrow:  clamp(0.68rem, 0.72vw + 0.5rem,  0.78rem);
  --type-body:     clamp(0.95rem, 0.4vw  + 0.86rem, 1.05rem);
  --type-lede:     clamp(1.10rem, 0.6vw  + 0.95rem, 1.25rem);
  --type-h3:       clamp(1.40rem, 1vw    + 1.10rem, 1.85rem);
  --type-h2:       clamp(2.00rem, 2.6vw  + 1.30rem, 3.40rem);
  --type-display:  clamp(2.60rem, 5.5vw  + 1.00rem, 6.40rem);
  --type-mega:     clamp(3.00rem, 8vw    + 1.00rem, 8.50rem);

  /* Line-heights — paired with the scale above */
  --lh-tight:   1.04;   /* Display + Mega */
  --lh-snug:    1.18;   /* H2 + H3 */
  --lh-body:    1.55;   /* Body */
  --lh-loose:   1.70;   /* Long-form */

  /* Letter-spacing — display benefits from slight negative tracking */
  --tracking-display: -0.02em;
  --tracking-h2:      -0.015em;
  --tracking-eyebrow:  0.16em;   /* Mono caps need wide tracking */

  /* ─────────────────────────────────────────────────────────────────────
     SPACING + LAYOUT
     ───────────────────────────────────────────────────────────────────── */
  --pad-x:          clamp(20px, 4vw,   40px);
  --section-y:      clamp(88px, 9.6vw, 156px);
  --section-y-sm:   clamp(64px, 7.5vw, 108px);
  --container:       1240px;
  --container-text:  760px;

  /* Atomic spacing scale (use sparingly — prefer the section/pad tokens) */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  24px;
  --space-6:  32px;
  --space-7:  48px;
  --space-8:  64px;
  --space-9:  88px;

  /* ─────────────────────────────────────────────────────────────────────
     SHADOWS — directional, editorial. Never colorful SaaS halos
     except --shadow-glow on the primary CTA.
     ───────────────────────────────────────────────────────────────────── */
  --shadow-sm:    0 2px 6px rgba(11,18,32,0.04);
  --shadow-md:    0 14px 36px rgba(11,18,32,0.07);
  --shadow-lg:    0 36px 88px rgba(11,18,32,0.10);
  --shadow-glow:  0 0 0 1px rgba(14,122,101,0.16),
                  0 24px 60px rgba(45,227,181,0.18);
  --shadow-gold:  0 0 0 1px rgba(168,134,82,0.20),
                  0 24px 60px rgba(168,134,82,0.20);

  /* ─────────────────────────────────────────────────────────────────────
     RADII
     ───────────────────────────────────────────────────────────────────── */
  --radius-sm:  4px;
  --radius-md:  6px;
  --radius-lg:  10px;
  --radius-xl:  18px;

  /* ─────────────────────────────────────────────────────────────────────
     MOTION
     ───────────────────────────────────────────────────────────────────── */
  --ease-out:   cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in:    cubic-bezier(0.55, 0.06, 0.68, 0.19);
  --ease-soft:  cubic-bezier(0.40, 0, 0.20, 1);

  --duration-press:    120ms;
  --duration-hover:    220ms;
  --duration-page:     320ms;
  --duration-entrance: 600ms;
  --stagger:            80ms;  /* between sibling reveals */

  /* ─────────────────────────────────────────────────────────────────────
     BREAKPOINTS — documentation. CSS uses min-width queries.
     mobile:  < 720px
     tablet:  720 – 1024px
     desktop: 1024 – 1440px
     wide:    1440px+
     ───────────────────────────────────────────────────────────────────── */
}