/* ============================================================
   KreditkaBezÚroků.cz — Foundations
   Colors, type, spacing, radii, shadow, motion tokens.
   Load this in every artifact. CDN fonts at the top.
   ============================================================ */

@import url("https://fonts.googleapis.com/css2?family=Source+Serif+4:ital,opsz,wght@0,8..60,300..900;1,8..60,300..900&family=Geist:wght@300..800&family=JetBrains+Mono:wght@400;500;600&display=swap");

:root {
  /* -------- Color: brand -------- */
  --ink-navy:        #0F2A4A;  /* primary; type, buttons, mark */
  --ink-navy-2:      #0A1F38;  /* hover/darker */
  --ink-navy-3:      #061528;  /* press */
  --ink:             #0A1929;  /* near-black for body type */

  --brass:           #B8895C;  /* accent — returned money, underlines */
  --brass-2:         #A87749;  /* hover */
  --brass-tint:      #F2E7D7;  /* tinted background flashes */

  /* -------- Color: surfaces -------- */
  --paper:           #F7F3EC;  /* default page background */
  --paper-2:         #EFE9DD;  /* nested zones, subtle alt rows */
  --card:            #FFFFFF;  /* elevated cards on paper */
  --ink-surface:     #0F2A4A;  /* navy surfaces (footer, dark CTAs) */

  /* -------- Color: warm-tinted neutrals -------- */
  --neutral-50:      #FAF7F1;
  --neutral-100:     #F1ECE2;
  --neutral-200:     #E8E1D4;
  --neutral-300:     #D6CCBA;
  --neutral-400:     #A89F8E;
  --neutral-500:     #756E61;
  --neutral-600:     #4F4A41;
  --neutral-700:     #2E2B25;
  --neutral-900:     #1A1A1A;

  /* -------- Color: semantic (institutional palette) -------- */
  --success:         #1F5D3A;
  --success-tint:    #DCE9DF;
  --warning:         #A86A28;
  --warning-tint:    #F3E5CC;
  --danger:          #8C2A2A;
  --danger-tint:     #EDD5D5;
  --info:            #2C4F77;
  --info-tint:       #DDE4EE;

  /* -------- Foreground roles (use these in components) -------- */
  --fg-strong:       var(--ink);          /* headings, primary text */
  --fg:              var(--neutral-700);  /* body */
  --fg-muted:        var(--neutral-500);  /* helper, captions */
  --fg-faint:        var(--neutral-400);  /* placeholder, disabled */
  --fg-on-ink:       #F1ECE2;             /* type on navy surfaces */
  --fg-on-ink-muted: #A8B4C6;

  /* -------- Border roles -------- */
  --border-faint:    var(--neutral-200);  /* default hairline */
  --border:          var(--neutral-300);
  --border-strong:   var(--neutral-400);

  /* -------- Type: families -------- */
  --font-display:    "Source Serif 4", "Source Serif Pro", "Noto Serif", Georgia, serif;
  --font-body:       "Geist", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono:       "JetBrains Mono", "SF Mono", Menlo, Consolas, monospace;

  /* -------- Type: size scale (px) -------- */
  --fs-12:  0.75rem;     /* 12 — caption, legal microcopy */
  --fs-14:  0.875rem;    /* 14 — small UI */
  --fs-16:  1rem;        /* 16 — body */
  --fs-18:  1.125rem;    /* 18 — body large */
  --fs-21:  1.3125rem;   /* 21 — lead paragraph */
  --fs-24:  1.5rem;      /* 24 — h4 */
  --fs-30:  1.875rem;    /* 30 — h3 */
  --fs-36:  2.25rem;     /* 36 — h2 */
  --fs-48:  3rem;        /* 48 — h1 mobile */
  --fs-60:  3.75rem;     /* 60 — h1 desktop */
  --fs-72:  4.5rem;      /* 72 — display */

  /* -------- Type: weights -------- */
  --fw-regular:      400;
  --fw-medium:       500;
  --fw-semibold:     600;
  --fw-bold:         700;

  /* -------- Type: leading -------- */
  --lh-tight:        1.1;
  --lh-display:      1.15;
  --lh-snug:         1.35;
  --lh-body:         1.55;
  --lh-loose:        1.7;

  /* -------- Type: tracking -------- */
  --tracking-tight:  -0.01em;
  --tracking-normal: 0;
  --tracking-wide:   0.06em;     /* eyebrow small-caps */

  /* -------- Spacing: 4px grid -------- */
  --space-0:   0;
  --space-px:  1px;
  --space-1:   0.25rem;   /*  4 */
  --space-2:   0.5rem;    /*  8 */
  --space-3:   0.75rem;   /* 12 */
  --space-4:   1rem;      /* 16 */
  --space-5:   1.25rem;   /* 20 */
  --space-6:   1.5rem;    /* 24 */
  --space-8:   2rem;      /* 32 */
  --space-10:  2.5rem;    /* 40 */
  --space-12:  3rem;      /* 48 */
  --space-16:  4rem;      /* 64 */
  --space-20:  5rem;      /* 80 */
  --space-24:  6rem;      /* 96 */
  --space-32:  8rem;      /* 128 */

  /* -------- Radius -------- */
  --radius-none:  0;
  --radius-sm:    2px;
  --radius:       4px;     /* default */
  --radius-md:    6px;     /* buttons */
  --radius-lg:    8px;     /* prominent cards */
  --radius-pill:  9999px;  /* badges only, never buttons */

  /* -------- Shadow / elevation -------- */
  --shadow-none:   none;
  --shadow-card:   0 1px 2px rgba(15, 42, 74, 0.04), 0 4px 12px rgba(15, 42, 74, 0.06);
  --shadow-hover:  0 2px 4px rgba(15, 42, 74, 0.06), 0 12px 32px rgba(15, 42, 74, 0.08);
  --shadow-modal:  0 8px 16px rgba(15, 42, 74, 0.08), 0 32px 64px rgba(15, 42, 74, 0.18);
  --rule:          inset 0 -1px 0 var(--border-faint);  /* sticky header bottom rule */

  /* -------- Motion -------- */
  --ease-out:      cubic-bezier(0.2, 0, 0, 1);
  --ease-in:       cubic-bezier(0.4, 0, 1, 1);
  --ease-in-out:   cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast:      120ms;
  --dur:           180ms;
  --dur-slow:      240ms;
  --dur-page:      320ms;

  /* -------- Layout widths -------- */
  --w-content:     1200px;
  --w-prose:       720px;
  --w-app:         1280px;
  --w-sidebar:     240px;
  --h-header:      72px;
  --h-header-sm:   56px;
}

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

/* ============================================================
   Element base styles — apply by default
   ============================================================ */

*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-16);
  line-height: var(--lh-body);
  color: var(--fg);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: "ss01", "cv11";  /* refined alt forms in Geist */
}

/* ---- Headings: serif, sentence case ---- */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--fg-strong);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-tight);
  line-height: var(--lh-display);
  margin: 0;
  text-wrap: balance;
}

h1 {
  font-size: clamp(var(--fs-48), 5vw + 1rem, var(--fs-72));
  line-height: var(--lh-tight);
}
h2 { font-size: clamp(var(--fs-30), 2.5vw + 0.5rem, var(--fs-48)); }
h3 { font-size: var(--fs-30); line-height: var(--lh-snug); }
h4 { font-size: var(--fs-24); line-height: var(--lh-snug); }

/* ---- Body type ---- */
p { margin: 0; text-wrap: pretty; }
.lead { font-size: var(--fs-21); line-height: var(--lh-snug); color: var(--neutral-600); }
.body-lg { font-size: var(--fs-18); }
.small { font-size: var(--fs-14); }
.caption { font-size: var(--fs-12); color: var(--fg-muted); }

/* ---- Eyebrow label (rare) ---- */
.eyebrow {
  font-family: var(--font-body);
  font-size: var(--fs-12);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--brass-2);
}

/* ---- Links ---- */
a {
  color: var(--ink-navy);
  text-decoration-line: underline;
  text-decoration-color: var(--brass);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
  transition: color var(--dur) var(--ease-out);
}
a:hover { color: var(--brass-2); }

/* ---- Mono numerics — for tables of money ---- */
.tabular { font-variant-numeric: tabular-nums; }
.mono    { font-family: var(--font-mono); }

/* ---- Horizontal rule (institutional) ---- */
hr {
  border: 0;
  border-top: 1px solid var(--border-faint);
  margin: var(--space-12) 0;
}

/* ============================================================
   Semantic shortcuts — match what designers reach for
   ============================================================ */

.fg-strong { color: var(--fg-strong); }
.fg        { color: var(--fg); }
.fg-muted  { color: var(--fg-muted); }
.fg-brass  { color: var(--brass-2); }
.fg-navy   { color: var(--ink-navy); }
.fg-success{ color: var(--success); }
.fg-danger { color: var(--danger); }

.bg-paper  { background: var(--paper); }
.bg-card   { background: var(--card); }
.bg-ink    { background: var(--ink-surface); color: var(--fg-on-ink); }
.bg-brass  { background: var(--brass-tint); }