/* ============================================================
   Hearth Design System — Tokens
   Friendly finance, warm by default.
   Everything downstream is built from this file.
   ============================================================ */

:root {
  /* ---------- Color · core ---------- */
  --color-paper: #faf7f2;        /* page background */
  --color-surface: #ffffff;      /* cards & sheets */
  --color-ink: #1d1b16;          /* text & primary actions */
  --color-ink-muted: #6f6a60;    /* secondary text */

  /* ---------- Color · extended neutrals ---------- */
  --color-ink-subtle: #8a8375;   /* tertiary text, mono metadata */
  --color-ink-hover: #3a362c;    /* pressed/hover state of ink */
  --color-ink-on-dark: #a9a395;  /* body copy on ink surfaces */

  --color-surface-sunken: #f1ece3; /* quiet fills, tracks, skeletons */
  --color-surface-scrim: #efe9de;  /* inline scrim for dialog previews */

  --color-border: #e8e2d8;       /* card & container hairlines */
  --color-border-strong: #e1dacd;/* input outlines, dashed edges */
  --color-border-muted: #d9d2c4; /* unselected control outlines */
  --color-hairline: #f1ece3;     /* row dividers inside a card */

  /* ---------- Color · accent family ----------
     Equal lightness & chroma — hue is the only variable. */
  --color-sky: #3e8fe8;
  --color-meadow: #3fae5c;
  --color-marigold: #e8873c;
  --color-rose: #e06a9b;
  --color-iris: #8a6fe8;
  --color-sun: #e3b33c;

  /* Accent shades used for states and dark surfaces */
  --color-sky-press: #2e7ad0;
  --color-sky-light: #8fbff3;

  /* Text-safe accents — same hues, darkened to ≥ 4.5:1 on paper and
     surface (WCAG AA for small text). Use these whenever an accent is
     applied to TEXT on a light surface (kicker, eyebrow, overline,
     outline badge, links). The base accents stay for fills, dots,
     ticks, dark surfaces and large display use. */
  --color-sky-text: #2262b0;
  --color-meadow-text: #2e7d43;
  --color-marigold-text: #a85710;
  --color-rose-text: #b7457a;
  --color-iris-text: #6a4fcf;
  --color-sun-text: #8a6a12;

  /* ---------- Color · status pairs (bg / fg) ----------
     fg values pass 4.5:1 on their own bg (badge and alert text). */
  --color-success-bg: #e3f3e6;
  --color-success-fg: #256f39;
  --color-warning-bg: #fbeee0;
  --color-warning-fg: #9a4f0f;
  --color-info-bg: #e4f0fd;
  --color-info-fg: #2262b0;
  --color-danger-bg: #fbe7ef;
  --color-danger-fg: #a83d6e;
  --color-neutral-bg: #f1ece3;
  --color-neutral-fg: #6f6a60;

  /* Error/validation colour for form fields (text-safe rose) */
  --color-error: #b7457a;

  /* ---------- Typography ---------- */
  --font-sans: "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system,
    "Segoe UI", Roboto, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --type-display-size: 56px;
  --type-display-weight: 800;
  --type-display-tracking: -0.03em;

  --type-h1-size: 40px;
  --type-h1-weight: 800;
  --type-h1-tracking: -0.025em;

  /* Marketing headline: between h1 and display, so a long German
     compound ("Interessentenanfragen") still fits a hero column */
  --type-hero-size: 46px;

  --type-h2-size: 28px;
  --type-h2-weight: 800;
  --type-h2-tracking: -0.02em;

  --type-h3-size: 20px;
  --type-h3-weight: 700;
  --type-h3-tracking: -0.01em;

  --type-body-size: 16px;
  --type-body-weight: 400;
  --type-body-tracking: 0;

  --type-caption-size: 13px;
  --type-caption-weight: 600;
  --type-caption-tracking: 0.01em;

  --leading-tight: 1.15;
  --leading-snug: 1.2;
  --leading-normal: 1.6;

  /* ---------- Spacing · 4px base ---------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 28px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;

  /* ---------- Radius ---------- */
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-xl: 24px;
  --radius-pill: 999px;

  /* ---------- Elevation ---------- */
  --shadow-flat: none;
  --shadow-raised: 0 2px 8px rgba(29, 27, 22, 0.08);
  --shadow-floating: 0 12px 32px rgba(29, 27, 22, 0.14);
  --shadow-overlay: 0 24px 60px rgba(29, 27, 22, 0.24);

  /* ---------- Motion ---------- */
  --ease: cubic-bezier(0.2, 0.8, 0.3, 1);
  --duration-fast: 120ms;
  --duration-base: 200ms;

  /* ---------- Misc ---------- */
  --scrim: rgba(29, 27, 22, 0.45);
  --pattern-hatch: repeating-linear-gradient(
    45deg,
    #f5f1e9,
    #f5f1e9 10px,
    #efeadf 10px,
    #efeadf 20px
  );
  --focus-ring: 0 0 0 3px rgba(62, 143, 232, 0.35);
  --container: 1080px;
  --portrait-max: 380px; /* cap for a portrait once the hero stacks */

  /* ---------- Print · A4 sheet ---------- */
  --sheet-width: 210mm;
  --sheet-height: 297mm;
  --sheet-pad: 13mm; /* uniform page margin inside the sheet */
}