/* ==========================================================================
   Tarino design tokens (v1.0 kit). The only place a colour, space or radius value is chosen.

   Source of truth: "Tarino A refined" (S1, mock-a-refined.html lines 13-50), quoted verbatim.
   Everything the mock hard-coded is tokenised below and marked  ADDED.
   Reasons for each ADDED token are in README.md, section 3.

   Themes
     - Light is the default.
     - Dark follows the device through @media (prefers-color-scheme: dark) on :root:not([data-theme="light"]).
     - data-theme="light" | "dark" on <html> forces a theme; the same attribute works on ANY element
       (a themed section, a preview stage), because the blocks below select [data-theme=...] and not only :root.
     - The two dark blocks MUST stay declaration-for-declaration identical (the mock's data-theme block had lost the
       two dark shadows; fixed here). `python build.py --check` fails the build if they drift.

   Rule for page seats: use these tokens, never a literal colour. A token that only aliases another themed token
   (e.g. --x: var(--visnja)) has to be declared inside every themed block, otherwise it will not flip in a scoped theme.

   Breakpoints (custom properties cannot be used inside @media, so they are written out):
     phone  < 720px      one column, bottom tab bar
     tablet >= 720px     header nav, tiles and cards in a grid
     desktop >= 960px    two-column product layout
     content max-width 1120px
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. Theme-independent tokens
   -------------------------------------------------------------------------- */
:root{
  /* Type. S1 verbatim (--serif, --sans); --mono is S3's GTIN face. ADDED: --mono, weights. */
  --serif:"Young Serif",Georgia,"Times New Roman",serif;
  --sans:"Onest",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --mono:ui-monospace,"SF Mono",Menlo,Consolas,"Liberation Mono",monospace;
  --fw-regular:400; --fw-medium:500; --fw-semi:600; --fw-link:650; --fw-bold:700; --fw-heavy:800;

  /* Spacing scale. S3's scale (the only formal one in any mock): 0 4 8 12 16 20 24 32 40 48 64.  ADDED */
  --space-0:0px;  --space-1:4px;  --space-2:8px;  --space-3:12px; --space-4:16px; --space-5:20px;
  --space-6:24px; --space-8:32px; --space-10:40px; --space-12:48px; --space-16:64px;

  /* Radius. --radius is S1's (defined there, never used). The rest are the values the mock's CSS actually uses.  ADDED
     Numeric primitives first, then roles. Components use the roles. */
  --radius:20px;
  --radius-2:2px;   /* tape */
  --radius-6:6px;   /* size pill */
  --radius-7:7px;   /* store badge, receipt label */
  --radius-8:8px;   /* scan button */
  --radius-9:9px;   /* row thumbnail */
  --radius-10:10px; /* pinned photo */
  --radius-11:11px; /* callout icon tile */
  --radius-12:12px; /* basket button */
  --radius-13:13px; /* verdict */
  --radius-14:14px; /* search, buttons */
  --radius-15:15px; /* category tile, callout, app tile */
  --radius-16:16px; /* receipt, total card */
  --radius-18:18px; /* deal card */
  --radius-pill:999px;
  --radius-tape:var(--radius-2);
  --radius-badge:var(--radius-7);
  --radius-thumb:var(--radius-9);
  --radius-photo:var(--radius-10);
  --radius-field:var(--radius-14);
  --radius-tile:var(--radius-15);
  --radius-panel:var(--radius-16);
  --radius-card:var(--radius-18);

  /* Sizes. 44 / 48 / 3px ring / offset 2 are S3's numbers, adopted for S1 (open question Q17).  ADDED */
  --tap:44px;            /* minimum tap target */
  --input-h:48px;        /* minimum form control height */
  --tabbar-h:56px;       /* phone bottom tab bar, without the safe-area inset */
  --container:1120px;    /* content max-width */
  --gutter:16px;         /* page side gutter on phones (24px from 720px, below) */
  --focus-w:3px;
  --focus-offset:2px;

  /* Motion. S3's two durations. The only animation in v1.0 is the proof chevron (Q20).  ADDED */
  --motion-fast:150ms;
  --motion-slow:250ms;

  /* Stacking.  ADDED */
  --z-header:20; --z-tabbar:30; --z-skip:100;

  /* The hero is višnja in both themes, so text and glass on it do not flip.  ADDED (mock: #fff and white alphas) */
  --on-visnja:#FFFFFF;
  --on-visnja-soft:rgba(255,255,255,.85);   /* hero label, total-card label */
  --on-visnja-mid:rgba(255,255,255,.9);     /* receipt "at" line, loop on the total card */
  --glass:rgba(255,255,255,.14);            /* chip and city chip fill */
  --glass-line:rgba(255,255,255,.26);       /* chip border */
  --glass-line-2:rgba(255,255,255,.28);     /* city chip border */

  /* The hero search field stays white in dark (S1, spec 1.6).  ADDED (mock: #fff #201A1C #9a9298 #8a8288 #F4ECEF)
     Placeholder darkened from #9a9298 (3.03:1 on white) to 5.03:1, the spec's gap Q19. */
  --field-bg:#FFFFFF;
  --field-ink:#201A1C;
  --field-placeholder:#776C72;
  --field-icon:#8A8288;
  --scan-bg:#F4ECEF;

  /* A photo print is white in both themes: packshots come on white.  ADDED (mock: #fff) */
  --photo-bg:#FFFFFF;

  /* Shadows that never change.  ADDED (mock literals) */
  --shadow-search:0 8px 20px -12px rgba(0,0,0,.4);

  /* The backdrop behind the camera dialog (scan). Neutral black at .55 in both themes.  ADDED (Basket lane: its one literal colour) */
  --scrim:rgba(0,0,0,.55);

  /* The scalloped lower edge of a receipt or ticket: the mock's mask, verbatim (.receipt__top), shared by .receipt__top and .ticket.  ADDED */
  --scallop:linear-gradient(#000 0 0) top/100% calc(100% - 9px) no-repeat, radial-gradient(7px at 9px bottom, transparent 96%, #000) bottom left/18px 100% repeat-x;
}

@media (min-width:720px){
  :root{--gutter:24px}
}


/* --------------------------------------------------------------------------
   2. Light theme (default). S1 lines 14-29 verbatim, then ADDED tokens.
   -------------------------------------------------------------------------- */
:root,
[data-theme="light"]{
  color-scheme:light;

  --visnja:#7A1E3A; --visnja-deep:#5E1530; --visnja-ink:#7A1E3A; --mark:#7A1E3A;
  --bg:#F3F0F1; --surface:#FFFFFF; --raise:#FBF9FA;
  --ink:#201A1C; --ink-2:#3C3236; --muted:#6C5F64;
  --line:#E8E1E3; --line-2:#F0EAEC;
  --save:#2E8B57; --save-ink:#1F6E42;
  --cat-milk:#EAF0F4; --cat-milk-i:#3E6E89;
  --cat-bread:#F4ECDF; --cat-bread-i:#9A6A2E;
  --cat-fruit:#E9F1E7; --cat-fruit-i:#3F7A45;
  --cat-egg:#F5ECE6; --cat-egg-i:#A05A34;
  --cat-meat:#F3E7E9; --cat-meat-i:#93384C;
  --cat-drink:#EBEAF1; --cat-drink-i:#4C4A78;
  --shadow:0 1px 2px rgba(32,26,28,.05), 0 12px 26px -16px rgba(32,26,28,.24);
  --shadow-card:0 1px 2px rgba(32,26,28,.06), 0 18px 30px -22px rgba(32,26,28,.3);

  /* ADDED, themed */
  --line-strong:#8C7F85;        /* input and control borders: 3.8:1 on white (WCAG 1.4.11 asks for 3:1); S3 has the same role */
  --warn:#8A5A00;               /* "not below the 30-day low" verdict. S3's --warn */
  --danger:#B3261E;             /* form errors */
  --focus:#7A1E3A;              /* focus ring: višnja */
  --chart-line:#7A1E3A;         /* sparkline and proof chart line */
  --tape:rgba(122,30,58,.16);   /* mock: photo tape */
  --tape-line:rgba(122,30,58,.22);
  --shadow-snap:0 6px 14px -8px rgba(32,26,28,.45);
  --shadow-btn:0 12px 22px -14px rgba(122,30,58,.8);
  --shadow-app:0 8px 16px -10px rgba(122,30,58,.7);
  --seg-track:var(--line);       /* tabs: the track and the selected pill swap lightness between themes */
  --seg-active:var(--surface);
}


/* --------------------------------------------------------------------------
   3. Dark theme, device preference. S1 lines 32-42 verbatim, then ADDED tokens.
   -------------------------------------------------------------------------- */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    color-scheme:dark;

    --bg:#161113; --surface:#211A1D; --raise:#271F22;
    --ink:#F3ECEE; --ink-2:#D6CCD0; --muted:#A99CA1;
    --line:#332A2E; --line-2:#2A2226;
    --visnja:#8A2444; --visnja-ink:#E9A7BB; --mark:#E9A7BB; --save:#57C98A; --save-ink:#7FD8A5;
    --cat-milk:#20323C; --cat-milk-i:#9FC6DA; --cat-bread:#33291A; --cat-bread-i:#D6AD6E;
    --cat-fruit:#20301F; --cat-fruit-i:#8FC894; --cat-egg:#331F14; --cat-egg-i:#DA9268;
    --cat-meat:#331B22; --cat-meat-i:#E296A8; --cat-drink:#22203A; --cat-drink-i:#A9A6DA;
    --shadow:0 1px 2px rgba(0,0,0,.4), 0 14px 30px -18px rgba(0,0,0,.7);
    --shadow-card:0 1px 2px rgba(0,0,0,.5), 0 20px 34px -22px rgba(0,0,0,.8);

    /* ADDED, themed */
    --line-strong:#7F7278;
    --warn:#E0B060;
    --danger:#F2A8A3;
    --focus:#E9A7BB;
    --chart-line:#E9A7BB;       /* --visnja (#8A2444) is only 2.0:1 on the dark surface; the ink tint is 8.7:1 */
    --tape:rgba(233,167,187,.22);
    --tape-line:rgba(233,167,187,.3);
    --shadow-snap:0 6px 14px -8px rgba(0,0,0,.7);
    --shadow-btn:0 12px 22px -14px rgba(0,0,0,.8);
    --shadow-app:0 8px 16px -10px rgba(0,0,0,.7);
    --seg-track:var(--surface);
    --seg-active:var(--line);
  }
}


/* --------------------------------------------------------------------------
   4. Dark theme, forced. Identical declarations to block 3. The mock's version omitted --shadow and --shadow-card.
   -------------------------------------------------------------------------- */
:root[data-theme="dark"],
[data-theme="dark"]{
  color-scheme:dark;

  --bg:#161113; --surface:#211A1D; --raise:#271F22;
  --ink:#F3ECEE; --ink-2:#D6CCD0; --muted:#A99CA1;
  --line:#332A2E; --line-2:#2A2226;
  --visnja:#8A2444; --visnja-ink:#E9A7BB; --mark:#E9A7BB; --save:#57C98A; --save-ink:#7FD8A5;
  --cat-milk:#20323C; --cat-milk-i:#9FC6DA; --cat-bread:#33291A; --cat-bread-i:#D6AD6E;
  --cat-fruit:#20301F; --cat-fruit-i:#8FC894; --cat-egg:#331F14; --cat-egg-i:#DA9268;
  --cat-meat:#331B22; --cat-meat-i:#E296A8; --cat-drink:#22203A; --cat-drink-i:#A9A6DA;
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 14px 30px -18px rgba(0,0,0,.7);
  --shadow-card:0 1px 2px rgba(0,0,0,.5), 0 20px 34px -22px rgba(0,0,0,.8);

  --line-strong:#7F7278;
  --warn:#E0B060;
  --danger:#F2A8A3;
  --focus:#E9A7BB;
  --chart-line:#E9A7BB;
  --tape:rgba(233,167,187,.22);
  --tape-line:rgba(233,167,187,.3);
  --shadow-snap:0 6px 14px -8px rgba(0,0,0,.7);
  --shadow-btn:0 12px 22px -14px rgba(0,0,0,.8);
  --shadow-app:0 8px 16px -10px rgba(0,0,0,.7);
  --seg-track:var(--surface);
  --seg-active:var(--line);
}


/* --------------------------------------------------------------------------
   5. Category tints. One class sets the pair a tile, a pinned frame or a thumbnail reads.
      Mock tint map: Mlijeko milk, Kruh bread, Voće fruit, Jaja egg, Meso meat, Povrće fruit, Piće drink, Grickalice egg.
   -------------------------------------------------------------------------- */
.tint-milk {--tint:var(--cat-milk);  --tint-i:var(--cat-milk-i)}
.tint-bread{--tint:var(--cat-bread); --tint-i:var(--cat-bread-i)}
.tint-fruit{--tint:var(--cat-fruit); --tint-i:var(--cat-fruit-i)}
.tint-egg  {--tint:var(--cat-egg);   --tint-i:var(--cat-egg-i)}
.tint-meat {--tint:var(--cat-meat);  --tint-i:var(--cat-meat-i)}
.tint-veg  {--tint:var(--cat-fruit); --tint-i:var(--cat-fruit-i)}
.tint-drink{--tint:var(--cat-drink); --tint-i:var(--cat-drink-i)}
.tint-snack{--tint:var(--cat-egg);   --tint-i:var(--cat-egg-i)}