/* ════════════════════════════════════════════════════════════════
 * FLUTILLIANT — Design tokens (colors + type)
 * Single source of truth. Link this file first in any artifact:
 *   <link rel="stylesheet" href="colors_and_type.css" />
 * Fonts resolve relative to this file (./fonts/…). If you place this
 * CSS in a subfolder, fix the @font-face url() paths accordingly.
 * ════════════════════════════════════════════════════════════════ */

/* ─── Webfont : Wida Round ────────────────────────────────────────
 * Licensed display + UI face. Fallback stack: Nunito, system-ui.
 * Substitute Nunito (Google Fonts) only if the OTFs are unavailable. */
@font-face {
  font-family: "Wida Round";
  src: url("fonts/WidaRound-Light.otf") format("opentype");
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Wida Round";
  src: url("fonts/WidaRound-Regular.otf") format("opentype");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Wida Round";
  src: url("fonts/WidaRound-Italic.otf") format("opentype");
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Wida Round";
  src: url("fonts/WidaRound-Bold.otf") format("opentype");
  font-weight: 700; font-style: normal; font-display: swap;
}

:root {
  /* ─── Color · Ink (warm charcoal scale) ───────────────────────
   * Text, dark surfaces, structure. Ink 1000/700 match the logo. */
  --fl-ink-1000: #0A0A0A;   /* logo "black" — deepest surfaces */
  --fl-ink-900:  #1B1B1B;   /* BASE text color */
  --fl-ink-700:  #434343;   /* logo "grey" — secondary text */
  --fl-ink-500:  #6B6B6B;   /* muted text, mono labels */
  --fl-ink-300:  #A8A8A8;   /* disabled, hairlines on dark */
  --fl-ink-200:  #C9C9C9;   /* borders, dividers */
  --fl-ink-100:  #E4E2DC;   /* card borders on paper */
  --fl-ink-50:   #EEEBE3;   /* faint fills */

  /* ─── Color · Paper (warm off-white) — never pure white ───────
   * Backgrounds, surfaces, cards. */
  --fl-paper:      #F4F1E8;   /* page background */
  --fl-paper-soft: #ECE8DC;
  --fl-paper-deep: #E4DFD0;
  --fl-paper-card: #FAF8F1;   /* raised card surface */

  /* ─── Color · Sun (the signal) ────────────────────────────────
   * Rare, intentional. ≤ 5% of any surface. Marks the one thing
   * to look at: the key KPI, the primary action, the insight. */
  --fl-sun:      #FFE10B;   /* exact logo yellow */
  --fl-sun-deep: #E6C800;   /* hover / press on sun */
  --fl-sun-soft: #FFF1A3;   /* tints, washes */

  /* ─── Color · Semantic (data states only) ─────────────────────
   * Used sparingly for deltas in dashboards. Not decorative. */
  --fl-up:    #1F7A4D;   /* positive delta */
  --fl-up-on-dark:   #9FE2B7;
  --fl-down:  #B23A48;   /* negative delta */
  --fl-alert: #C53030;   /* misuse crosses, hard alerts */

  /* ─── Aliases (semantic roles) ────────────────────────────────*/
  --fl-bg:        var(--fl-paper);
  --fl-surface:   var(--fl-paper-card);
  --fl-text:      var(--fl-ink-900);
  --fl-text-soft: var(--fl-ink-700);
  --fl-text-mute: var(--fl-ink-500);
  --fl-border:    var(--fl-ink-100);
  --fl-divider:   var(--fl-ink-200);
  --fl-accent:    var(--fl-sun);
  --fl-on-accent: var(--fl-ink-900);
  --fl-inverse-bg:   var(--fl-ink-1000);
  --fl-inverse-text: var(--fl-paper);

  /* ─── Type · Families ─────────────────────────────────────────*/
  --fl-font-display: "Wida Round", "Nunito", system-ui, sans-serif;
  --fl-font-mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, monospace;

  /* ─── Type · Weights ──────────────────────────────────────────*/
  --fl-w-light: 300;
  --fl-w-regular: 400;
  --fl-w-bold: 700;

  /* ─── Type · Scale (size / line-height / tracking) ────────────
   * Display & titles are Wida Bold, tight tracking. Body is Wida
   * Regular. Labels are mono, uppercase, +0.08em. */
  --fl-display-size: 96px;  --fl-display-lh: 0.92;  --fl-display-ls: -0.03em;
  --fl-h1-size: 56px;       --fl-h1-lh: 1.0;        --fl-h1-ls: -0.02em;
  --fl-h2-size: 40px;       --fl-h2-lh: 1.05;       --fl-h2-ls: -0.02em;
  --fl-h3-size: 28px;       --fl-h3-lh: 1.15;       --fl-h3-ls: -0.01em;
  --fl-lead-size: 20px;     --fl-lead-lh: 1.5;      --fl-lead-ls: 0;
  --fl-body-size: 16px;     --fl-body-lh: 1.55;     --fl-body-ls: 0;
  --fl-caption-size: 13px;  --fl-caption-lh: 1.4;   --fl-caption-ls: 0;
  --fl-label-size: 11px;    --fl-label-lh: 1.2;     --fl-label-ls: 0.08em;

  /* ─── Spacing · radii (rounded, never sharp on chrome) ────────*/
  --fl-radius-sm: 10px;     /* inputs, small chrome */
  --fl-radius-md: 16px;     /* tiles, dashboard cards */
  --fl-radius-lg: 24px;     /* dashboard shell */
  --fl-radius-pill: 999px;  /* buttons, tags */

  /* ─── Spacing · scale ─────────────────────────────────────────*/
  --fl-space-1: 4px;
  --fl-space-2: 8px;
  --fl-space-3: 16px;
  --fl-space-4: 24px;
  --fl-space-5: 32px;
  --fl-space-6: 48px;
  --fl-space-7: 64px;
  --fl-space-8: 120px;      /* section rhythm */

  /* ─── Borders ─────────────────────────────────────────────────
   * The system uses 1px hairlines for separation. NO drop shadows. */
  --fl-hairline: 1px solid var(--fl-border);
  --fl-focus: 2px solid var(--fl-sun);
}

/* ─── Semantic type helpers (optional convenience classes) ───────
 * Use the vars directly, or these classes for quick scaffolding. */
.fl-display { font-family: var(--fl-font-display); font-weight: var(--fl-w-bold);
  font-size: var(--fl-display-size); line-height: var(--fl-display-lh); letter-spacing: var(--fl-display-ls); }
.fl-h1 { font-family: var(--fl-font-display); font-weight: var(--fl-w-bold);
  font-size: var(--fl-h1-size); line-height: var(--fl-h1-lh); letter-spacing: var(--fl-h1-ls); }
.fl-h2 { font-family: var(--fl-font-display); font-weight: var(--fl-w-bold);
  font-size: var(--fl-h2-size); line-height: var(--fl-h2-lh); letter-spacing: var(--fl-h2-ls); }
.fl-h3 { font-family: var(--fl-font-display); font-weight: var(--fl-w-bold);
  font-size: var(--fl-h3-size); line-height: var(--fl-h3-lh); letter-spacing: var(--fl-h3-ls); }
.fl-lead { font-family: var(--fl-font-display); font-weight: var(--fl-w-regular);
  font-size: var(--fl-lead-size); line-height: var(--fl-lead-lh); color: var(--fl-text-soft); }
.fl-body { font-family: var(--fl-font-display); font-weight: var(--fl-w-regular);
  font-size: var(--fl-body-size); line-height: var(--fl-body-lh); }
.fl-caption { font-family: var(--fl-font-display); font-size: var(--fl-caption-size);
  line-height: var(--fl-caption-lh); color: var(--fl-text-mute); }
.fl-label { font-family: var(--fl-font-mono); font-size: var(--fl-label-size);
  letter-spacing: var(--fl-label-ls); text-transform: uppercase; color: var(--fl-text-mute);
  font-feature-settings: "tnum"; }
.fl-mono { font-family: var(--fl-font-mono); font-feature-settings: "tnum"; }