/* ============================================================
   AUTOSKLO RUSOVCE — Design tokens
   Sesterský systém k SERVIS PC (rovnaká kostra, písma a tvar),
   ale celý web je tmavý a značková farba je sklená tyrkysová —
   farba, akú má hrana čelného skla pri pohľade z boku.
   ============================================================ */

:root {
  /* --- Značková tyrkysová (500 = farba v logu) -------------- */
  --teal-50:  #E7F8F7;
  --teal-100: #C6EFEC;
  --teal-200: #9BE2DD;
  --teal-300: #5FCDC6;   /* primárna na tmavom — 9.6:1 na --dark-surface */
  --teal-400: #2FB5AD;
  --teal-500: #1A9C95;   /* BRAND — obrys v logu */
  --teal-600: #137D78;
  --teal-700: #0E605C;
  --teal-800: #0A4542;
  --teal-900: #06302E;
  --teal-950: #031A19;   /* text na tyrkysovom tlačidle — 10.4:1 */

  /* --- Tmavé povrchy (celý web) ----------------------------- */
  --dark-surface:   #071113;   /* pozadie stránky */
  --dark-alt:       #0A171A;   /* striedané sekcie */
  --dark-elevated:  #0F1F22;   /* karty */
  --dark-border:    #1B3237;
  --dark-border-strong: #2C4A50;

  --neutral-0:   #FFFFFF;
  --text-soft:   #D6E2E3;      /* navigácia, sekundárny text */
  --text-muted:  #BCCDCF;      /* drobný text — svetlejší kvôli čitateľnosti, 12:1 na #071113 */

  /* Farba kamienka v ilustrácii a v kalkulačke — nie na text */
  --chip: #F2B84B;

  /* --- Sémantické role --------------------------------------- */
  --color-primary:        var(--teal-300);
  --color-primary-hover:  var(--teal-200);
  --color-primary-active: var(--teal-400);
  --color-on-primary:     var(--teal-950);
  --color-primary-subtle: rgb(95 205 198 / 0.12);

  --color-background:    var(--dark-surface);
  --color-surface:       var(--dark-alt);
  --color-card:          var(--dark-elevated);
  --color-foreground:    var(--neutral-0);
  --color-muted-fg:      var(--text-muted);
  --color-border:        var(--dark-border);
  --color-border-strong: var(--dark-border-strong);

  --color-success: #4ADE80;
  --color-danger:  #F87171;

  --color-ring: var(--teal-300);

  /* --- Typografia (rovnaká ako SERVIS PC) -------------------- */
  --font-heading: "Montserrat", ui-sans-serif, system-ui, -apple-system,
                  "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-body:    var(--font-heading);
  --font-accent:  "Roboto Slab", ui-serif, Georgia, "Times New Roman", serif;
  --font-numeric: var(--font-accent);
  --font-hud:     ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  --text-xs:   0.75rem;
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-lg:   1.125rem;
  --text-xl:   1.375rem;
  --text-2xl:  1.75rem;
  --text-3xl:  2.25rem;
  --text-4xl:  3rem;

  --leading-tight: 1.15;
  --leading-snug:  1.35;
  --leading-body:  1.6;

  --weight-regular: 400;
  --weight-medium:  500;
  --weight-semibold:600;
  --weight-bold:    700;

  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-24: 6rem;

  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-lg:   16px;
  --radius-pill: 999px;

  --shadow-lg: 0 16px 40px rgb(0 0 0 / 0.45);

  --container: 1200px;
  --measure:   68ch;

  --ease-out:   cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast:   150ms;
  --dur-base:   250ms;
  --dur-slow:   400ms;

  --z-header: 200;
  --z-toast: 1100;

  color-scheme: dark;
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur-fast: 1ms; --dur-base: 1ms; --dur-slow: 1ms; }
}