/* ============================================================================
   Fiscalir — design tokens.

   PROVENANCE: transcribed verbatim from the Claude Design handoff at
   design_handoff_fiscalir_landing/_ds/izitax-design-system-ba8e8ad5-.../tokens/
   {colors,fonts,typography,spacing}.css — those four files are the authority.
   Do not re-derive these values from context/DESIGN_DECISIONS_1.md: that
   document carries no type scale, no spacing values, and never names --thread,
   --node-active or the two shadows. Reconstructing from it means inventing.

   Names are intentionally UNPREFIXED, against DESIGN_DECISIONS_1.md §11's
   --fsc- lock. §11's sole stated rationale is that Tailwind v4's @theme owns
   bare --color-* / --text-* / --radius-* / --shadow-*. There is no Tailwind and
   no npm in landing/, so the collision cannot occur, and bare names let the
   handoff CSS port byte-for-byte. Prefixing happens when brand/ is extracted
   for web/, which is where Tailwind actually arrives. See ADR-0019.

   THIS FILE IS THE ONLY PLACE A BRAND HEX IS WRITTEN. build.mjs parses it to
   resolve {{token:...}} in partials/head.html and site.webmanifest. Adding a
   colour anywhere else re-opens the drift this centralisation closes.
   ========================================================================= */


/* ---------------------------------------------------------------------------
   Faces — IBM Plex, self-hosted (SIL OFL).
   No Google Fonts CDN: it would send every visitor's IP to a US endpoint on a
   page whose privacy notice is one click away, and German courts have already
   ruled on exactly that pattern.
   One file per weight, latin + latin-ext, no italics — the page uses none.
   ------------------------------------------------------------------------ */

@font-face {
  font-family: 'IBM Plex Serif';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/ibm-plex-serif-400.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Serif';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/assets/fonts/ibm-plex-serif-600.woff2') format('woff2');
}

@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/ibm-plex-sans-400.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/assets/fonts/ibm-plex-sans-500.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/assets/fonts/ibm-plex-sans-600.woff2') format('woff2');
}

@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/ibm-plex-mono-400.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/assets/fonts/ibm-plex-mono-500.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/assets/fonts/ibm-plex-mono-600.woff2') format('woff2');
}


/* ---------------------------------------------------------------------------
   Colour.
   "Greffe-moderne": ink on document paper. Colour never decorates; each hue
   means exactly one thing. NO green anywhere — not even for gains.
   ------------------------------------------------------------------------ */

:root {
  /* ---- Base palette (named to the spec) ---- */
  --paper: #F2F3F4;        /* app background — document desk */
  --surface: #FFFFFF;      /* the sheet / card surface */
  --archival: #FAF7EF;     /* printable justification paper only */

  --ink-900: #0F1319;      /* primary text */
  --ink-700: #232B36;      /* Cerfa box outline */
  --ink-600: #3A4553;      /* secondary text */
  --ink-500: #5A6675;      /* muted text / rule-in-words — 5.85:1 on white, AA ok */
  --hairline: #E9ECEF;     /* dividers, table rules */

  --trace: #2E6196;        /* prussian — the one accent; declared / drilled */
  --thread: #7FA6C6;       /* proof-thread rail line */
  --node-active: #EEF3F8;  /* active node background */

  --flag: #B47316;         /* ochre — ONLY "à vérifier" */
  --flag-bg: #FBF3E2;      /* ochre surface */

  --oxblood: #9E3430;      /* ONLY loss / destructive */

  /* ---- Additions to the handoff, each forced by a locked rule ---- */

  /* --flag #B47316 measures 3.88:1 on white and 3.71:1 on its own --flag-bg,
     so it fails the AA floor DESIGN_DECISIONS_1.md §9 declares non-negotiable.
     It stays legal for non-text (borders, the .tri triangle, the AVerifierCard
     outline) where 3:1 applies. Every ochre TEXT run uses --flag-text instead.
     #8E5A11 measures 5.80:1 on white, 5.54:1 on --flag-bg.
     Derived from §9 — not a departure from the design system. See ADR-0019. */
  --flag-text: #8E5A11;

  /* Brand chrome only — the logo's ink navy. NOT a page colour.
     Permitted outside the document: browser theme-color, PWA theme_color,
     app-icon plate. Never for text, borders, backgrounds or accents — the one
     accent is --trace. The handoff README bars #1B2B4B and #C9A84C from the UI
     as logo-internal; browser chrome is the frame, not the page, which is why
     this usage is legitimate and why it needed writing down.
     The logo's gold #C9A84C is deliberately NOT tokenised: nothing outside the
     mark may use it, and an unused token in a shared file invites misuse. */
  --brand-navy: #1B2B4B;

  /* ---- Semantic aliases ---- */
  --bg-app: var(--paper);
  --surface-card: var(--surface);
  --surface-print: var(--archival);

  --text-primary: var(--ink-900);
  --text-secondary: var(--ink-600);
  --text-muted: var(--ink-500);

  --border-hairline: var(--hairline);
  --border-cerfa: var(--ink-700);

  --accent: var(--trace);
  --accent-thread: var(--thread);
  --accent-node: var(--node-active);

  --state-verify: var(--flag);
  --state-verify-text: var(--flag-text);
  --state-verify-bg: var(--flag-bg);
  --state-negative: var(--oxblood);
}


/* ---------------------------------------------------------------------------
   Typography.
   Three faces, each with a job:
   - IBM Plex Serif  → display / headings (calm, documentary authority)
   - IBM Plex Sans   → body / UI / monetary values
   - IBM Plex Mono   → data, FX rates, quantities, source-document lines
   All monetary values and quantities use tabular lining figures.
   ------------------------------------------------------------------------ */

:root {
  --font-serif: 'IBM Plex Serif', Georgia, 'Times New Roman', serif;
  --font-sans: 'IBM Plex Sans', system-ui, -apple-system, sans-serif;
  --font-mono: 'IBM Plex Mono', 'SF Mono', Menlo, monospace;

  /* Display face default is Serif; swap to Spectral only on explicit request. */
  --font-display: var(--font-serif);

  /* ---- Type scale (px) ---- */
  --text-display: 40px;   /* page / hero heading (serif) */
  --text-h1: 28px;        /* section heading (serif) */
  --text-h2: 21px;        /* subsection (serif) */
  --text-value: 34px;     /* declared EUR value (sans, tabular) */
  --text-value-sm: 22px;  /* secondary value */
  --text-body: 15px;      /* body / UI */
  --text-sm: 13px;        /* secondary UI */
  --text-eyebrow: 12px;   /* mono uppercase eyebrow (box code) */
  --text-data: 13px;      /* mono data lines */
  --text-caption: 11px;   /* stamps, captions */

  --leading-tight: 1.15;
  --leading-body: 1.5;

  --tracking-eyebrow: 0.08em;

  /* Tabular lining figures — apply to any numeric value/quantity. */
  --figures-tabular: "tnum" 1, "lnum" 1;
}

/* Utility: numbers that must align in columns. */
.izi-tabular {
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: var(--figures-tabular);
}


/* ---------------------------------------------------------------------------
   Spacing, radius, elevation.
   Hierarchy comes from rules and space, not shadows.
   ------------------------------------------------------------------------ */

:root {
  /* ---- Spacing (4px base) ---- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;

  /* ---- Radius — small / architectural ---- */
  --radius-box: 2px;       /* declared-value boxes (Cerfa sheets) */
  --radius-control: 5px;   /* controls: buttons, inputs, menus */

  /* ---- Borders ---- */
  --border-width: 1px;
  --border-cerfa-width: 1.5px;

  /* ---- Elevation — the only two shadows that exist ---- */
  --shadow-sheet: 0 1px 2px rgba(15, 19, 25, 0.05);                     /* barely-there sheet lift */
  --shadow-pop: 0 4px 16px rgba(15, 19, 25, 0.14), 0 1px 3px rgba(15, 19, 25, 0.08); /* menus / expanded panels */
}