/* =========================================================
   Tavacena · v1.0
   Design tokens for a modern, light price-comparison portal.
   Inspired by 220.lv (vivid blue) + ceno.lv (clean white, green savings).
   Variable prefix: --tc-
   ========================================================= */

:root {
  /* ---------- Color · surfaces & ink (cool, light, airy) ---------- */
  --tc-bg:        #f4f6fa; /* page background — soft cool gray */
  --tc-surface:   #ffffff; /* cards, inputs, header */
  --tc-surface-2: #eef1f6; /* image wells, subtle fills, placeholders */
  --tc-ink:       #131720; /* primary text */
  --tc-ink-soft:  #545c6b; /* secondary text, nav */
  --tc-ink-mute:  #8a93a3; /* tertiary text, metadata */
  --tc-line:      #e5e9f0; /* borders, dividers */
  --tc-line-soft: #eef1f6; /* lightest dividers */

  /* ---------- Color · brand (vivid blue — 220.lv energy) ---------- */
  --tc-brand:        #0b63f6; /* primary actions, links, focus, logo */
  --tc-brand-strong: #0a52cf; /* hover / pressed */
  --tc-brand-ink:    #0a4ec4; /* brand-colored text on light bg */
  --tc-brand-wash:   #eaf1fe; /* tint: hover bg, sponsored, highlight */
  --tc-on-brand:     #ffffff; /* text/icon on brand fill */

  /* ---------- Color · accents · status (ceno.lv green + commerce) ---------- */
  --tc-save:       #11a14f; /* lowest price, savings, in-stock */
  --tc-save-ink:   #0c7f3e; /* savings text on light */
  --tc-save-wash:  #e6f6ec; /* savings/in-stock tint */
  --tc-warn:       #c97a00; /* low stock */
  --tc-warn-wash:  #fdf2e0;
  --tc-sale:       #e5484d; /* discount %, sold out, errors */
  --tc-sale-wash:  #fde9ea;

  /* ---------- Type ---------- */
  --tc-font:         'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --tc-font-display: 'Inter Tight', 'Inter', system-ui, sans-serif;

  /* tracking tokens */
  --tc-tracking-tight: -0.025em; /* display */
  --tc-tracking-snug:  -0.012em; /* headings, prices */
  --tc-tracking-flat:   0;
  --tc-tracking-wide:   0.04em;  /* small caps labels */

  /* ---------- Spacing — 4px base ---------- */
  --tc-s-1:   4px;
  --tc-s-2:   8px;
  --tc-s-3:  12px;
  --tc-s-4:  16px;
  --tc-s-5:  20px;
  --tc-s-6:  24px;
  --tc-s-8:  32px;
  --tc-s-10: 40px;
  --tc-s-12: 48px;
  --tc-s-14: 56px;
  --tc-s-16: 64px;
  --tc-s-20: 80px;

  /* ---------- Radii — modern, generous ---------- */
  --tc-r-sm:   8px;  /* badges, small marks */
  --tc-r-md:  12px;  /* buttons, inputs, chips inner */
  --tc-r-lg:  16px;  /* cards */
  --tc-r-xl:  22px;  /* large surfaces, sheets */
  --tc-r-pill: 999px;

  /* ---------- Shadows — soft, cool, layered ---------- */
  --tc-shadow-xs:    0 1px 2px rgba(19,23,32,.05);
  --tc-shadow-sm:    0 1px 3px rgba(19,23,32,.06), 0 1px 2px rgba(19,23,32,.04);
  --tc-shadow-md:    0 6px 16px rgba(19,23,32,.08), 0 2px 6px rgba(19,23,32,.04);
  --tc-shadow-lg:    0 18px 44px rgba(19,23,32,.12), 0 6px 14px rgba(19,23,32,.06);
  --tc-shadow-brand: 0 10px 26px rgba(11,99,246,.30);
  --tc-ring:         0 0 0 4px rgba(11,99,246,.16); /* focus halo */

  /* ---------- Borders ---------- */
  --tc-border:        1px solid var(--tc-line);
  --tc-border-soft:   1px solid var(--tc-line-soft);
  --tc-border-brand:  1px solid var(--tc-brand);

  /* ---------- Motion ---------- */
  --tc-ease:     cubic-bezier(0.2, 0.7, 0.2, 1);
  --tc-dur-fast: 120ms;
  --tc-dur-base: 200ms;
  --tc-dur-slow: 320ms;

  /* ---------- Layout ---------- */
  --tc-max-page:   1500px;
  --tc-max-search:  760px;
  --tc-gutter-sm:   16px;
  --tc-gutter-md:   32px;
  --tc-gutter-lg:   48px;
}