/* ==========================================================================
   Control Smart Systems — Servis pre domácnosti a firmy
   tokens.css — the single source of design truth.

   Geometry, rhythm and shape follow the Handyflow "Home V2" reference.
   Accent colour follows the CSS brand system (brand/brand-guidelines.md §5):
   #0F58BE replaces Handyflow's #0964FC because the brand accent passes
   WCAG AA on white (6.6:1) and #0964FC does not (~3.9:1).
   ========================================================================== */

:root {
  /* --- Surface & ink ---------------------------------------------------- */
  --ink:            #0A1642;   /* headings, dark sections            */
  --ink-deep:       #0D1E5C;   /* the deeper navy panel               */
  --ink-veil:       rgba(10, 22, 66, 0.62);  /* image scrims          */
  --paper:          #FFFFFF;
  --mist:           #F7F9FC;   /* stat strip, alternating bands       */
  --mist-2:         #EFF1F6;   /* dividers on mist, input fills       */
  --hairline:       #E1E6EF;

  /* --- Accent (CSS brand) ----------------------------------------------- */
  --accent:         #0F58BE;
  --accent-press:   #0C447C;
  --accent-on-ink:  #4A8FE0;   /* accent legible on navy              */
  --accent-wash:    #EAF1FB;   /* 8% accent on white, for chips       */

  /* --- Text ------------------------------------------------------------- */
  --text:           #0A1642;
  --text-muted:     #5C6E94;   /* 5.1:1 on white — AA body            */
  --text-on-ink:    #FFFFFF;
  --text-on-ink-muted: #A9B7D6; /* 6.4:1 on --ink — AA body           */

  /* --- Feedback --------------------------------------------------------- */
  --danger:         #B3261E;
  --danger-wash:    #FDECEA;
  --ok:             #106B45;
  --ok-wash:        #E7F4EE;

  /* --- Type ------------------------------------------------------------- */
  --font-sans: "Onest", -apple-system, BlinkMacSystemFont, "Segoe UI",
               "Helvetica Neue", Arial, sans-serif;

  --fs-display: clamp(2.75rem, 1.30rem + 5.30vw, 5.125rem);  /*  44 →  82 */
  --fs-h2:      clamp(2.00rem, 0.95rem + 3.80vw, 4.000rem);  /*  32 →  64 */
  --fs-h3:      clamp(1.50rem, 1.16rem + 1.25vw, 2.125rem);  /*  24 →  34 */
  --fs-h4:      clamp(1.25rem, 1.10rem + 0.55vw, 1.500rem);  /*  20 →  24 */
  --fs-stat:    clamp(2.50rem, 1.60rem + 3.25vw, 4.000rem);  /*  40 →  64 */
  --fs-lead:    clamp(1.0625rem, 1.00rem + 0.30vw, 1.250rem);/*  17 →  20 */
  --fs-body:    clamp(1.0000rem, 0.96rem + 0.20vw, 1.125rem);/*  16 →  18 */
  --fs-sm:      1rem;
  --fs-xs:      0.875rem;

  --lh-display: 1.06;
  --lh-heading: 1.14;
  --lh-body:    1.56;

  --tracking-display: -0.035em;   /* floor is -0.04em                  */
  --tracking-heading: -0.025em;
  --tracking-label:    0.10em;

  /* --- Space (4px base) -------------------------------------------------- */
  --sp-1:  0.25rem;
  --sp-2:  0.5rem;
  --sp-3:  0.75rem;
  --sp-4:  1rem;
  --sp-5:  1.5rem;
  --sp-6:  2rem;
  --sp-7:  2.5rem;
  --sp-8:  3rem;
  --sp-9:  4rem;
  --sp-10: 5rem;
  --sp-11: 6rem;
  --sp-12: 8rem;

  /* Section rhythm — 200px desktop in the reference, fluid down to 88px */
  --section-y: clamp(5.5rem, 2.2rem + 9.5vw, 12.5rem);

  /* --- Layout ------------------------------------------------------------ */
  --container:  1288px;
  --container-narrow: 848px;
  --gutter:     clamp(1.25rem, 0.9rem + 1.6vw, 1.5rem);
  --nav-h:      88px;

  /* --- Shape -------------------------------------------------------------- */
  --r-xs:   4px;
  --r-sm:   8px;
  --r-md:  12px;
  --r-lg:  16px;
  --r-xl:  24px;
  --r-pill: 300px;

  /* --- Depth (offset + blur, never a flat halo) --------------------------- */
  --shadow-sm: 0 1px 2px rgba(10, 22, 66, 0.06),
               0 2px 8px rgba(10, 22, 66, 0.05);
  --shadow-md: 0 2px 4px rgba(10, 22, 66, 0.05),
               0 12px 28px rgba(10, 22, 66, 0.09);
  --shadow-lg: 0 4px 8px rgba(10, 22, 66, 0.05),
               0 28px 64px rgba(10, 22, 66, 0.14);
  --shadow-accent: 0 4px 10px rgba(15, 88, 190, 0.20),
                   0 16px 36px rgba(15, 88, 190, 0.24);

  /* --- Motion -------------------------------------------------------------- */
  --ease-out:  cubic-bezier(0.16, 1, 0.30, 1);   /* exponential out      */
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 160ms;
  --dur:      280ms;
  --dur-slow: 560ms;

  --focus-ring: 0 0 0 3px var(--paper), 0 0 0 6px var(--accent);
  --focus-ring-on-ink: 0 0 0 3px var(--ink), 0 0 0 6px var(--accent-on-ink);
}