/* KAPIST — disainitokenid. Suund „Valge ateljee”: puhas valge alus, peaaegu must tekst,
   kivihallid juuksepiirid, üks sügav aktsent „Kuusk” (#2F4F43) ja šampanjakuld ainult detailides.
   Kõik värvid, kirjatüübid, vahed, raadiused ja varjud elavad siin.
   ui.css ja vaated kasutavad AINULT neid muutujaid.
   Kontrastid (WCAG 2.x) on kirjas failis docs/DISAIN.md. */

:root {
  /* ---------- Primitiivid: soe neutraalne skaala ---------- */
  --c-neutral-0: #ffffff;
  --c-neutral-25: #fcfcfb;
  --c-neutral-50: #f9f9f8;
  --c-neutral-100: #f5f5f3;  /* vaikne taust (ribad, sisendi hover) */
  --c-neutral-150: #eeeeeb;
  --c-neutral-200: #e7e6e2;  /* juuksepiir */
  --c-neutral-300: #d5d3ce;  /* tugevam joon */
  --c-neutral-400: #8f8c86;  /* sisendi piir, ≥ 3:1 valgel */
  --c-neutral-500: #8a8780;  /* ainult dekoratiivne */
  --c-neutral-600: #5f5c57;  /* hall tekst */
  --c-neutral-700: #3f3d3a;  /* pehme tekst */
  --c-neutral-800: #292826;
  --c-neutral-900: #161615;  /* põhitekst */

  /* ---------- Primitiivid: aktsent "Kuusk" (sügav igihaljas) ---------- */
  --c-accent-50: #f0f5f2;
  --c-accent-100: #dfe9e3;
  --c-accent-200: #c4d7cc;
  --c-accent-600: #2f4f43;   /* valge tekst 9,1:1 */
  --c-accent-700: #263f36;
  --c-accent-800: #1c3029;

  /* ---------- Vanad primitiivinimed (vaated kasutavad; viidavad uude paletti) ---------- */
  --c-cream-50: var(--c-neutral-25);
  --c-cream-100: var(--c-neutral-50);
  --c-cream-200: var(--c-neutral-100);
  --c-sand-300: var(--c-neutral-200);
  --c-sand-400: var(--c-neutral-300);
  --c-taupe-500: var(--c-neutral-500);
  --c-taupe-600: var(--c-neutral-600);
  --c-ink-800: var(--c-neutral-800);
  --c-ink-900: var(--c-neutral-900);

  /* Pastelsed toonid: staatused ja fotokohatäited (mitte aktsendid) */
  --c-clay-50: #f7efea;
  --c-clay-100: #ecdcd2;
  --c-clay-500: #a8735c;
  --c-clay-600: #8a4b33;
  --c-clay-700: #8a4b33;

  --c-sage-50: var(--c-accent-50);
  --c-sage-100: var(--c-accent-100);
  --c-sage-600: var(--c-accent-600);
  --c-sage-700: var(--c-accent-700);

  --c-green-50: #edf4ef;
  --c-green-200: #cfe0d4;
  --c-green-700: #3e6a4f;

  --c-teal-50: #ebf3f4;
  --c-teal-200: #cfe1e3;
  --c-teal-700: #2e5e66;

  --c-slate-50: #f0f2f4;
  --c-slate-200: #d9dee3;
  --c-slate-700: #4a5560;

  --c-sky-50: #eef2f7;
  --c-sky-100: #d6e0ec;
  --c-sky-700: #3b5878;

  --c-honey-50: #f8f2e3;
  --c-honey-100: #eadbb8;
  --c-honey-700: #7a5a1e;

  --c-plum-50: #f4eff5;
  --c-plum-100: #e3d8e6;
  --c-plum-700: #6a4e73;

  --c-rose-50: #faefed;
  --c-rose-100: #edd0cb;
  --c-rose-700: #9a3b32;

  --c-white: var(--c-neutral-0);

  /* ---------- Semantilised värvid ---------- */
  --color-bg: var(--c-neutral-0);             /* puhas valge leht */
  --color-bg-alt: var(--c-neutral-100);       /* vaikne riba, kasutada säästlikult */
  --color-surface: var(--c-neutral-0);        /* L = 1,000 */
  --color-surface-muted: var(--c-neutral-50);
  --color-topbar: var(--c-neutral-0);         /* ülariba: valge + alumine juuksepiir */
  --color-footer: var(--c-neutral-0);         /* jalus: valge, ülemine juuksepiir */
  --color-border: var(--c-neutral-200);
  --color-border-strong: var(--c-neutral-300);
  --color-border-input: var(--c-neutral-400); /* sisendid: 3,2:1 valgel (WCAG 1.4.11) */
  --color-text: var(--c-neutral-900);         /* 16,5:1 taustal */
  --color-text-soft: var(--c-neutral-700);    /* 10,0:1 valgel */
  --color-text-muted: var(--c-neutral-600);   /* 5,5:1 bg-alt'il */
  --color-text-faint: var(--c-neutral-500);   /* ainult dekoratiivne */
  --color-text-inverse: var(--c-neutral-0);   /* tekst aktsendil */

  --color-link: var(--c-neutral-900);
  --color-link-hover: var(--c-accent-700);
  --color-link-underline: var(--c-neutral-300);

  /* Ainus aktsent. --color-primary ja --color-accent on sama tooni pere. */
  --color-primary: var(--c-accent-600);
  --color-primary-hover: var(--c-accent-700);
  --color-primary-active: var(--c-accent-800);
  --color-primary-soft: var(--c-accent-50);
  --color-primary-soft-2: var(--c-accent-100);
  /* Teine toon: šampanjakuld – AINULT dekoratiivne (punktid, joonekesed, märgid), mitte tekstivärv. */
  --c-champagne-100: #f7f1e6;
  --c-champagne-200: #ede2cd;
  --c-champagne-400: #c8ad84;
  --c-champagne-600: #8f6f3e;
  --color-gold: var(--c-champagne-400);
  --color-gold-soft: var(--c-champagne-100);
  --color-gold-deep: var(--c-champagne-600);
  --gradient-gold: linear-gradient(120deg, #ede2cd, #c8ad84 55%, #e4d4b6);
  /* Fotode alumine varjutus (pealdise loetavus) ja pinna kerge läige. */
  --gradient-photo-fade: linear-gradient(180deg, transparent 55%, rgba(22, 22, 21, 0.38));
  --gradient-surface: linear-gradient(180deg, #ffffff, #fbfbfa);
  /* Tume toon väikestele elementidele (fotonupud, tööriistavihjed): neutraalne peaaegu must. */
  --c-forest-900: #161615;
  --c-forest-800: #292826;
  --color-ink: var(--c-forest-900);
  --color-ink-2: var(--c-forest-800);
  --color-on-ink: #ffffff;
  --color-on-ink-muted: #bdbbb6;
  --color-topbar-glass: rgba(255, 255, 255, 0.84);
  --color-on-primary: var(--c-neutral-0);

  --color-accent: var(--c-accent-600);
  --color-accent-hover: var(--c-accent-700);
  --color-accent-soft: var(--c-accent-50);

  /* Endised "tumeda sektsiooni" tokenid — nüüd HELEDAD (tume sektsioon puudub). */
  --color-dark: var(--c-neutral-100);
  --color-on-dark: var(--c-neutral-900);
  --color-on-dark-muted: var(--c-neutral-600);

  --color-success: var(--c-green-700);
  --color-success-soft: var(--c-green-50);
  --color-success-border: var(--c-green-200);
  --color-info: var(--c-sky-700);
  --color-info-soft: var(--c-sky-50);
  --color-info-border: var(--c-sky-100);
  --color-warning: var(--c-honey-700);
  --color-warning-soft: var(--c-honey-50);
  --color-warning-border: var(--c-honey-100);
  --color-danger: var(--c-rose-700);
  --color-danger-soft: var(--c-rose-50);
  --color-danger-border: var(--c-rose-100);

  --color-focus: var(--c-accent-600);         /* 5,9:1 valgel */
  --color-focus-ring: var(--c-accent-100);
  --color-overlay: rgba(28, 27, 25, 0.28);
  --color-placeholder-a: var(--c-neutral-100);
  --color-placeholder-b: var(--c-neutral-150);

  /* Protsessi staatused (8 sammu + kõrvalteed) — tekst / taust / piir; kõik ≥ 5,5:1 */
  --status-1-fg: var(--c-slate-700);  --status-1-bg: var(--c-slate-50);  --status-1-border: var(--c-slate-200);  /* Päring */
  --status-2-fg: var(--c-plum-700);   --status-2-bg: var(--c-plum-50);   --status-2-border: var(--c-plum-100);   /* Eelhindamine */
  --status-3-fg: var(--c-honey-700);  --status-3-bg: var(--c-honey-50);  --status-3-border: var(--c-honey-100);  /* Vastuvõtt */
  --status-4-fg: var(--c-clay-700);   --status-4-bg: var(--c-clay-50);   --status-4-border: var(--c-clay-100);   /* Ettevalmistus */
  --status-5-fg: var(--c-teal-700);   --status-5-bg: var(--c-teal-50);   --status-5-border: var(--c-teal-200);   /* Listimine */
  --status-6-fg: var(--c-green-700);  --status-6-bg: var(--c-green-50);  --status-6-border: var(--c-green-200);  /* Müük */
  --status-7-fg: var(--c-sky-700);    --status-7-bg: var(--c-sky-50);    --status-7-border: var(--c-sky-100);    /* Täitumine */
  --status-8-fg: var(--c-neutral-800); --status-8-bg: var(--c-neutral-150); --status-8-border: var(--c-neutral-300); /* Väljamakse */
  --status-rejected-fg: var(--c-rose-700);    --status-rejected-bg: var(--c-rose-50);     --status-rejected-border: var(--c-rose-100);
  --status-returned-fg: var(--c-neutral-600); --status-returned-bg: var(--c-neutral-100); --status-returned-border: var(--c-neutral-200);
  --status-donated-fg: var(--c-plum-700);     --status-donated-bg: var(--c-plum-50);      --status-donated-border: var(--c-plum-100);

  /* ---------- Tüpograafia (ainult süsteemsed fondid) ---------- */
  --font-sans: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-serif: var(--font-sans);   /* pärandnimi: pealkirjad on nüüd samuti sans */
  --font-display: var(--font-sans);
  /* Toimetuslik serif: H1, sektsioonipealkirjad ja avalehe suured numbrid (ainult 400 + kursiiv). */
  --font-editorial: "Instrument Serif", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --fs-display-1: clamp(2.75rem, 1.6rem + 4.4vw, 5.5rem);   /* 44–88 H1 */
  --fs-display-2: clamp(2.25rem, 1.6rem + 2.4vw, 3.75rem); /* 36–60 H2 */
  --fs-mega: clamp(3rem, 1.3rem + 6vw, 6.75rem);           /* 48–108 avalehe hero */
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;

  --fs-xs: 0.75rem;     /* 12 */
  --fs-sm: 0.875rem;    /* 14 */
  --fs-md: 1rem;        /* 16 */
  --fs-lg: 1.125rem;    /* 18 */
  --fs-xl: 1.25rem;     /* 20 */
  --fs-2xl: clamp(1.375rem, 1.25rem + 0.5vw, 1.625rem);   /* 22–26 */
  --fs-3xl: clamp(1.75rem, 1.5rem + 1vw, 2.25rem);        /* 28–36 */
  --fs-4xl: clamp(2.125rem, 1.6rem + 2.2vw, 3.25rem);     /* 34–52 */

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 600;       /* minimalism: raskeim kaal on 600 */

  --lh-tight: 1.15;
  --lh-snug: 1.35;
  --lh-base: 1.6;
  --ls-caps: 0.1em;
  --ls-tight: -0.02em;  /* suured pealkirjad */
  --ls-snug: -0.01em;   /* väiksemad pealkirjad */
  --ls-brand: 0.2em;

  --measure: 65ch;      /* lugemisteksti rea pikkus */
  --measure-narrow: 52ch;

  /* ---------- Vahed (4/8 px skaala) ---------- */
  --space-0: 0;
  --space-1: 0.25rem;  /* 4 */
  --space-2: 0.5rem;   /* 8 */
  --space-3: 0.75rem;  /* 12 */
  --space-4: 1rem;     /* 16 */
  --space-5: 1.5rem;   /* 24 */
  --space-6: 2rem;     /* 32 */
  --space-7: 3rem;     /* 48 */
  --space-8: 4rem;     /* 64 */
  --space-9: 6rem;     /* 96 */
  --space-10: 8rem;    /* 128 */
  --space-section: clamp(2.5rem, 1.5rem + 3vw, 4.5rem);  /* sektsioonide vertikaalne õhk 40–72 (tihe desktop) */

  --container-max: 1440px;   /* laiem desktop: vähem kerimist, rohkem veerge */
  --header-h: 64px;          /* kleepuva päise kõrgus desktopil (kleepuvate elementide nihe) */
  --container-narrow: 720px;
  --gutter: clamp(1rem, 0.5rem + 2.5vw, 2.5rem);
  --control-h: 2.75rem;      /* 44 px – madalam, kuid puutesihtmärk säilib */
  --control-h-sm: 2.25rem;   /* 36 px */

  /* ---------- Raadiused (4–10 px; pill täisümar) ---------- */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 20px;   /* suured fotod ja paneelid */
  --radius-pill: 999px;

  /* ---------- Varjud: AINULT hõljuvatel elementidel (modaal, toast, rippmenüü) + fookus ---------- */
  /* Varjud: kihilised, pehmed ja soojad (tooniks tekstivärv 28 27 25, mitte puhas must). Kasutus ainult tokenite kaudu. */
  --shadow-xs: 0 1px 2px rgba(22, 22, 21, 0.05);
  --shadow-sm: 0 1px 2px rgba(22, 22, 21, 0.04), 0 2px 8px -2px rgba(22, 22, 21, 0.06);
  --shadow-md: 0 2px 6px -2px rgba(22, 22, 21, 0.05), 0 14px 32px -14px rgba(22, 22, 21, 0.12);
  --shadow-lg: 0 6px 16px -6px rgba(22, 22, 21, 0.07), 0 28px 60px -26px rgba(22, 22, 21, 0.18);
  --shadow-xl: 0 10px 28px -10px rgba(22, 22, 21, 0.09), 0 44px 96px -36px rgba(22, 22, 21, 0.24);
  --shadow-card: 0 1px 2px rgba(22, 22, 21, 0.03);
  --shadow-card-hover: 0 2px 6px -2px rgba(22, 22, 21, 0.05), 0 20px 44px -20px rgba(22, 22, 21, 0.18);
  --shadow-up: 0 -10px 30px -18px rgba(22, 22, 21, 0.18);
  --shadow-btn: 0 1px 2px rgba(22, 22, 21, 0.12);
  --shadow-btn-hover: 0 1px 2px rgba(22, 22, 21, 0.10), 0 10px 22px -10px rgba(28, 48, 41, 0.55);
  --shadow-gold: 0 0 0 1px rgba(200, 173, 132, 0.7);
  --filter-drop-lg: drop-shadow(0 16px 22px rgba(22, 22, 21, 0.12)) drop-shadow(0 2px 4px rgba(22, 22, 21, 0.05));
  --filter-drop-md: drop-shadow(0 8px 14px rgba(22, 22, 21, 0.10));
  --shadow-focus-success: 0 0 0 3px var(--color-success-border);
  --shadow-focus-danger: 0 0 0 3px var(--color-danger-border);
  --shadow-focus: 0 0 0 1px var(--color-focus), 0 0 0 4px var(--color-focus-ring);  /* 1 px aktsent + piir = 2 px nähtav serv (nagu nuppude outline), pehme halo väljas */

  /* ---------- Liikumine ja kihid ---------- */
  --ease: cubic-bezier(0.2, 0, 0, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);   /* pehme peatumine (ilmumised, tõusud) */
  --dur-fast: 150ms;
  --dur: 200ms;
  --dur-slow: 700ms;
  --z-topbar: 50;
  --z-popover: 80;
  --z-toast: 90;
  --z-modal: 100;
}

@media (min-width: 1680px) { :root { --container-max: 1560px; } }

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 0ms;
    --dur: 0ms;
    --dur-slow: 0ms;
  }
}