/* =============================================================================
   TOKENS — Peek A'Boo Photography
   -----------------------------------------------------------------------------
   Сите бои се извлечени пиксел-по-пиксел од оригиналното лого.
   Секој пар текст/позадина е проверен со вистинска WCAG пресметка.

   ЗЛАТНОТО ПРАВИЛО:
     Боите од логото ПОПОЛНУВААТ (позадини, форми).
     Затемнетите варијанти ЗБОРУВААТ (текст).
     Само виолетовата носи бел текст. Сите други носат ink текст.
   ============================================================================= */

:root {

  /* ---------------------------------------------------------------------------
     СЛОЈ 1 — FILL. Точни хексови од логото. Само за позадини и форми.
     Никогаш како боја на текст врз крем.
     ------------------------------------------------------------------------- */
  --fill-purple: #543A73;   /* текст врз неа: бел    — 9.42:1  ✓ */
  --fill-yellow: #EAEB6B;   /* текст врз неа: ink    — 11.64:1 ✓ */
  --fill-green:  #C6E39B;   /* текст врз неа: ink    — 10.42:1 ✓ (пастелна) */
  --fill-orange: #F3A362;   /* текст врз неа: ink    — 7.17:1  ✓ */
  --fill-teal:   #4DC0BE;   /* текст врз неа: ink    — 6.73:1  ✓ */
  --fill-coral:  #E87153;   /* текст врз неа: ink    — 4.85:1  ✓ */

  /* Оригиналното сино од логото паѓа со ink (3.92) И со бело (3.76).
     Го користиме САМО декоративно — точки, форми, рамки. Никогаш под текст. */
  --fill-blue-deco: #6683C2;
  /* Кога сино мора да носи текст, ја користиме затемнетата верзија. */
  --fill-blue: #4A63A8;     /* текст врз неа: бел    — 5.77:1  ✓ */

  /* Меки тонови за широки, тивки ленти */
  --fill-lavender: #E4DEEE;
  --fill-cream-deep: #F4EDDF;

  /* ---------------------------------------------------------------------------
     СЛОЈ 2 — INK. Затемнети варијанти. Ова се боите на текстот.
     ------------------------------------------------------------------------- */
  --bg: #FBF7EE;            /* топол крем — основната позадина на сајтот */
  --ink: #2E2438;           /* основен текст            — 13.78:1 на крем ✓ */
  --ink-muted: #6B5C74;     /* второстепен текст        — 5.76:1  на крем ✓ */
  --text-purple: #543A73;   /* акцентен текст           — 8.81:1  на крем ✓ */
  --text-coral: #C24726;    /* акцентен текст (НЕ #E87153, тој е 2.84 — паѓа) */
  --text-teal: #1F706E;     /* акцентен текст           — 5.45:1  на крем ✓ */
  --on-fill-dark: #2E2438;  /* текст врз светла fill боја */
  --on-fill-light: #FFFFFF; /* текст врз виолетова/сина fill боја */

  /* Рамки и линии */
  --line: rgba(46, 36, 56, 0.14);
  --line-strong: rgba(46, 36, 56, 0.28);
  --line-dashed: rgba(46, 36, 56, 0.22);

  /* ---------------------------------------------------------------------------
     ТИПОГРАФИЈА — сите три фонта имаат потврдена кирилица
     ------------------------------------------------------------------------- */
  --font-display: 'Unbounded', 'Trebuchet MS', sans-serif;
  --font-body: 'Nunito', 'Segoe UI', system-ui, sans-serif;
  --font-accent: 'Caveat', 'Segoe Script', cursive;

  /* Fluid скала */
  /* Насловот дели простор со панелот од десно, па расте побавно од ширината
     на екранот — инаку на 900-1100px секој збор паѓа во свој ред. */
  --fs-hero:    clamp(2.25rem, 1.25rem + 3.2vw, 4rem);
  /* Unbounded е широк фонт, а македонскиот има долги сложенки („фотографираме")
     — минимумот е снижен за да не се кршат зборови на 320px екран. */
  --fs-h1:      clamp(1.85rem, 1.15rem + 3.0vw, 3.4rem);
  --fs-h2:      clamp(1.5rem, 1.1rem + 1.85vw, 2.3rem);
  --fs-h3:      clamp(1.25rem, 1.1rem + 0.7vw, 1.6rem);
  --fs-lead:    clamp(1.06rem, 1.0rem + 0.35vw, 1.28rem);
  --fs-body:    1rem;          /* никогаш под 16px */
  --fs-small:   0.9375rem;
  /* Ситна етикета над насловите. Беше голем корален ракопис над СЕКОЈА секција —
     осум пати на страница тоа престанува да биде акцент и станува врева. */
  --fs-eyebrow: 0.8125rem;
  /* Ракописниот eyebrow останува само во hero-то; Caveat е мал по природа. */
  --fs-eyebrow-script: clamp(1.15rem, 1.0rem + 0.6vw, 1.5rem);

  --lh-tight: 1.08;
  --lh-heading: 1.18;
  --lh-body: 1.65;

  /* ---------------------------------------------------------------------------
     ПРОСТОР — 8px основа
     ------------------------------------------------------------------------- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;

  /* Вертикален ритам на секции */
  --section-y: clamp(4.5rem, 2.5rem + 7vw, 9rem);
  --container: 1180px;
  --container-narrow: 760px;
  --gutter: clamp(1.25rem, 0.5rem + 3vw, 2.5rem);

  /* ---------------------------------------------------------------------------
     ФОРМИ
     ------------------------------------------------------------------------- */
  --r-sm: 8px;
  --r-md: 16px;
  --r-lg: 24px;
  --r-xl: 36px;
  --r-pill: 999px;
  /* Потпис-формата: лак. Заоблено горе, благо долу. */
  --r-arch: 999px 999px var(--r-lg) var(--r-lg);
  /* Мека „лист" форма за помали слики */
  --r-leaf: 999px var(--r-lg) 999px var(--r-lg);

  --shadow-sm: 0 2px 6px rgba(46, 36, 56, 0.06);
  --shadow-md: 0 6px 18px rgba(46, 36, 56, 0.09);
  --shadow-lg: 0 14px 36px rgba(46, 36, 56, 0.13);

  /* ---------------------------------------------------------------------------
     ДВИЖЕЊЕ
     Различни времиња за различни задачи — не едно време копирано насекаде.
     ------------------------------------------------------------------------- */
  --dur-press: 80ms;        /* притисок на копче */
  --dur-fast: 150ms;        /* промена на боја, мали hover-и */
  --dur-base: 200ms;        /* hover, навигација, чипови */
  --dur-slow: 400ms;        /* влез на секција */
  --dur-signature: 700ms;   /* лак-откривање, цртање на брановидната линија */

  --ease-out: cubic-bezier(0.2, 0, 0, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);

  --stagger: 50ms;
  --travel: 12px;           /* максимално растојание на движење. Не го зголемувај. */

  --z-header: 100;
  --z-drawer: 200;
  --z-lightbox: 300;
}

/* Мапирање име-на-боја → пар (позадина, текст врз неа).
   Се користи преку data-color="coral" на секција или картичка.
   Ова е механизмот што гарантира дека никогаш нема да се случи
   нечитлива комбинација — бојата и текстот доаѓаат заедно, во пар. */
[data-color="coral"]  { --tone-bg: var(--fill-coral);  --tone-fg: var(--on-fill-dark); }
[data-color="yellow"] { --tone-bg: var(--fill-yellow); --tone-fg: var(--on-fill-dark); }
[data-color="teal"]   { --tone-bg: var(--fill-teal);   --tone-fg: var(--on-fill-dark); }
[data-color="green"]  { --tone-bg: var(--fill-green);  --tone-fg: var(--on-fill-dark); }
[data-color="orange"] { --tone-bg: var(--fill-orange); --tone-fg: var(--on-fill-dark); }
[data-color="purple"] { --tone-bg: var(--fill-purple); --tone-fg: var(--on-fill-light); }
[data-color="blue"]   { --tone-bg: var(--fill-blue);   --tone-fg: var(--on-fill-light); }
[data-color="lavender"] { --tone-bg: var(--fill-lavender); --tone-fg: var(--on-fill-dark); }
[data-color="cream"]  { --tone-bg: var(--fill-cream-deep); --tone-fg: var(--on-fill-dark); }