/* Hallmark · tokens — Punchlister (modern-minimal)
 * theme: custom · vibe: "Apple-slick, greyscale, one brand violet"
 * paper: oklch(99.4% 0.002 286) · ink: oklch(21.8% 0.005 286) · accent: oklch(54% 0.2 284) (brand violet)
 * display + body: Geist · outlier: Geist Mono (document metadata only)
 * axes: light / geometric-sans / cool
 * Every colour and font on the homepage references a token below. Add new values here first.
 */

/* ---------- Fonts (self-hosted, SIL Open Font License) ---------- */
@font-face {
  font-family: "Geist";
  src: url("assets/fonts/Geist-latin.woff2") format("woff2");
  font-weight: 100 900; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Geist";
  src: url("assets/fonts/Geist-latin-ext.woff2") format("woff2");
  font-weight: 100 900; font-style: normal; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Geist Mono";
  src: url("assets/fonts/GeistMono-latin.woff2") format("woff2");
  font-weight: 400 600; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Geist Mono";
  src: url("assets/fonts/GeistMono-latin-ext.woff2") format("woff2");
  font-weight: 400 600; font-style: normal; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Geist Fallback";
  src: local("Helvetica Neue"), local("Arial");
  size-adjust: 100%; ascent-override: 92%; descent-override: 22%; line-gap-override: 0%;
}

:root {
  /* ---------- Colour · light surfaces ---------- */
  --color-paper:    oklch(99.4% 0.002 286);   /* page */
  --color-paper-2:  oklch(96.9% 0.003 286);   /* grey bands + stages (≈ #f5f5f7) */
  --color-card:     oklch(100% 0 0);          /* product cards sitting on grey */
  --color-rule:     oklch(89.5% 0.004 286);
  --color-rule-2:   oklch(93.5% 0.003 286);
  --color-ink:      oklch(21.8% 0.005 286);   /* ≈ #1d1d1f */
  --color-ink-2:    oklch(50.5% 0.008 286);   /* secondary text, ≈ #6e6e73 */

  /* ---------- Colour · the dark act ---------- */
  --color-night:    oklch(14.5% 0.004 286);
  --color-night-2:  oklch(21% 0.005 286);
  --color-night-rule: oklch(30% 0.006 286);
  --color-night-ink:  oklch(96.5% 0.003 286);
  --color-night-ink-2: oklch(72% 0.008 286);

  /* ---------- Colour · accent (brand violet) ---------- */
  --color-accent:        oklch(54% 0.2 284);
  --color-accent-hover:  oklch(48% 0.2 284);
  --color-accent-ink:    oklch(99.4% 0.002 286);  /* text on accent */
  --color-accent-night:  oklch(74% 0.13 284);     /* accent on the dark act */
  --color-focus:         oklch(54% 0.2 284);
  --color-focus-night:   oklch(80% 0.11 284);

  /* ---------- Colour · document tags (one meaning each) ---------- */
  --color-tag-meerwerk:     oklch(94.5% 0.04 327);
  --color-tag-meerwerk-ink: oklch(44% 0.15 327);
  --color-tag-taak:         oklch(95% 0.04 181);
  --color-tag-taak-ink:     oklch(41% 0.08 181);
  --color-tag-bevestig:     oklch(94.5% 0.035 284);
  --color-tag-bevestig-ink: oklch(45% 0.17 284);
  --color-ghost-night:      oklch(80% 0.08 327);  /* "before" mark on the day ruler */

  /* ---------- Colour · forms (demo request) ---------- */
  --color-ink-3:       oklch(54% 0.007 286);        /* placeholders · 4.6:1 on paper-2 */
  --color-error:       oklch(52% 0.19 27);          /* 6.1:1 on white */
  --color-error-bg:    oklch(96.5% 0.02 27);        /* error text on it: 5.4:1 */

  /* ---------- Colour · hero stage (two pale tints from the logo, kept low-chroma) ---------- */
  --color-stage-a: oklch(95.6% 0.024 290);   /* lavender light */
  --color-stage-b: oklch(96.8% 0.024 178);   /* mint light */
  --color-glow-a:  oklch(86% 0.075 286);     /* soft violet light behind the headline */
  --color-glow-b:  oklch(91% 0.065 178);     /* soft mint light, lower right */
  --radius-frame:  2.25rem;                  /* the hero frame, one step up from tiles */

  /* ---------- Colour · logo (brand fills, logo only) ---------- */
  --color-logo-lav:  oklch(67.6% 0.152 283);   /* #8b88f1 */
  --color-logo-pink: oklch(84.9% 0.144 327);   /* #ffabff */
  --color-logo-mint: oklch(93.1% 0.073 181);   /* #b2f9eb */
  --color-logo-navy: oklch(25.8% 0.146 290);   /* #280063 */

  /* ---------- Colour · app mockups (the app's own palette, product bento only) ---------- */
  --ui-shell:      oklch(98.8% 0.001 286);   /* app page background */
  --ui-line:       oklch(91.5% 0.015 294);   /* field borders */
  --ui-line-soft:  oklch(0% 0 0 / 0.08);
  --ui-line-row:   oklch(95.5% 0.008 294);   /* dividers between list rows */
  --ui-fill-soft:  oklch(0% 0 0 / 0.04);     /* segmented control track */
  --ui-ink:        oklch(17.9% 0.111 277);   /* app headings + values */
  --ui-text:       oklch(21% 0.032 265);
  --ui-text-2:     oklch(44.6% 0.026 257);
  --ui-text-3:     oklch(71.4% 0.019 261);   /* labels, placeholders, hints */
  --ui-violet:      oklch(61.4% 0.215 282);  /* the app's primary */
  --ui-violet-tint: oklch(61.4% 0.215 282 / 0.06);
  --ui-violet-line: oklch(61.4% 0.215 282 / 0.3);
  --ui-violet-glow: oklch(61.4% 0.215 282 / 0.35);
  --ui-on-violet:   oklch(100% 0 0 / 0.85);
  --ui-on-violet-fill: oklch(100% 0 0 / 0.15);
  --ui-mw-tint:    oklch(93.5% 0.03 239);    /* extra work (meerwerk) category */
  --ui-mw-line:    oklch(85.9% 0.067 238);
  --ui-mw-ink:     oklch(49.7% 0.122 246);
  --ui-mw-title:   oklch(25% 0.141 288);
  --ui-ok:         oklch(52.7% 0.137 150);   /* approved */
  --ui-ok-tint:    oklch(52.7% 0.137 150 / 0.1);
  --ui-wa-wall:    oklch(93.9% 0.012 80);    /* WhatsApp wallpaper + bubble */
  --ui-wa-bubble:  oklch(94.6% 0.072 132);
  --ui-amber:      oklch(66.6% 0.157 58);    /* "can't wait" */
  --ui-amber-tint: oklch(96.2% 0.058 96);
  --ui-amber-ink:  oklch(47.3% 0.125 46);
  --ui-party-tint: oklch(94.3% 0.028 295);
  --ui-party-ink:  oklch(43.2% 0.211 293);
  --ui-shadow-card: 0 1px 2px oklch(25.8% 0.146 290 / 0.04), 0 8px 24px oklch(25.8% 0.146 290 / 0.06);

  /* ---------- Shadows + glass ---------- */
  --color-shadow:     oklch(20% 0.01 286 / 0.10);
  --color-shadow-2:   oklch(20% 0.01 286 / 0.22);
  --color-shadow-night: oklch(0% 0 0 / 0.55);
  --color-glass:       oklch(99.4% 0.002 286 / 0.78);
  --color-glass-night: oklch(14.5% 0.004 286 / 0.72);

  /* ---------- Liquid glass (nav capsule, sectors panel, phone sheet) ---------- */
  --color-glass-fill:        oklch(99.4% 0.002 286 / 0.56);   /* capsule: the page reads through it */
  --color-glass-fill-strong: oklch(99.4% 0.002 286 / 0.86);   /* panel + sheet: text sits on it */
  --color-glass-rim:         oklch(100% 0 0 / 0.95);          /* light catching the top edge */
  --color-glass-rim-soft:    oklch(100% 0 0 / 0.3);
  --color-glass-edge:        oklch(21.8% 0.005 286 / 0.09);   /* keeps the capsule visible on white */
  --color-glass-hover:       oklch(21.8% 0.005 286 / 0.06);   /* link highlight inside glass */
  --color-glass-night-fill:  oklch(24% 0.006 286 / 0.6);
  --color-glass-night-rim:   oklch(100% 0 0 / 0.18);
  --color-glass-night-hover: oklch(100% 0 0 / 0.1);
  --color-ink-hover:         oklch(34% 0.006 286);            /* near-black button, hovered */
  --color-scrim:             oklch(20% 0.01 286 / 0.16);      /* dims the page behind the open phone menu */
  --blur-glass:        18px;
  --blur-glass-strong: 34px;

  /* ---------- Type ---------- */
  --font-sans: "Geist", "Geist Fallback", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: "Geist Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  /* Seven sizes */
  --text-xs:      0.875rem;                                 /* nav, labels, captions, document metadata */
  --text-base:    1.0625rem;                                /* body (17px) */
  --text-md:      clamp(1.1875rem, 0.5vw + 1.05rem, 1.375rem); /* intro text, card titles */
  --text-lg:      clamp(1.5rem, 1vw + 1.2rem, 1.875rem);    /* form questions */
  --text-xl:      clamp(2.125rem, 3vw + 1rem, 3.5rem);      /* section headlines */
  --text-display-s: clamp(2.5rem, 3.4vw + 1rem, 4rem);      /* sector-page heroes (headlines over 50 characters) */
  --text-display: clamp(2.75rem, 4.4vw + 1rem, 4.75rem);    /* hero, stage times, stats */

  --track-display: -0.035em;
  --track-head:    -0.028em;
  --track-body:    -0.01em;

  /* ---------- Space (4 pt) ---------- */
  --space-3xs: 0.125rem;
  --space-2xs: 0.25rem;
  --space-xs:  0.5rem;
  --space-sm:  0.75rem;
  --space-md:  1rem;
  --space-lg:  1.5rem;
  --space-xl:  2.5rem;
  --space-2xl: 4rem;
  --space-3xl: 6rem;
  --space-4xl: 9rem;

  --page-max:    75rem;
  --page-gutter: clamp(1rem, 4vw, 2.5rem);
  --nav-height:  4rem;   /* the zone the floating capsule sits in: 48px glass + 8px air above and below */

  /* ---------- Corners ---------- */
  --radius-stage: 1.75rem;   /* big rounded tiles */
  --radius-card:  1.25rem;   /* product cards */
  --radius-tag:   0.5rem;
  --radius-input: 0.75rem;   /* form fields + inline alerts */
  --radius-pill:  999px;
  --rule-hair: 1px;

  /* ---------- Motion ---------- */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:     cubic-bezier(0.7, 0, 0.84, 0);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-micro: 120ms;
  --dur-short: 220ms;
  --dur-long:  420ms;
  --dur-reveal: 900ms;   /* blur-to-sharp entrance (words only) */
  --blur-reveal: 10px;

  /* ---------- Layers ---------- */
  --z-base:     1;
  --z-raised:   10;
  --z-dropdown: 100;
  --z-sticky:   200;
  --z-sticky-nav: 300;
  --z-modal:    400;
}