/* Kavosh design tokens, round 7, direction A "Docket" (2026-10-12).
   style.css uses only these variables. Pick the palette with data-palette="1|2|3" on <html>.
   Kamyar asked for a palette with light sky blue in it (2026-10-12); the grey-green and mint set is retired.
   Every text pairing below is checked for WCAG AA (scratchpad/kavosh-build/contrast.py):
   body text on every field is 5.8:1 or more, CTA label on accent 6.1:1 or more, text on the ink band 8.5:1 or more. */

:root {
  /* Type. Schibsted Grotesk: a sturdy news grotesk, loud at size. IBM Plex Mono: only on dockets, tickets and slips (thermal print). */
  --font-display: "Schibsted Grotesk", system-ui, sans-serif;
  --font-body: "Schibsted Grotesk", system-ui, sans-serif;
  --font-print: "IBM Plex Mono", ui-monospace, monospace;
  --fs-hero: clamp(3rem, 9vw + 0.5rem, 7.5rem);
  --fs-h2: clamp(2rem, 4vw + 0.5rem, 3.5rem);
  --fs-lead: clamp(1.125rem, 0.6vw + 1rem, 1.375rem);
  --fs-body: 1rem; --fs-small: 0.875rem;

  /* Space, 4px base */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px; --s-5: 24px;
  --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px; --s-10: 128px;
  --gutter: 20px;
  --max: 1200px;

  /* Radii and one shadow style */
  --r-1: 4px; --r-2: 8px; --r-3: 14px;
  --shadow: 0 1px 0 rgb(var(--shade) / .06), 0 12px 32px -12px rgb(var(--shade) / .28);

  /* Motion */
  --ease: cubic-bezier(.2,.7,.2,1);
  --t-fast: 160ms; --t-slow: 600ms;

  /* Sizes */
  --tap: 48px;
  --bar-h: 64px;       /* desktop bar */
  --links-h: 56px;     /* phone bar (one slim row, always pinned) */

  /* Shared colours (same in every palette) */
  --white: #FFFFFF;
  --on-ink: #FFFFFF;
  --on-accent: #FFFFFF;
  /* Guarantee red (Kamyar, 2026-10-13: "the 14 day thing in dark red"): only on the guarantee seal and its hero tick.
     9.0:1 on white, 7.4:1 on the sky field. */
  --seal: #8E1B1B;
  /* Founding offer band (2026-10-17, Kamyar: "much more visible", same red family as the seal): white on --seal is 9.0:1,
     --seal-hi (link underline, the stamp ring) is a pale rose that reads on the red; --seal-deep is the hover. */
  --seal-hi: #F4B9B1; --seal-deep: #6E1414; --seal-pale: #F8E7E5;
  /* Before and after: the "before" paper menu, an off-white card with typewriter ink (only in that panel). */
  --pm-paper: #FBF9F4; --pm-line: #DDD6C8; --pm-ink: #3B3A36; --pm-mute: #6E6A60;
  --err: #B3261E; --err-pale: #FCEEEE; --err-text: #8C1D18;
  /* White tick for the form's tick boxes (CSP allows data: images). */
  --tick-img: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 6.4l2.6 2.6L10 3.4' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
/* Logo colours (Kamyar's brand sheet, docs/brand/kavosh-brand-sheet.png): blue mark, navy wordmark;
   on navy the mark is a brighter blue and the wordmark white. Override per place (e.g. the footer, the CTA stub). */
:root {
  --brand-blue: #0B5ED7; --brand-navy: #0F2747; --brand-slate: #94A3B8; --brand-off: #F8FAFC;
  --brand-blue-on-navy: #3D8BFF;  /* 4.5:1 on navy */
  --logo-mark: var(--brand-blue); --logo-ink: var(--brand-navy); --logo-tag: var(--brand-navy);
}

@media (max-width: 340px) { :root { --gutter: 16px; } }
@media (prefers-reduced-motion: reduce) { :root { --t-fast: 0ms; --t-slow: 0ms; } }

/* brand. Kamyar's brand palette (2026-10-12): brand blue #0B5ED7 for the CTA and accents, navy #0F2747 for ink and the
   dark bands, slate #94A3B8 for muted lines and quiet text on navy.
   Round 12 (2026-10-17): Kamyar picked theme No. 5 "Warm white" (scratchpad/kavosh-themes). The light sky field is retired:
   the page is warm white #FBFAF7, the alternating bands, cards and fields are white, hairlines are warm grey #E8E4DC.
   Blue stays only where it means something (buttons, tagline, links, selected states, the logo).
   Contrast (WCAG AA): ink on warm white 14:1, ink-2 on warm white 9.3:1, ink-3 on warm white 5.6:1, white on CTA 5.8:1,
   accent links on warm white 5.5:1, slate on navy 5.8:1, field borders 3.5:1 on white. */
[data-palette="brand"] {
  --bg: #FBFAF7; --band: #FFFFFF; --paper: #FFFFFF;
  --bg-frost: rgb(251 250 247 / .9);   /* the pinned bar once scrolled: the warm page, translucent and blurred */
  --ink: #0F2747; --ink-2: #3A4458; --ink-3: #56667C;
  --line: #E8E4DC; --field-line: #7A8BA3; --placeholder: #5E708A;
  --accent: #0B5ED7; --accent-hover: #0A4FB5; --accent-pale: #E3EEFD;
  --hi: #93C2F6; --hi-on-ink: #8CC0FF;
  --on-ink-2: #94A3B8; --rule-ink: #23406A;
  --focus: #0B5ED7; --ad-link: #0A4FB5; --slot-gap: #050E1C; --shade: 15 39 71;
  --rail: linear-gradient(#CBD6E3, #94A3B8 60%, #7A8BA3);
}

/* 1. Melbourne sky: a light sky field, navy ink, the CTA in deep harbour blue, sky-blue highlighter on the dockets. */
[data-palette="1"] {
  --bg: #D4EAF9; --band: #FFFFFF; --paper: #FFFFFF;
  --ink: #0C1A2B; --ink-2: #22344A; --ink-3: #46596E;
  --line: #C3D6E4; --field-line: #9FB4C6; --placeholder: #5F7186;
  --accent: #0B4E8C; --accent-hover: #083B6B; --accent-pale: #D4EAF9;
  --hi: #7FC4F2; --hi-on-ink: #8FCDF5;
  --on-ink-2: #BFCCD9; --rule-ink: #2C3F55;
  --focus: #0B4E8C; --ad-link: #0B4E8C; --slot-gap: #02070D; --shade: 12 26 43;
  --rail: linear-gradient(#CBDAE6, #93A8BA 60%, #7A8FA1);
}

/* 2. Carbon copy: the dockets are the sky-blue duplicate from a docket book, printed in carbon navy; the CTA is the red "paid" stamp. */
[data-palette="2"] {
  --bg: #EDF5FB; --band: #FFFFFF; --paper: #D2E9F9;
  --ink: #10264A; --ink-2: #22385C; --ink-3: #3F5677;
  --line: #BCD3E6; --field-line: #93A9C2; --placeholder: #56698A;
  --accent: #B5341A; --accent-hover: #8F2913; --accent-pale: #F9DCD4;
  --hi: #F5B3A3; --hi-on-ink: #F5B3A3;
  --on-ink-2: #C2CEDD; --rule-ink: #2B4268;
  --focus: #10264A; --ad-link: #10264A; --slot-gap: #050D1A; --shade: 16 38 74;
  --rail: linear-gradient(#C9D8E6, #91A6BD 60%, #778DA6);
}

/* 3. Sky and highlighter: a clear sky field, near-black print, a black CTA, and the yellow highlighter a manager runs over a docket. */
[data-palette="3"] {
  --bg: #D9EEFC; --band: #FFFFFF; --paper: #FFFFFF;
  --ink: #111315; --ink-2: #2B3036; --ink-3: #4F5761;
  --line: #C9DAE6; --field-line: #A3B0BC; --placeholder: #666E78;
  --accent: #111315; --accent-hover: #2E343B; --accent-pale: #D9EEFC;
  --hi: #FFE14A; --hi-on-ink: #FFE14A;
  --on-ink-2: #C4CAD1; --rule-ink: #30353B;
  --focus: #1F5FAF; --ad-link: #1F4F9C; --slot-gap: #000000; --shade: 17 19 21;
  --rail: linear-gradient(#CFDBE4, #98A6B2 60%, #7D8C99);
}

/* Mockup palettes for the custom web apps ticket: three made-up products, each deliberately unlike the brand and each other. */
:root {
  --mk-bezel: #121212;
  --mk-serif: Georgia, "Times New Roman", serif;
  /* Café site: espresso, butter, warm paper */
  --mk-s-paper: #FBF7F0; --mk-s-bar: #EFE6D8; --mk-s-ink: #2A1A12; --mk-s-mute: #6E5B4C; --mk-s-line: #E3D6C3; --mk-s-butter: #F2C14E;
  /* Trade quote portal: forest green and brass */
  --mk-p-paper: #F2EFE6; --mk-p-card: #FFFFFF; --mk-p-ink: #18231F; --mk-p-mute: #5E6A64; --mk-p-line: #DDD8CA;
  --mk-p-green: #143D33; --mk-p-green-pale: #D9E8E1; --mk-p-brass-pale: #F3E4C0; --mk-p-brass-ink: #6B4E12;
  /* Data dashboard: near-black, teal and amber */
  --mk-d-bg: #0B0F14; --mk-d-panel: #151B23; --mk-d-line: #253040; --mk-d-ink: #E6EDF3; --mk-d-mute: #8B97A6;
  --mk-d-teal: #2DD4BF; --mk-d-teal-dim: #0F3B37; --mk-d-amber: #F5B841;
}