/* ==========================================================================
   NieZamulaj design tokens
   Version 0.3 · 19 October 2026 · source: brand book 0.4 and colour palette 0.1
   Target path: site/assets/css/tokens.css

   Fonts: Nunito and Gelasio are stored in site/assets/fonts/ and loaded by
   fonts.css, so the site never calls Google. Both are under the SIL Open Font
   Licence (the licence files sit next to them).
   Headlines use Georgia, a Microsoft system font already installed on most
   computers and iPhones; it cannot be self-hosted without a licence. Gelasio
   (free, drawn to Georgia's proportions) shows where Georgia is missing.
   ========================================================================== */

:root {
  /* ---------- Core colours (decided) ---------- */
  --nz-cream: #F4EFE6;        /* screen page; print uses white */
  --nz-terracotta: #AF442D;   /* italic word, final reward, field before a reward, buttons */
  --nz-peach: #EDB397;        /* step rewards, soft surfaces; ink text only */
  --nz-lilac: #D5CBE5;        /* small accent, sunrise hill; ink text only */
  --nz-ink: #292923;          /* all text, numbers, icons */
  --nz-frame: #81756B;        /* sticker field borders only, never text */
  --nz-white: #FFFFFF;        /* print paper */
  --nz-cream-on-dark: #FFF9F0;/* text on terracotta and other deep colours */

  /* ---------- Core tones (proposed) ---------- */
  --nz-terracotta-dark: #883421;  /* pressed or hover buttons, small terracotta text */
  --nz-terracotta-light: #FBE2D9; /* soft highlight, selected rows */
  --nz-cream-deep: #E5DBCD;       /* second surface, quiet panels */
  --nz-rule: #D6CCBF;             /* hairline rules on cream */
  --nz-rule-print: #CFC5B8;       /* hairline rules on white paper */

  /* ---------- Complementary colours (proposed, not on boards yet) ----------
     Use one family per page or screen, next to the core colours.
     Deep colours take cream text; light colours take ink text. */
  --nz-teal: #386972;       /* opposite terracotta on the colour wheel */
  --nz-mist: #CBDFE2;       /* light partner to teal */
  --nz-sage: #748769;       /* fills and illustration; ink text only at 18pt / 24px and up */
  --nz-pistachio: #D4E2C7;  /* light partner to sage */
  --nz-ochre: #C49548;      /* warm honey; ink text */
  --nz-butter: #F5DFAC;     /* light partner to ochre */
  --nz-plum: #6C4971;       /* deep partner to lilac */

  /* ---------- Semantic aliases: use these in components ---------- */
  --nz-color-page: var(--nz-cream);
  --nz-color-paper: var(--nz-white);
  --nz-color-surface: var(--nz-white);
  --nz-color-surface-quiet: var(--nz-cream-deep);
  --nz-color-text: var(--nz-ink);
  --nz-color-accent: var(--nz-terracotta);
  --nz-color-accent-pressed: var(--nz-terracotta-dark);
  --nz-color-on-accent: var(--nz-cream-on-dark);
  --nz-color-rule: var(--nz-rule);
  --nz-color-field-frame: var(--nz-frame);
  --nz-color-field-milestone: var(--nz-terracotta);
  --nz-color-reward-step-bg: var(--nz-peach);
  --nz-color-reward-step-text: var(--nz-ink);
  --nz-color-reward-final-bg: var(--nz-terracotta);
  --nz-color-reward-final-text: var(--nz-cream-on-dark);
  --nz-color-reward-final-border: transparent;
  --nz-color-sun: var(--nz-peach);
  --nz-color-hill: var(--nz-lilac);
  /* Logo: use the SVG files in site/assets/brand/, never retype the name in a font.
     niezamulaj-logo.svg (colour), niezamulaj-logo-mono.svg (one colour; black when
     shown with <img>, so it is the B&W print logo), -icon.svg / -icon-mono.svg
     (the mark alone). Clear space = one mark piece on every side. */
  --nz-logo-ratio: 4.5;            /* 216 × 48 */
  --nz-logo-width-web: 176px;      /* header; footer 160px */
  --nz-logo-min-width: 128px;
  --nz-icon-min-size: 24px;
  --nz-color-focus: var(--nz-ink);

  /* ---------- Typefaces ---------- */
  /* Print PDFs list Gelasio first so it is embedded: 'Gelasio', Georgia, serif. */
  --nz-font-display: Georgia, "Gelasio", "Times New Roman", serif; /* regular + italic */
  --nz-font-text: "Nunito", "Segoe UI", system-ui, -apple-system, sans-serif;
  --nz-weight-regular: 400;
  --nz-weight-medium: 500;
  --nz-weight-semibold: 600;
  --nz-weight-bold: 700;
  --nz-weight-display: 400;   /* Georgia regular; never synthesise 600 */
  --nz-weight-label: 800;

  /* ---------- Web type scale (16px base) ---------- */
  --nz-text-display: clamp(3rem, 6vw, 5.375rem); /* hero headline, 48–86px */
  --nz-leading-display: 1.05;
  --nz-text-h1: 4.5rem;        /* 72px */
  --nz-text-h2: clamp(2.125rem, 4vw, 3rem); /* 34–48px section headline */
  --nz-leading-heading: 1.1;
  --nz-text-h3: 1.3125rem;     /* 21px, Nunito 700 or Georgia */
  --nz-text-h3-large: 1.75rem; /* 28px, bigger h3 on the home page and in the phone menu */
  --nz-text-lead: 1.125rem;    /* 18px, same as body: fewer sizes on the page */
  --nz-text-body: 1.125rem;    /* 18px */
  --nz-leading-body: 1.6;
  --nz-text-small: 0.9375rem;  /* 15px */
  --nz-text-caption: 0.8125rem;/* 13px */
  --nz-text-label: 0.8125rem;  /* 13px caps; nothing meant to be read goes below 13px */
  --nz-tracking-label: 0.16em;
  --nz-text-button: 1rem;      /* 16px, Nunito 700 */

  /* ---------- Print type scale (A4) ---------- */
  --nz-print-headline: 38pt;       /* board title, Georgia, one italic word */
  --nz-print-headline-sheet: 35pt; /* printable titles, Georgia */
  --nz-print-reward-final: 21pt;   /* 21–26pt by board length */
  --nz-print-reward-step: 15pt;
  --nz-print-section: 18pt;
  --nz-print-task: 11pt;           /* Nunito 700 */
  --nz-print-body: 10pt;           /* Nunito 500 */
  --nz-print-label: 8pt;           /* Nunito 800 caps, +18% */
  --nz-print-field-number: 8pt;    /* Nunito 700 */
  --nz-print-logo-width: 38mm;     /* 144px file box, about 34 mm of artwork; top left on every A4 sheet */

  /* ---------- Spacing (web, 4px base) ---------- */
  --nz-space-1: 0.25rem;  /* 4 */
  --nz-space-2: 0.5rem;   /* 8 */
  --nz-space-3: 0.75rem;  /* 12 */
  --nz-space-4: 1rem;     /* 16 */
  --nz-space-5: 1.5rem;   /* 24 */
  --nz-space-6: 2rem;     /* 32 */
  --nz-space-7: 3rem;     /* 48 */
  --nz-space-8: 4rem;     /* 64 */
  --nz-space-9: 5rem;     /* 80 */
  --nz-space-10: 6rem;    /* 96 */
  --nz-container: 75rem;  /* 1200px */
  --nz-gutter: 1.5rem;    /* page side padding */

  /* ---------- Radii ---------- */
  --nz-radius-field: 2.5mm;
  --nz-radius-band: 2.5mm;
  --nz-radius-swatch: 10px;
  --nz-radius-card: 12px;
  --nz-radius-pill: 999px;

  /* ---------- Controls ---------- */
  --nz-target-min: 44px;  /* minimum touch target */
  --nz-button-height: 52px;
  --nz-button-padding-x: 28px;
  --nz-focus-ring: 2px solid var(--nz-color-focus);
  --nz-focus-offset: 3px;
  --nz-button-height-small: 48px;
  --nz-input-height: 52px;
  --nz-input-radius: 12px;
  --nz-input-border: 1.5px solid var(--nz-frame);
  --nz-input-border-focus: 2px solid var(--nz-ink);
  --nz-input-halo-focus: 3px solid var(--nz-terracotta-light);
  --nz-input-border-error: 2px solid var(--nz-terracotta);
  --nz-checkbox-size: 22px;          /* native checkbox, accent-color: var(--nz-terracotta) */
  --nz-sticker-radius: 14px;         /* floating label stickers on screen */
  --nz-sticker-tilt: 10deg;          /* 8–12deg, alternate direction */
  --nz-shadow-sticker: 0 16px 30px -14px rgba(41, 41, 35, 0.45);
  --nz-shadow-paper: 0 2px 4px rgba(41, 41, 35, 0.08), 0 30px 60px -24px rgba(41, 41, 35, 0.35);
  --nz-shadow-primary: 0 10px 24px -12px rgba(175, 68, 45, 0.7);

  /* ---------- Print layout (A4 boards and printables) ---------- */
  --nz-page-width: 210mm;
  --nz-page-height: 297mm;
  --nz-page-margin-x: 14mm;
  --nz-page-margin-y: 12mm;
  --nz-header-height: 46.5mm;
  --nz-picture-size: 44mm;             /* fixed, never drawn; picture bottom-aligned */
  --nz-field-width: 34mm;
  --nz-field-height-30: 24mm;          /* 30-field board, printables */
  --nz-field-height-20: 30mm;          /* 20-field boards */
  --nz-field-gap: 3mm;
  --nz-field-border: 0.4mm;
  --nz-field-border-milestone: 0.55mm;
  --nz-field-number-inset: 2mm;        /* number sits in a gap in the top frame line */
  --nz-band-height-step: 12mm;         /* 12–15mm by board length */
  --nz-band-height-final: 18mm;        /* 18–26mm by board length */
  --nz-band-border-final: 0;

  /* ---------- Added with the website mockups (19 October 2026) ---------- */
  --nz-color-placeholder: #6E645B;      /* placeholder text in inputs; frame grey is too light for text */
  --nz-text-step-number: 2.75rem;       /* peach italic step numbers in forms (laptop) */
  --nz-text-step-number-phone: 2rem;    /* same, phone */
  --nz-text-column: 45rem;              /* reading width on text pages */
  --nz-gutter-phone: 16px;              /* side gutter on phones */
  --nz-picker-tile: 72px;               /* picture picker tile height */
  --nz-picker-box: 340px;               /* picture picker height: about four rows, then it scrolls */
  --nz-preview-width: 560px;            /* live A4 preview in the board builder */
  --nz-sheet-width-laptop: 677px;       /* A4 on the preview-and-print screen (scale 0.806) */
  --nz-print-reward-step-min: 13px;     /* smallest size a step reward may shrink to */
  --nz-band-height-final-two-lines: 24mm; /* final band when the reward needs two lines */
  --nz-sunrise-ratio: 2.5;              /* sunrise width = band height x 2.5 */
  --nz-stage-scale: 0.5;                /* tilted boards on the home page (screen only) */
  --nz-stage-drift: 16s;                /* one slow loop of the moving circles behind the home board */
  --nz-stage-planet: 18px;              /* bigger planet travelling on a home-page ring */
  --nz-stage-planet-small: 10px;        /* smaller planet on the other side of the ring */
  --nz-topbar-height: 85px;            /* the pinned top bar on a laptop; pinned panels sit below it */
  --nz-stage-follow: 28px;              /* how far the home-page sun moves towards the mouse */
  --nz-carousel-picture: 180px;         /* picture size in the home-page carousel (laptop) */
  --nz-carousel-picture-phone: 112px;   /* same, phone */
  --nz-carousel-loop: 60s;              /* time for the carousel to show every picture once */
  --nz-thumb-scale: 0.075;              /* tiny live board in the phone builder's bottom bar */
  --nz-shadow-label: 0 0.5mm 1.5mm rgba(41, 41, 35, 0.3);  /* a printer label stuck on a sample board */
  --nz-shadow-menu: 0 24px 32px -24px rgba(41, 41, 35, 0.35); /* the open phone menu */
  --nz-shadow-bar: 0 -10px 24px -18px rgba(41, 41, 35, 0.4); /* the phone builder's bottom bar */
  --nz-shadow-thumb: 0 1px 2px rgba(41, 41, 35, 0.15), 0 6px 12px -6px rgba(41, 41, 35, 0.35);
  --nz-shadow-on-dark: 0 24px 48px -20px rgba(0, 0, 0, 0.7); /* paper on the dark printables band */
  --nz-color-drop: var(--nz-terracotta-light); /* drop target while dragging in the list editor */
  --nz-slot-height: 56px;               /* rows in the list editor (suggestions and list spaces) */
  --nz-sheet-width-list: 357px;         /* A4 next to the list editor (scale 0.45) */
  --nz-band-height-group: 9mm;          /* peach group headings on printables */
  --nz-print-group: 14pt;               /* Georgia group names on printables */
  --nz-print-idea: 10.5pt;              /* idea lines on "Gdy szukasz pomysłu" */
  --nz-write-line: 0.3mm;               /* lines to write on by hand */
  --nz-sticker-field: 22mm;             /* square sticker space on the list (fits a 20 mm sticker) */
  --nz-color-rule-paper: var(--nz-rule-print); /* hairlines and lines to write on, on printed sheets */
  --nz-color-group-bg: var(--nz-peach);        /* group headings on printables */
}

/* --------------------------------------------------------------------------
   Black-and-white print version.
   Put data-print="mono" on the sheet (or <html>) for the B&W PDF.
   -------------------------------------------------------------------------- */
[data-print="mono"] {
  --nz-color-text: #000000;
  --nz-color-accent: #000000;
  --nz-color-on-accent: #FFFFFF;
  --nz-color-rule: #9A9A9A;
  --nz-color-rule-paper: #9A9A9A;
  --nz-color-group-bg: #EFEFEF;
  --nz-color-field-frame: #7A7A7A;
  --nz-color-field-milestone: #000000;
  --nz-color-reward-step-bg: #EFEFEF;
  --nz-color-reward-step-text: #000000;
  --nz-color-reward-final-bg: #E3E3E3;
  --nz-color-reward-final-text: #000000;
  --nz-color-reward-final-border: #000000;
  --nz-band-border-final: 0.8mm;
  --nz-color-sun: #FFFFFF;
  --nz-color-hill: #FFFFFF;
  /* Logo: swap to niezamulaj-logo-mono.svg (black when shown with <img>). */
  /* Pictures: apply filter: grayscale(1) contrast(1.05); nothing behind them. */
}

/* Rules of use, in short:
   - Headlines: Georgia regular, no full stop. On screen one word in --nz-color-accent
     (upright, not italic); printed boards keep the italic word.
   - Terracotta keeps its jobs; complementary colours never replace it.
   - Ink text on cream, white, peach, lilac and all light colours;
     cream text on terracotta, terracotta-dark, teal and plum.
   - No grey text lighter than #767676 in print; strokes at least 1px.
   - Long text: person 32 characters, reward 60, task 40, mission 40 / 90.
     Rewards shrink to fit (never below 13px) and never end in "…".
   - Keep one-letter Polish words (w, z, i, a, o, u) with the next word. */