/* ============================================================================
   Design tokens. Nothing in the theme may use a raw colour, duration or spacing
   value — every component reads from here.
   ========================================================================= */
:root{
  /* --- brand & ink ------------------------------------------------------ */
  --red-600:#D20B12;  --red-700:#A5080E;  --red-800:#7D0509;
  --red-400:#FF5A5F;  --red-050:#FDEAEC;
  --ink:#141416;
  --grey-900:#1C1C1F; --grey-700:#3F3F45; --grey-600:#5C5C63; --grey-500:#6E6E75;
  --grey-400:#8A8A91; --grey-300:#C9C9CE; --grey-200:#EDEDEE; --grey-100:#F6F6F7;
  --white:#FFFFFF;

  /* --- semantic. red is the brand, NOT the error colour ----------------- */
  --success-600:#0F7A34; --success-050:#E8F5EC;
  --warning-500:#F5A623; --warning-700:#7A4F00; --warning-050:#FDF3E0;

  /* --- roles ------------------------------------------------------------ */
  --ground:var(--white);
  --panel:var(--grey-100);
  --sunk:var(--grey-200);
  --text:var(--ink);
  --text-2:var(--grey-700);
  --text-3:var(--grey-500);
  --rule:var(--grey-300);
  --rule-fn:var(--grey-400);       /* functional borders: inputs, checkboxes */
  --accent:var(--red-600);
  --accent-hover:var(--red-700);
  --accent-active:var(--red-800);
  --accent-soft:var(--red-050);
  --focus:var(--ink);
  /* Dark sections re-declare --focus below; the :focus-visible rule never changes. */

  /* --- type ------------------------------------------------------------- */
  --font-ka:"Noto Sans Georgian","Noto Sans",system-ui,sans-serif;
  /* Not loaded as a webfont: Noto Sans Georgian covers Latin. Kept as a stack for
     any future Latin-only context, where a locally installed face may match. */
  --font-lat:"Noto Sans","Noto Sans Georgian",system-ui,sans-serif;
  --font-mono:"JetBrains Mono",ui-monospace,SFMono-Regular,monospace;

  --fs-display:40px; --lh-display:48px;
  --fs-h1:32px;      --lh-h1:40px;
  --fs-h2:24px;      --lh-h2:32px;
  --fs-h3:19px;      --lh-h3:26px;
  --fs-card:17px;    --lh-card:24px;
  --fs-body:16px;    --lh-body:26px;
  --fs-sm:15px;      --lh-sm:24px;
  --fs-label:14px;   --lh-label:20px;
  --fs-meta:13px;    --lh-meta:18px;
  --fs-micro:12px;   --lh-micro:17px;
  --fs-price:24px;   --lh-price:30px;

  /* --- space (4px base) -------------------------------------------------- */
  --sp-1:4px;  --sp-2:8px;  --sp-3:12px; --sp-4:16px; --sp-5:24px;
  --sp-6:32px; --sp-7:48px; --sp-8:64px; --sp-9:96px; --sp-10:128px;
  --touch:48px;
  /* Set precisely by app.js; this is the fallback before JS runs. */
  --header-h:65px;
  --sidebar:300px;
  --radius:4px;
  --radius-lg:6px;

  /* --- motion ------------------------------------------------------------ */
  --dur-instant:100ms;
  --dur-base:200ms;
  --dur-exit:160ms;
  --dur-panel:300ms;
  --dur-backdrop:400ms;
  --ease-enter:cubic-bezier(0,0,.38,.9);
  --ease-exit:cubic-bezier(.2,0,1,.9);
  --ease-standard:cubic-bezier(.2,0,.38,.9);

  --shadow-1:0 1px 2px rgba(20,20,22,.06);
  --shadow-2:0 2px 4px rgba(20,20,22,.08),0 8px 20px -12px rgba(20,20,22,.18);
  --shadow-panel:0 -4px 24px rgba(20,20,22,.18);
}

/* Georgian body text never gets letter-spacing; the width axis handles fit. */
html[lang^="ka"] body{ font-family:var(--font-ka); letter-spacing:normal; }

@media (max-width:767px){
  :root{
    --fs-display:30px; --lh-display:38px;
    --fs-h1:24px;      --lh-h1:32px;
    --fs-h2:20px;      --lh-h2:28px;
    --fs-price:20px;   --lh-price:26px;
    --ground:var(--grey-100);   /* mobile ground is the panel grey; cards stay white */
  }
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.01ms!important; transition-duration:.01ms!important; }
}