/* ============================================================
   FINVOX — DESIGN TOKENS
   Single source of truth. Every other stylesheet imports this.
   ============================================================ */

/* Vnořený @import na písma je tu záměrně vypnutý: v aplikaci žádné `ds/fonts/`
   nejsou (písma leží ve `webapp/fonts/` a hlásí je přímo `index.html`), takže
   by se při každém otevření sháněl soubor, který neexistuje. Při kopírování
   novější verze design systému tenhle řádek zase vypni.
   @import url("./fonts/fonts.css"); */

:root {
  /* ---------- BRAND COLOR ---------- */
  /* From official Pantone reference (FINVOX_LOGO_barevnost.pdf) */
  --fx-navy:        #141C52;   /* Pantone 2766C — primary */
  --fx-gold:        #BD9C67;   /* Pantone 7562C — secondary */

  /* Tints/shades — derived, governed */
  --fx-navy-900:    #0A1038;   /* deeper, rare; reserved for hero darks */
  --fx-navy-800:    #141C52;   /* = brand navy */
  --fx-navy-700:    #232C6A;
  --fx-navy-600:    #3A4382;
  --fx-navy-500:    #5B649C;
  --fx-navy-400:    #7B84AE;   /* nejsvětlejší navy, která ještě splní 3:1 na bílé i na F2F3F8 */
  --fx-navy-300:    #A6ADC9;
  --fx-navy-100:    #E2E4ED;
  --fx-navy-050:    #F2F3F8;

  --fx-gold-700:    #866840;
  --fx-gold-600:    #A48656;
  --fx-gold-500:    #BD9C67;   /* = brand gold */
  --fx-gold-300:    #D8C29C;
  --fx-gold-100:    #F1E8D6;
  --fx-gold-050:    #FAF6EC;

  /* ---------- NEUTRAL ---------- */
  --fx-ink:         #141C52;   /* body text on light = navy */
  --fx-ink-muted:   #5B649C;
  --fx-ink-subtle:  #8A91B0;

  --fx-paper:       #FFFFFF;
  --fx-paper-warm:  #FAF7F1;   /* warm cream — section break */
  --fx-paper-cool:  #F2F3F8;   /* cool tint — alt section */

  --fx-line:        #E2E4ED;
  --fx-line-strong: #C4C8D9;

  /* ---------- FUNCTIONAL ---------- */
  --fx-success:     #276849;
  --fx-warning:     #7F5A18;
  --fx-danger:      #A33A3A;
  --fx-info:        #3A4382;

  /* ---------- TYPE FAMILIES ---------- */
  /* Display = Josefin Sans (geometric, tall x-height, used in logo) */
  --fx-font-display: "Josefin Sans", "Helvetica Neue", Arial, sans-serif;
  /* Text = Work Sans (humanist, legible at small sizes) */
  --fx-font-text:    "Work Sans", "Helvetica Neue", Arial, sans-serif;

  /* ---------- TYPE SCALE (1.25 major third, snapped) ---------- */
  --fx-text-12: 0.75rem;   /* 12 — micro */
  --fx-text-14: 0.875rem;  /* 14 — small */
  --fx-text-16: 1rem;      /* 16 — body */
  --fx-text-18: 1.125rem;  /* 18 — body large */
  --fx-text-20: 1.25rem;   /* 20 — lede */
  --fx-text-24: 1.5rem;    /* 24 — h5 */
  --fx-text-30: 1.875rem;  /* 30 — h4 */
  --fx-text-38: 2.375rem;  /* 38 — h3 */
  --fx-text-48: 3rem;      /* 48 — h2 */
  --fx-text-64: 4rem;      /* 64 — h1 */
  --fx-text-80: 5rem;      /* 80 — display */

  /* ---------- LINE HEIGHT ---------- */
  --fx-leading-tight:   1.05;
  --fx-leading-snug:    1.2;
  --fx-leading-normal:  1.5;
  --fx-leading-loose:   1.7;

  /* ---------- TRACKING ---------- */
  --fx-track-display: -0.01em;
  --fx-track-eyebrow: 0.18em;   /* ALL-CAPS eyebrows like "ZÁKLADNÍ BAREVNOST" */
  --fx-track-button:  0.06em;
  --fx-track-text:    0;

  /* ---------- SPACING (4px base) ---------- */
  --fx-space-1:  4px;
  --fx-space-2:  8px;
  --fx-space-3:  12px;
  --fx-space-4:  16px;
  --fx-space-5:  20px;
  --fx-space-6:  24px;
  --fx-space-8:  32px;
  --fx-space-10: 40px;
  --fx-space-12: 48px;
  --fx-space-16: 64px;
  --fx-space-20: 80px;
  --fx-space-24: 96px;
  --fx-space-32: 128px;

  /* ---------- RADII ---------- */
  --fx-radius-sm: 4px;
  --fx-radius-md: 8px;
  --fx-radius-lg: 14px;
  --fx-radius-xl: 22px;
  --fx-radius-pill: 999px;

  /* ---------- ELEVATION ---------- */
  /* Conservative, navy-tinted shadows. Financial services = restraint. */
  --fx-shadow-1: 0 1px 2px rgba(20, 28, 82, 0.06),
                 0 1px 3px rgba(20, 28, 82, 0.04);
  --fx-shadow-2: 0 4px 8px rgba(20, 28, 82, 0.06),
                 0 2px 4px rgba(20, 28, 82, 0.04);
  --fx-shadow-3: 0 10px 24px rgba(20, 28, 82, 0.10),
                 0 4px 8px rgba(20, 28, 82, 0.06);
  --fx-shadow-4: 0 24px 48px rgba(20, 28, 82, 0.14),
                 0 8px 16px rgba(20, 28, 82, 0.08);

  /* ---------- LAYOUT ---------- */
  --fx-container: 1200px;
  --fx-container-wide: 1320px;
  --fx-gutter: 24px;

  /* ---------- MOTION ---------- */
  --fx-ease-out:   cubic-bezier(0.22, 1, 0.36, 1); /* @kind other */
  --fx-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); /* @kind other */
  --fx-dur-fast:   140ms; /* @kind other */
  --fx-dur-base:   220ms; /* @kind other */
  --fx-dur-slow:   420ms; /* @kind other */
}