/* ==========================================================================
   tokens.css — otzivi.in.ua design tokens
   Single source of truth for every visual value in the new design layer
   (frontend/web/css/design/components/*.css). Never hard-code colors / sizes
   / weights / shadows / radii in a component file — reference a token here.

   Light is the default theme (:root). Dark is the opt-in override under
   html[data-theme="dark"] — see .claude/skills/otzivi-design/theme-toggle.md
   for the toggle mechanism these tokens plug into.

   Loaded LAST in <head> (after the legacy theme/style.css + bootsnav.css
   links in frontend/views/layouts/main.php) so this layer wins the cascade
   without needing !important.
   ========================================================================== */

:root {
  /* ── Font families ─────────────────────────────────────────────────────── */
  /* Keep the existing Lato/PT Serif Google Fonts pairing already loaded in
     main.php — brand continuity, validated against ui-ux-pro-max's own
     "trustworthy/professional" pairing suggestions. */
  --otzivi-font-base:    "Lato", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --otzivi-font-display: "PT Serif", Georgia, serif;

  /* ── Font sizes ────────────────────────────────────────────────────────── */
  --otzivi-fs-h1:      42px;
  --otzivi-fs-h1-sm:   30px;   /* ≤720 */
  --otzivi-fs-h2:      32px;
  --otzivi-fs-h2-sm:   24px;   /* ≤720 */
  --otzivi-fs-h3:      22px;
  --otzivi-fs-h3-sm:   19px;   /* ≤720 */
  --otzivi-fs-body:    16px;
  --otzivi-fs-body-sm: 14px;
  --otzivi-fs-label:   13px;
  --otzivi-fs-btn:     15px;

  /* ── Font weights (400/500/600/700/800 only) ──────────────────────────── */
  --otzivi-fw-regular:  400;
  --otzivi-fw-medium:   500;
  --otzivi-fw-semibold: 600;
  --otzivi-fw-bold:     700;
  --otzivi-fw-display:  800;

  /* ── Tracking / leading ────────────────────────────────────────────────── */
  --otzivi-ls-tight: -0.02em;
  --otzivi-ls-snug:  -0.01em;
  --otzivi-ls-base:   0;
  --otzivi-ls-wide:   0.04em;
  --otzivi-lh-display: 1.1;
  --otzivi-lh-heading: 1.2;
  --otzivi-lh-body:    1.6;
  --otzivi-lh-prose:   1.7;

  /* ── Colors (light / default) ─────────────────────────────────────────── */
  --otzivi-bg:              #F8FAFC;
  --otzivi-surface:         #FFFFFF;
  --otzivi-surface-soft:    #F0F9FF;
  --otzivi-text:            #0F172A;
  --otzivi-text-muted:      #475569;
  --otzivi-primary:         #1D4ED8;
  --otzivi-primary-rgb:     29, 78, 216;
  --otzivi-primary-hover:   #2563EB;
  --otzivi-secondary:       #2563EB;
  --otzivi-accent:          #D97706;
  --otzivi-accent-rgb:      217, 119, 6;
  --otzivi-accent-hover:    #B45309;
  --otzivi-border:          #E2E8F0;
  --otzivi-success:         #16A34A;
  --otzivi-danger:          #DC2626;
  --otzivi-danger-rgb:      220, 38, 38;

  /* Theme-independent — used only where white text sits directly on a solid
     accent fill (buttons, badges). --otzivi-accent itself is tuned per theme
     to read well as text/icons/borders (bright gold in dark theme for pop),
     which fails WCAG AA contrast with white fill text (measured ~1.7:1 in
     dark theme, ~3.2:1 in light). This pair is fixed dark enough for white
     text at >=4.5:1 in both themes, so it never needs a dark-theme override. */
  --otzivi-accent-button:       #B45309;
  --otzivi-accent-button-hover: #92400E;
  /* Same problem, same fix, for --otzivi-primary: dark theme's bright
     #60A5FA gives white button text ~2.6:1 (measured) — fails AA badly. */
  --otzivi-primary-button:       #1D4ED8;
  --otzivi-primary-button-hover: #1E40AF;
  /* Same problem, same fix, for --otzivi-success (dark theme's #4ADE80
     against white text is ~1.8:1) and --otzivi-danger (dark theme's #F87171
     against white text is ~2.9:1). */
  --otzivi-success-button:       #15803D;
  --otzivi-danger-button:        #B91C1C;

  /* ── Shadows (light) ──────────────────────────────────────────────────── */
  --otzivi-shadow-sm: 0 1px 2px rgba(15, 23, 42, .06);
  --otzivi-shadow-md: 0 4px 12px rgba(15, 23, 42, .08);
  --otzivi-shadow-lg: 0 12px 32px rgba(15, 23, 42, .12);

  /* ── Radii ─────────────────────────────────────────────────────────────── */
  --otzivi-radius-sm:   8px;
  --otzivi-radius-md:  14px;
  --otzivi-radius-lg:  20px;
  --otzivi-radius-pill: 999px;

  /* ── Spacing scale (pixel-named) ──────────────────────────────────────── */
  --otzivi-space-4:   4px;
  --otzivi-space-8:   8px;
  --otzivi-space-12: 12px;
  --otzivi-space-16: 16px;
  --otzivi-space-24: 24px;
  --otzivi-space-32: 32px;
  --otzivi-space-48: 48px;
  --otzivi-space-64: 64px;
  --otzivi-space-96: 96px;

  /* ── Layout ────────────────────────────────────────────────────────────── */
  --otzivi-container-max: 1200px;
  --otzivi-container-pad: 24px;

  /* ── Breakpoints (reference only — hardcode literal px in @media) ──────── */
  --otzivi-bp-tablet: 980px;
  --otzivi-bp-mobile: 720px;
}

/* ── Dark theme override ────────────────────────────────────────────────── */
html[data-theme="dark"] {
  --otzivi-bg:              #0B1220;
  --otzivi-surface:         #111A2E;
  --otzivi-surface-soft:    #17213A;
  --otzivi-text:            #F1F5F9;
  --otzivi-text-muted:      #94A3B8;
  --otzivi-primary:         #60A5FA;
  --otzivi-primary-rgb:     96, 165, 250;
  --otzivi-primary-hover:   #93C5FD;
  --otzivi-secondary:       #60A5FA;
  --otzivi-accent:          #FBBF24;
  --otzivi-accent-rgb:      251, 191, 36;
  --otzivi-accent-hover:    #FCD34D;
  --otzivi-border:          #223049;
  --otzivi-success:         #4ADE80;
  --otzivi-danger:          #F87171;
  --otzivi-danger-rgb:      248, 113, 113;

  --otzivi-shadow-sm: 0 1px 2px rgba(0, 0, 0, .3);
  --otzivi-shadow-md: 0 4px 12px rgba(0, 0, 0, .4);
  --otzivi-shadow-lg: 0 12px 32px rgba(0, 0, 0, .5);
}