/* ============================================================
   Vaxa Idea Flow, design tokens
   Source: docs/frontend-build-brief.md, sections 1 (Tokens) and 2 (Type).

   Three provenances, marked below so a later session knows what is
   safe to change and what would desync this file from Figma:

   FIGMA   values transcribed exactly from the build brief. Do not
           round or "clean up" these numbers, several are deliberately
           off-grid (9, 11, 14).
   CONVENTION   the 4px spacing scale. Nothing in the build brief defines
           one; this file invents it because sections 1-2 give no
           reusable spacing tokens, only per-component pixel values.
           Use this scale for anything not called out with an exact
           Figma value.
   ============================================================ */

/* ---------- Fonts ----------
   Outfit: headings (build brief section 2). Google Fonts.
   Geist: body and field text. Geist Mono: every label and metadata role.
   Both are Vercel's fonts, served here via Fontsource on jsDelivr since
   there is no build step to npm-install them. Pinned exactly, matching
   the pinning convention already used for supabase-js in data-layer.js. */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@600;700&display=swap');
@import url('https://cdn.jsdelivr.net/npm/@fontsource/geist@5.3.0/400.css');
@import url('https://cdn.jsdelivr.net/npm/@fontsource/geist@5.3.0/500.css');
@import url('https://cdn.jsdelivr.net/npm/@fontsource/geist@5.3.0/600.css');
@import url('https://cdn.jsdelivr.net/npm/@fontsource/geist-mono@5.3.0/400.css');
@import url('https://cdn.jsdelivr.net/npm/@fontsource/geist-mono@5.3.0/600.css');
@import url('https://cdn.jsdelivr.net/npm/@fontsource/geist-mono@5.3.0/700.css');

:root {

  /* ============================================================
     Colour, group A: local collection "Vaxa colour", single mode.
     FIGMA. Authoritative; these names are the `color/` Figma variable
     names with the prefix dropped.
     ============================================================ */
  --bg-linen: #0f2922;
  --bg-pale-mint: #12251f;
  --bg-surface: #16302a;
  --forest-dark: #0b1f19;
  --mint-subtle: #1e4536;
  --text-primary: #e6f4ec;
  --text-muted: #a8c4b7;
  --brand-primary: #6fd39a;
  --brand-accent: #6fd39a;
  --accent-hover: #8fe3b4;

  /* border-default / border-strong are each one fixed, already-named
     opacity of #a0e1be (16% and 42%), not a base colour used two ways,
     so the opacity is baked in here rather than applied at each usage
     site. Contrast with group C below, where the brief is explicit
     that opacity is NOT baked in. */
  --border-default: rgba(160, 225, 190, 0.16); /* #a0e1be at 16% */
  --border-strong: rgba(160, 225, 190, 0.42); /* #a0e1be at 42% */

  /* ============================================================
     Colour, group B: published library variables.
     FIGMA. Confirmed by Cam at source, in the published design system
     file. Kept exactly as named in the library, including the
     misspelling, so this file stays in sync with the published source.

     IMPORTANT: this library is a LIGHT system. The Vaxa colour tokens
     in group A above are the dark set this app actually runs on. The
     two are separate systems that are not interchangeable, even where
     a value happens to look similar or serves an analogous role, e.g.
     --color-brand-accnet-B and --brand-primary are two systems' idea
     of "brand green" and are different hexes, not one token under two
     names. Never reference a group A token from here, or vice versa,
     spell each one out literally.

     --color-bg-form-field-dark, --color-border-field-default and
     --color-bg-warm are all #f5f2ed, a light colour. They read correctly
     on this dark app only because every usage site applies them at low
     opacity over the dark ground (e.g. the capture bar's expanded
     input, "fill --color-bg-form-field-dark at 10%"), which is a subtle
     lift, not a light box. Do not write these at full opacity.
     ============================================================ */
  --color-text-muted: #6b7f78;
  --color-text-heading-inverse-subtle: #c8f0d8;
  --color-bg-form-field-dark: #f5f2ed;
  --color-border-field-default: #f5f2ed;
  --color-bg-warm: #f5f2ed;
  --color-brand-accnet-B: #57cda8; /* sic: misspelled in the published library, keep as-is. NOT the same green as --brand-primary */
  --color-brand-accent: #2ecc8a; /* green/500 */
  --color-brand-accent-hover: #25a870; /* green/600 */
  --color-text-error: #c70c2c;
  --color-border-error: #c70c2c;
  /* Dark-surface error pair, added to the Master Design Library 2026-09-15
     (primitive ErrorOnDark). #c70c2c above is 2.4:1 on dark and fails
     contrast; #ff6b6b is 5.1:1. Use these on every dark surface. */
  --color-text-error-on-dark: #ff6b6b;
  --color-border-error-on-dark: #ff6b6b;
  --color-bg-primary-hover: #edf5f1; /* button/primary/dark hover fill */

  /* ============================================================
     Colour, group C: raw hex from Idea Details, not yet tokenised.
     FIGMA values, CONVENTION naming (group A's pattern).
     Kept as solid colours on purpose: "Opacity is applied at the usage
     site, not baked into the token" (build brief section 1C). A
     component that uses one of these at a stated opacity (e.g. author
     name at 60%) applies that opacity in its own CSS, not here.
     ============================================================ */
  --text-on-dark: #f5f2ed;
  --mint-pale: #c8f0d8;
  --avatar-bg: #2a6b57;
  --forest-deep: #1b4d3e;
  --scrim: #6b7f78; /* used at 20% at the usage site, e.g. modal surface */
  /* Modal surface and backdrop, CAM'S DECISION 2026-09-17 (not Figma):
     darker and less see-through than Figma's #6b7f78 at 20%, because the
     page behind was distracting. Used by Idea Details and Roadmap confirm. */
  --modal-surface: color-mix(in srgb, var(--bg-surface) 90%, transparent);
  --modal-backdrop: color-mix(in srgb, var(--forest-dark) 75%, transparent);
  --card-description: #c4c4c4; /* floating card description, raw hex in Figma, not yet tokenised */

  /* Library text token used by the floating card (build brief 3B). Same value as
     --color-bg-warm, but a text role; use this name for text. */
  --color-text-warm: #f5f2ed;

  /* ============================================================
     Spacing scale. CONVENTION, not in the build brief. 4px base.
     Use these for anything the brief leaves undesigned or that this
     session designs itself. Where the brief gives an exact value
     (padding 9, gap 11, etc.) use that literal number in the
     component's own CSS instead, even though it falls off this scale.
     ============================================================ */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 32px;
  --space-8: 40px;
  --space-9: 48px;
  --space-10: 56px;
  --space-11: 64px;
  --space-12: 80px;

  /* ============================================================
     Spacing and radius, section 1B. FIGMA: published library
     `20260521_vaxa-labs-design-system`, collection Component, extracted
     2026-09-15. Named exactly as 1B lists them; not the same scale as
     --space-1…12 above (that's this file's own 4px-step CONVENTION),
     kept alongside it per Cam, nothing above renamed or removed.
     --space-3 is already covered: it's in the CONVENTION scale above at
     the same value (12px) 1B also gives it, so it's not repeated here.
     ============================================================ */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 48px;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-pill: 100px;

  /* ============================================================
     Type, section 2. FIGMA for family/size/weight/tracking/case,
     CONVENTION for the token structure (one role = one set of
     properties, since the brief's table is the only source and
     defines no reusable type-scale names of its own).
     ============================================================ */
  --font-outfit: 'Outfit', sans-serif;
  --font-geist: 'Geist', sans-serif;
  --font-geist-mono: 'Geist Mono', monospace;

  /* Modal heading: Outfit Bold 28 */
  --type-modal-heading-family: var(--font-outfit);
  --type-modal-heading-size: 28px;
  --type-modal-heading-weight: 700;

  /* Card title: Outfit SemiBold, two sizes, see brief 3B "Two sizes" */
  --type-card-title-family: var(--font-outfit);
  --type-card-title-size: 20px; /* desktop, Figma Idea/type/cardTitle_dt */
  --type-card-title-size-mobile: 16px; /* Figma Idea/type/cardTitle_Mobile */
  --type-card-title-weight: 600;

  /* Field input: Geist Medium 16, style type/fieldInput, -1% tracking */
  --type-field-input-family: var(--font-geist);
  --type-field-input-size: 16px;
  --type-field-input-weight: 500;
  --type-field-input-tracking: -0.01em;

  /* Body: Geist Regular 16, modal description */
  --type-body-family: var(--font-geist);
  --type-body-size: 16px;
  --type-body-weight: 400;

  /* Body small: Geist Regular 15, details block */
  --type-body-small-family: var(--font-geist);
  --type-body-small-size: 15px;
  --type-body-small-weight: 400;

  /* Comment body: Geist Regular 14 */
  --type-comment-body-family: var(--font-geist);
  --type-comment-body-size: 14px;
  --type-comment-body-weight: 400;

  /* Comment author: Geist Medium 13 */
  --type-comment-author-family: var(--font-geist);
  --type-comment-author-size: 13px;
  --type-comment-author-weight: 500;

  /* Field label: Geist Mono Regular 14, style type/fieldLabel */
  --type-field-label-family: var(--font-geist-mono);
  --type-field-label-size: 14px;
  --type-field-label-weight: 400;

  /* Control label: Geist Mono SemiBold 12, style type/xs, -2% tracking, uppercase */
  --type-control-label-family: var(--font-geist-mono);
  --type-control-label-size: 12px;
  --type-control-label-weight: 600;
  --type-control-label-tracking: -0.02em;
  --type-control-label-transform: uppercase;

  /* Meta: Geist Mono Regular 11, author/date */
  --type-meta-family: var(--font-geist-mono);
  --type-meta-size: 11px;
  --type-meta-weight: 400;

  /* Section label: Geist Mono Bold 11, "Details", "1 note" */
  --type-section-label-family: var(--font-geist-mono);
  --type-section-label-size: 11px;
  --type-section-label-weight: 700;

  /* Priority label: Geist Mono SemiBold 10 */
  --type-priority-label-family: var(--font-geist-mono);
  --type-priority-label-size: 10px;
  --type-priority-label-weight: 600;

  /* Button: Geist SemiBold 14 */
  --type-button-family: var(--font-geist);
  --type-button-size: 14px;
  --type-button-weight: 600;

  /* ============================================================
     Type, section 3D: Idea Listing (2.0). FIGMA, extracted 2026-09-17
     from file DOpr9xrC1IHjShxiuDxVKr, node 238:5511 ("List") and its
     component sets (238:5310 List row, 238:5768 List section divider,
     265:1278 Add idea trigger). Not in the build brief's sections 1-4
     (those predate 2.0); added here now that 2.0 is being built.
     ============================================================ */

  /* Page heading "All ideas": Outfit Bold 36, line-height 39.6 (1.1),
     tracking -0.72px (-2%). Raw hex #f5f2ed in Figma, not a variable;
     per the session's Figma corrections, use --color-text-warm. */
  --type-page-heading-family: var(--font-outfit);
  --type-page-heading-size: 36px;
  --type-page-heading-weight: 700;
  --type-page-heading-tracking: -0.02em;

  /* Count line "N ideas · priority first": Geist Mono Regular, line-
     height 1.5 (ratio, scales with size), tracking 0.96px (8% of the
     original 12px), uppercase. Size raised to 14px, Cam's decision,
     step 7 fixes (was 12px, 257:5786's own literal). */
  --type-count-line-family: var(--font-geist-mono);
  --type-count-line-size: 14px;
  --type-count-line-weight: 400;
  --type-count-line-tracking: 0.08em;

  /* Header nav labels (FLOW / LIST / LOGOUT), Figma variable group
     type/sm: Geist Mono, 14px, tracking -1%, uppercase. Weight differs
     by state in Figma itself: Bold(700) inactive, Black(900) active. */
  --type-nav-label-family: var(--font-geist-mono);
  --type-nav-label-size: 14px;
  --type-nav-label-weight: 700;
  --type-nav-label-weight-active: 900;
  --type-nav-label-tracking: -0.01em;

  /* List row title: Outfit SemiBold, line-height 24px (fixed, not a
     ratio — see css/list.css), no tracking. Colour --text-primary
     (Figma var color/text-primary). Size raised to 18px, Cam's
     decision, step 7 fixes (was 14px/line-height 20px). Row padding is
     unchanged (--space-3 vertical), so the row itself becomes 48px
     tall (12 + 24 + 12). */
  --type-list-row-title-family: var(--font-outfit);
  --type-list-row-title-size: 18px;
  --type-list-row-title-weight: 600;

  /* List row meta (author, date, "See details"): Geist Regular, line-
     height 17px (fixed, unchanged — step 7 fixes only gave a new size,
     not a new line-height). Colour --text-muted (Figma var
     color/text-muted, #a8c4b7 — the group A token, not
     --color-text-muted's #6b7f78, see the group B note above). Size
     raised to 14px, Cam's decision, step 7 fixes (was 12px). */
  --type-list-meta-family: var(--font-geist);
  --type-list-meta-size: 14px;
  --type-list-meta-weight: 400;

  /* Section divider label ("Priority (n)", "Everything else (n)"):
     Geist, weight 600 (unchanged), line-height 1.4 (ratio, scales with
     size), tracking 0.11em (fixed, unchanged). Size raised to 14px,
     Cam's decision, step 7 fixes (was 12px, itself already raised once
     from Figma 238:5768's original 10px). */
  --type-divider-label-family: var(--font-geist);
  --type-divider-label-size: 14px;
  --type-divider-label-weight: 600;
  --type-divider-label-tracking: 0.11em;

  /* Add idea trigger label and "+" glyph: Geist Medium 14 / Geist
     Regular 14. No dedicated role in section 2, both literal to 265:1278. */
  --type-trigger-label-family: var(--font-geist);
  --type-trigger-label-size: 14px;
  --type-trigger-label-weight: 500;

  /* Shared page width for 2.0: header and content column use the same
     width so the nav lines up with the list. CAM'S DECISION 2026-09-17,
     not a Figma value (Figma frame 238:5511 uses a 700px column inside
     a full-width nav); widened to remove the narrow, tall look on wide
     screens and to bring the nav into the content column. */
  --list-page-width: 900px;

  /* ============================================================
     Type, section 4: Idea Details (3.0), revised 2026-09-17 from Figma
     node 181:4221 and the "Idea Details drafts" section (276:1282,
     279:1293, 279:1378). Most roles here reuse tokens section 2 already
     defines (modal heading, body, body small, comment author/body,
     section label, priority label) since Figma's literal values match
     them exactly; only the note date has no existing role.
     ============================================================ */

  /* Note date ("Aug 27" beside a note's author): Geist Mono Regular 10,
     line-height 15 (1.5). No existing token is this size (meta is 11,
     priority label is 10 but SemiBold). */
  --type-note-date-family: var(--font-geist-mono);
  --type-note-date-size: 10px;
  --type-note-date-weight: 400;

  /* ============================================================
     App shell, step 7 fixes, CAM'S DECISION 2026-09-17.
     ============================================================ */

  /* Header width, both views. Matches the Figma List frame (238:5511)
     width; no longer tied to --list-page-width (900px), which the list
     content column keeps on its own. Supersedes the previous
     --list-page-width-derived header width. */
  --app-header-width: 1100px;

  /* Page background, both views: a very subtle radial glow, built only
     from existing tokens (no new colour). Applied fixed so it doesn't
     move with scroll/bounce; never touches the flow stage's own
     layers, card blur, or the popups (--modal-surface/--modal-backdrop
     stay as they are). */
  --app-background: radial-gradient(120% 90% at 50% 35%, var(--bg-linen) 0%, var(--forest-dark) 100%);
}