/* ============================================================
   GORIZIANA — DIZAJN SYSTÉM (design tokens)
   ------------------------------------------------------------
   Toto je JEDINÝ zdroj pravdy pre vzhľad celého e-shopu Goriziana
   (storefront, account zóna klienta aj admin zóna).

   NAHRÁDZA pôvodné theme.css / admin-theme.css a celý starší
   "gabion" vzhľad. Žiadna stránka nesmie definovať vlastné farby
   ani fonty natvrdo — všetko ťahá z týchto premenných.

   Štýl: talianska elegancia. Teplá kávová paleta, serifový
   display font + čistý sans pre telo. Pokojné, prémiové.

   Zdroj pravdy: .specifikacia/01-mvp/podklady/design-tokens.css
   (premenné sú KÓPIA 1:1; navyše tu je @font-face self-host blok a
   globálny reset/a11y, ktoré vyžaduje 70-dizajn.md § 7.3.3 a § 7.9).
   ============================================================ */

/* ---------- Fonty (self-host, prod) ----------
   V DEV layouty načítajú Google Fonts CDN <link> AŽ ZA týmto súborom,
   čím prepíšu rovnaké rodiny → chýbajúce woff2 sa v dev nefetchujú.
   V PROD sa použijú tieto self-hostované súbory (/assets/fonts/).
   Pred prod launchom doplniť woff2 do frontend/public/assets/fonts/. */
@font-face{ font-family:'Jost'; font-style:normal; font-weight:300;
  src:url('/assets/fonts/Jost-300.woff2') format('woff2'); font-display:swap; }
@font-face{ font-family:'Jost'; font-style:normal; font-weight:400;
  src:url('/assets/fonts/Jost-400.woff2') format('woff2'); font-display:swap; }
@font-face{ font-family:'Jost'; font-style:normal; font-weight:500;
  src:url('/assets/fonts/Jost-500.woff2') format('woff2'); font-display:swap; }
@font-face{ font-family:'Jost'; font-style:normal; font-weight:600;
  src:url('/assets/fonts/Jost-600.woff2') format('woff2'); font-display:swap; }
@font-face{ font-family:'Cormorant Garamond'; font-style:normal; font-weight:400;
  src:url('/assets/fonts/CormorantGaramond-400.woff2') format('woff2'); font-display:swap; }
@font-face{ font-family:'Cormorant Garamond'; font-style:normal; font-weight:500;
  src:url('/assets/fonts/CormorantGaramond-500.woff2') format('woff2'); font-display:swap; }
@font-face{ font-family:'Cormorant Garamond'; font-style:normal; font-weight:600;
  src:url('/assets/fonts/CormorantGaramond-600.woff2') format('woff2'); font-display:swap; }
@font-face{ font-family:'Cormorant Garamond'; font-style:italic; font-weight:400;
  src:url('/assets/fonts/CormorantGaramond-400italic.woff2') format('woff2'); font-display:swap; }
/* Archivo — display font storefrontu (redizajn „D", neutrálny gastro-supply) */
@font-face{ font-family:'Archivo'; font-style:normal; font-weight:500;
  src:url('/assets/fonts/Archivo-500.woff2') format('woff2'); font-display:swap; }
@font-face{ font-family:'Archivo'; font-style:normal; font-weight:600;
  src:url('/assets/fonts/Archivo-600.woff2') format('woff2'); font-display:swap; }
@font-face{ font-family:'Archivo'; font-style:normal; font-weight:700;
  src:url('/assets/fonts/Archivo-700.woff2') format('woff2'); font-display:swap; }

:root{
  /* === Značkové farby === */
  --espresso:    #2b1d16;   /* hlavná tmavá – tmavé sekcie, admin sidebar, tlačidlá */
  --ink:         #1a120c;   /* najtmavšia – nadpisy na svetlom, topbary */
  --crema:       #c9a26a;   /* zlatý akcent – linky, badge, aktívne stavy */
  --crema-light: #e3c79b;   /* svetlejší akcent – text na tmavom pozadí */
  --rosso:       #7c2d20;   /* taliansky červený akcent – CTA hover, dôraz, akcie */
  --verde:       #3a4a3a;   /* doplnková zelená */

  /* === Podklady === */
  --paper:       #fbf8f2;   /* hlavné pozadie stránok (svetlá téma) */
  --cream:       #f6f0e6;   /* karty, panely */
  --cream-deep:  #ece2d2;   /* sekundárne pozadie, hover riadkov, oddelenie */

  /* === Text === */
  --text:        #33271e;   /* základný text */
  --muted:       #6a564a;   /* tlmený text, popisy */

  /* === Rola-špecifické akcenty (admin) === */
  --role-systemadmin: #c9a26a; /* oranžová/zlatá */
  --role-ceo:         #3a6b4a; /* zelená (vlastník) */
  --role-manager:     #3a5a7c; /* modrá */

  /* === Stavové farby (badge objednávok a pod.) === */
  --ok:   #3a6b4a;  --ok-bg:   rgba(58,107,74,.14);
  --warn: #b07d2a;  --warn-bg: rgba(176,125,42,.16);
  --info: #3a5a7c;  --info-bg: rgba(58,90,124,.14);
  --new:  #7c2d20;  --new-bg:  rgba(124,45,32,.12);

  /* === Linky a orámovania === */
  --line: rgba(43,29,22,.10);   /* jemné deliace čiary, orámovanie kariet */
  --line-strong: #d9cdba;       /* výraznejšie orámovanie (tabuľky v dokumentoch) */

  /* === Typografia === */
  --font-display: 'Cormorant Garamond', Georgia, serif;  /* nadpisy, čísla, ceny */
  --font-body:    'Jost', -apple-system, system-ui, sans-serif; /* telo, UI */
  --fw-light: 300; --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600;

  /* === Rozostupy (8px raster) === */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px;

  /* === Rádiusy === */
  --r-sm: 2px;  --r-md: 3px;  --r-lg: 4px;  --r-pill: 30px;

  /* === Tiene === */
  --shadow-sm: 0 8px 24px -12px rgba(43,29,22,.18);
  --shadow-md: 0 20px 50px -25px rgba(43,29,22,.30);
  --shadow-lg: 0 40px 80px -30px rgba(43,29,22,.50);

  /* === Layout === */
  --wrap-max: 1240px;     /* max šírka obsahu storefrontu */
  --sidebar-w: 260px;     /* šírka admin/account sidebaru */
  --topbar-h: 58px;       /* výška admin topbaru */
  --header-h: 88px;       /* výška storefront hlavičky */

  /* === Prechody === */
  --ease: cubic-bezier(.2,.8,.2,1);
  --t-fast: .18s;  --t-base: .25s;  --t-slow: .3s;

  /* === Breakpointy (referenčné hodnoty pre @media) === */
  /* desktop: > 980px | tablet: <= 980px | mobil: <= 560px
     admin/account off-canvas sidebar: <= 820px */
}

/* ---------- Tmavá téma (prepínateľná) ----------
   Aplikuje sa cez html[data-theme=dark], ukladá sa do localStorage (gs-theme).
   Storefront aj admin musia tmavú tému podporovať. */
html[data-theme="dark"]{
  --paper:      #1a120c;
  --cream:      #241813;
  --cream-deep: #2b1d16;
  --text:       #ece2d2;
  --muted:      #b9a888;
  --line:       rgba(201,162,106,.15);
  --line-strong:#3d2a1f;
}

/* Buttony v tmavej téme: base .btn používa --espresso/--cream ako tmavý/svetlý pár, ktorý sa
   v dark flipne na tmavý/tmavý (text zmizne). Preto explicitný kontrast cez zlatý akcent. */
html[data-theme="dark"] .btn{ color:var(--text); border-color:var(--line-strong); }
html[data-theme="dark"] .btn-primary{ background:var(--crema); color:#160d08; border-color:var(--crema); }
html[data-theme="dark"] .btn-primary:hover{ background:var(--crema-light); border-color:var(--crema-light); color:#160d08; }
html[data-theme="dark"] .btn-ghost{ background:transparent; color:var(--text); border-color:var(--line-strong); }
html[data-theme="dark"] .btn-ghost:hover{ background:var(--crema); color:#160d08; border-color:var(--crema); }

/* Dark kontrast nadpisov (plán 24): h1–h4 používajú --ink, ktorý je v dark zámerne tmavý
   (slúži aj ako tmavá plocha, napr. pozadie topbaru), preto sa neprepisuje → nadpis by bol
   neviditeľný. Storefront (body.sf-theme) má v dark vlastný svetlý --ink, preto ho vynechávame. */
html[data-theme="dark"] body:not(.sf-theme) :is(h1,h2,h3,h4){ color:var(--text); }

/* ============================================================
   STOREFRONT THEME „D" — neutrálny gastro-supply (redizajn 02)
   Scopované na body.sf-theme → ADMIN a ACCOUNT zóny ostávajú
   nedotknuté (dedia pôvodné :root tokeny). Storefront-base.php
   pridáva <body class="sf-theme">.
   ============================================================ */
body.sf-theme{
  /* teplá paleta „demo-C-warm" (krémová + terakota) */
  --paper:       #f7f1e7;   /* teplá krémová — pozadie storefrontu */
  --surface:     #fdf8ef;   /* karty/panely (teplá biela) */
  --cream:       #fdf8ef;   /* legacy „karta" */
  --cream-deep:  #efe6d6;   /* sekundárne pozadie (paper2) */
  --steel:       #efe6d6;
  --ink:         #2e2118;   /* teplá tmavá – nadpisy */
  --text:        #2e2118;
  --graphite:    #7b6857;   /* teplý tlmený text */
  --muted:       #9a8979;
  --crema:       #a8623c;   /* legacy akcent → terakota */
  --crema-light: #e3c79b;
  --espresso:    #3a2a1e;   /* tmavé sekcie (footer/B2B) – teplé hnedé */
  --rosso:       #8a3a28;   /* hlbšia červená (hover) */
  --accent:      #a8623c;   /* terakota = akcent (CTA, dôraz) */
  --line:        rgba(58,42,30,.14);
  --line-strong: #d9cdba;
  --font-display:'Archivo', system-ui, sans-serif;
  --header-h:    78px;
  background:var(--paper); color:var(--text);
}
/* tmavá téma storefrontu (theme-toggle) — kinematický „demo-B":
   teplé tmavé espresso + zlaté crema akcenty (na rozdiel od neutrálneho light D). */
html[data-theme="dark"] body.sf-theme{
  --paper:       #160d08;   /* dark espresso — pozadie */
  --surface:     #241710;   /* karty/panely */
  --cream:       #241710;   /* legacy „karta" */
  --cream-deep:  #2c1d14;
  --steel:       #2c1d14;
  --ink:         #f6f0e6;   /* svetlé nadpisy/text na tmavom */
  --text:        #ece2d2;
  --graphite:    #b9a78f;   /* tlmený teplý text */
  --muted:       #a08a78;
  --crema:       #c9a26a;   /* zlatý akcent (demo-B) */
  --crema-light: #e3c79b;
  --espresso:    #120a06;   /* ešte tmavšie sekcie (footer/B2B) */
  --rosso:       #c9a26a;   /* v dark sa akcent posúva na zlatý */
  --accent:      #c9a26a;   /* zlatá = dominantný akcent (demo-B) */
  --line:        rgba(201,162,106,.20);
  --line-strong: #3d2a1f;
}

/* ============================================================
   GLOBÁLNY RESET + A11Y (70-dizajn.md § 7.9)
   ============================================================ */
*,*::before,*::after{ box-sizing:border-box; }
*{ margin:0; padding:0; }
html{ scroll-behavior:smooth; }
body{ overflow-x:hidden; }
a{ text-decoration:none; color:inherit; }
img,svg{ max-width:100%; }
img{ display:block; }
button{ font:inherit; cursor:pointer; }
input,select,textarea,button{ font-family:inherit; }
:focus-visible{ outline:2px solid var(--crema); outline-offset:2px; }
@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important;
     transition-duration:.001ms !important; }
  html{ scroll-behavior:auto; }
}

/* ============================================================
   ZÁKLADNÉ PRVKY — referenčné triedy z mockupov
   Claude Code ich má použiť ako základ komponentov. Nie sú
   povinné 1:1, ale farby/fonty/rozostupy musia ísť z premenných.
   ============================================================ */

body{
  font-family:var(--font-body);
  background:var(--paper);
  color:var(--text);
  font-weight:var(--fw-light);
  line-height:1.55;
}
h1,h2,h3,h4{ font-family:var(--font-display); font-weight:var(--fw-medium); line-height:1.1; color:var(--ink); }

/* Tlačidlá */
.btn{
  font-family:var(--font-body); font-size:14px; letter-spacing:.05em;
  text-transform:uppercase; padding:14px 30px; border-radius:var(--r-sm);
  cursor:pointer; border:1px solid var(--espresso); transition:var(--t-base) var(--ease);
}
.btn-primary{ background:var(--espresso); color:var(--cream); }
.btn-primary:hover{ background:var(--rosso); border-color:var(--rosso); }
.btn-ghost{ background:transparent; color:var(--espresso); }
.btn-ghost:hover{ background:var(--espresso); color:var(--cream); }

/* Karta / panel */
.card{ background:var(--cream); border:1px solid var(--line); border-radius:var(--r-md); }

/* Stavové štítky (badge) */
.badge{ font-size:11px; padding:4px 11px; border-radius:var(--r-sm); font-weight:var(--fw-medium); display:inline-block; }
.badge--ok  { background:var(--ok-bg);   color:var(--ok); }
.badge--warn{ background:var(--warn-bg); color:var(--warn); }
.badge--info{ background:var(--info-bg); color:var(--info); }
.badge--new { background:var(--new-bg);  color:var(--new); }

/* Cena */
.price{ font-family:var(--font-display); font-weight:var(--fw-semibold); color:var(--rosso); }
.price s{ color:var(--muted); opacity:.5; font-weight:var(--fw-light); }

/* Eyebrow (malý nadpis nad sekciou) */
.eyebrow{ font-size:12px; letter-spacing:.32em; text-transform:uppercase; color:var(--crema); font-weight:var(--fw-medium); }

/* Globálny app footer (backlog B-1) — tenký pruh s verziou + Powered by XandraOne */
.app-footer{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:8px;
  padding:14px 20px; border-top:1px solid var(--line);
  font-size:12px; color:var(--muted); letter-spacing:.02em;
}
.app-footer a{ color:var(--muted); text-decoration:none; border-bottom:1px solid var(--line); }
.app-footer a:hover{ color:var(--ink); }
.app-footer__ver{ font-variant-numeric:tabular-nums; }
.app-footer__sep{ opacity:.5; }
.app-footer__powered{ display:inline-flex; align-items:center; gap:6px; }
.app-footer__brand{ display:inline-flex; align-items:center; border-bottom:none !important; }
.app-footer__logo{ height:15px; width:auto; display:block; opacity:.92; transition:opacity var(--t-fast) var(--ease); }
.app-footer__brand:hover .app-footer__logo{ opacity:1; }

/* Heslo show/hide toggle (formuláre s heslom) */
.pw-wrap{ position:relative; display:block; }
.pw-wrap input{ width:100%; padding-right:78px; }
.pw-toggle{ position:absolute; right:6px; top:50%; transform:translateY(-50%); display:inline-flex; align-items:center; background:transparent; border:0; cursor:pointer; font-size:11px; line-height:1; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); padding:6px 8px; border-radius:var(--r-sm); }
.pw-toggle:hover{ color:var(--ink); }
.pw-toggle:focus-visible{ outline:2px solid var(--line-strong); outline-offset:1px; }

/* Heslo — živý checklist pravidiel (splnené = zelené) */
.pw-rules{ list-style:none; margin:9px 0 0; padding:0; display:flex; flex-direction:column; gap:4px; }
.pw-rules li{ font-size:12px; line-height:1.3; color:var(--muted); display:flex; align-items:center; gap:7px; transition:color .15s ease; }
.pw-rules li::before{ content:"○"; font-size:10px; line-height:1; color:var(--line-strong); transition:color .15s ease; }
.pw-rules li.is-met{ color:var(--ok); }
.pw-rules li.is-met::before{ content:"✓"; color:var(--ok); }

/* Submit tlačidlo nedostupné, kým formulár nie je platný */
.btn:disabled, .btn[disabled]{ opacity:.45; cursor:not-allowed; }