/* =============================================================
   Design tokens — Služby Bystřice
   Brand: yellow #FFF200, blue #3151AB, dark #231F20, light #F4F4F4
   Contrasts verified per WCAG 2.2 AA (see THEME-SPEC §4.2)
   ============================================================= */
:root {
  /* ——— BRAND BASE (from logo) ——— */
  --c-yellow:      #FFF200;   /* primary yellow – ACCENT, never text on white */
  --c-blue:        #3151AB;   /* primary blue */
  --c-ink:         #231F20;   /* dark / main text */
  --c-surface:     #F4F4F4;   /* light section background */
  --c-white:       #FFFFFF;

  /* ——— BLUE SCALE ——— */
  --c-blue-900:    #16224A;   /* hero overlay, footer background */
  --c-blue-800:    #20316E;
  --c-blue-700:    #283F8A;   /* primary button hover; in-text links */
  --c-blue-600:    #3151AB;   /* = brand blue, default links/btn */
  --c-blue-500:    #3F63C4;   /* active state, focus on dark (only ≥16px) */
  --c-blue-300:    #9DB0E0;
  --c-blue-100:    #E2E8F7;
  --c-blue-050:    #F0F3FB;

  /* ——— YELLOW SCALE ——— */
  --c-yellow-bright: #FFF200;
  --c-yellow-deep:   #E0CC00; /* yellow button hover */
  --c-yellow-edge:   #C9B600; /* yellow edge/icon ON WHITE where ≥3:1 */

  /* ——— NEUTRAL GRAYS ——— */
  --c-gray-900:    #231F20;
  --c-gray-800:    #34302F;
  --c-gray-700:    #4A4646;   /* preferred muted text on white (8.8:1) */
  --c-gray-600:    #5F5B5B;   /* min. for body text on white (6.0:1) */
  --c-gray-500:    #767272;   /* placeholder, large text / UI only */
  --c-gray-400:    #A6A2A2;
  --c-gray-300:    #CFCBCB;
  --c-gray-200:    #E6E3E3;
  --c-gray-100:    #F4F4F4;

  /* ——— STATE COLORS (AA-tuned) ——— */
  --c-success:     #1E7A4B;   /* "belongs/YES" */
  --c-success-bg:  #E7F4EE;
  --c-danger:      #B3261E;   /* "does not belong/NO", errors */
  --c-danger-bg:   #FBEAE9;
  --c-warning:     #8A5A00;   /* text on yellow background */
  --c-warning-bg:  #FFF7CC;
  --c-info:        #283F8A;
  --c-info-bg:     #E2E8F7;

  /* ——— SEMANTIC ALIASES ——— */
  --color-text:        var(--c-ink);
  --color-text-muted:  var(--c-gray-700);
  --color-bg:          var(--c-white);
  --color-bg-alt:      var(--c-surface);
  --color-link:        var(--c-blue-700);
  --color-link-hover:  var(--c-blue-900);
  --color-border:      var(--c-gray-300);
  --color-focus:       #1F3B9E;   /* focus ring – ≥3:1 on both white and yellow */

  /* ——— TYPOGRAPHY ——— */
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-heading: var(--font-sans);
  --font-mono: ui-monospace, "SFMono-Regular", "Cascadia Code", Consolas, monospace;

  --fs-xs:   0.75rem;   --fs-sm:   0.875rem;  --fs-base: 1rem;
  --fs-md:   1.125rem;  --fs-lg:   1.25rem;   --fs-xl:   1.5625rem;
  --fs-2xl:  1.953rem;  --fs-3xl:  2.441rem;  --fs-4xl:  3.052rem;
  --fs-h1: clamp(1.953rem, 1.3rem + 2.6vw, 3.052rem);
  --fs-h2: clamp(1.5625rem, 1.2rem + 1.5vw, 2.441rem);
  --fs-h3: clamp(1.25rem, 1.05rem + 0.9vw, 1.953rem);
  --lh-tight: 1.15; --lh-snug: 1.3; --lh-normal: 1.6; --lh-relaxed: 1.7;
  --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700;
  --ls-heading: -0.01em; --ls-caps: 0.06em;

  /* ——— SPACING (base 4px) ——— */
  --sp-1: 0.25rem; --sp-2: 0.5rem; --sp-3: 0.75rem; --sp-4: 1rem;
  --sp-5: 1.5rem; --sp-6: 2rem; --sp-8: 3rem; --sp-10: 4rem; --sp-12: 6rem;

  /* ——— RADII / SHADOWS ——— */
  --radius-sm: 4px; --radius: 8px; --radius-lg: 14px; --radius-pill: 999px;
  --shadow-1: 0 1px 2px rgba(35,31,32,.06), 0 1px 3px rgba(35,31,32,.08);
  --shadow-2: 0 2px 6px rgba(35,31,32,.08), 0 6px 16px rgba(35,31,32,.08);
  --shadow-focus: 0 0 0 3px rgba(31,59,158,.35);

  /* ——— LAYOUT ——— */
  --container: 1200px; --container-narrow: 760px;
  --gutter: var(--sp-4); --gutter-lg: var(--sp-6);
  --header-h: 64px; --header-h-lg: 80px;

  /* ——— MOTION ——— */
  --t-fast: .12s; --t-base: .2s; --t-slow: .35s; --ease: cubic-bezier(.2,.0,.2,1);

  /* ——— ICONS ——— */
  --icon-size: 1.5rem;
}