/* ============================================================
   Lab.cafe — Design Tokens
   Source of truth: Lab.cafe Dizajn Manuál 2022
   Typography: Montserrat (Black for headings, Medium for body)
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  /* ---------- Primary palette (from manual p.15 "Primárne farby") ---------- */
  --navy:        #334463;   /* R51  G68  B99   C48 M31 Y0  K61 */
  --red:         #C54933;   /* R197 G73  B51   C0  M63 Y74 K23 — section-title + accent red */
  --ochre:       #CC8A2C;   /* R204 G138 B44   C0  M32 Y78 K20 — signature pattern + CTA */

  /* ---------- Secondary palette (from manual p.16 "Sekundárne farby") ---------- */
  --green:       #347659;   /* R52  G118 B89   C56 M0  Y25 K54 */
  --brown:       #492F22;   /* R73  G47  B34   C0  M36 Y53 K71 */
  --forest:      #253A34;   /* R29  G47  B42   C38 M0  Y32 K82 */

  /* ---------- Neutrals (mono anchors of the brand) ---------- */
  --ink:         #111111;   /* pure black for logo, icon strokes, body text on light */
  --ink-80:      #2A2A2A;
  --ink-60:      #5A5A5A;
  --ink-40:      #8E8E8E;
  --ink-20:      #CFCFCF;
  --ink-10:      #E9E9E9;
  --paper:       #FFFFFF;   /* brand surface is pure white */
  --off-white:   #F7F5F1;   /* subtle sunken fill when needed */

  /* ---------- Tint scale for the navy bubble (for overlays, footers) ---------- */
  --navy-90:     #3F5478;
  --navy-60:     #7B8AA8;
  --navy-20:     #D6DBE5;

  /* ---------- Semantic tokens ---------- */
  --bg:          var(--paper);
  --bg-elev:     var(--paper);
  --bg-sunken:   var(--off-white);
  --bg-inverse:  var(--navy);

  --fg:          var(--ink);
  --fg-soft:     var(--ink-80);
  --fg-mute:     var(--ink-60);
  --fg-inverse:  var(--paper);

  --border:      var(--ink);        /* brand signature — black strokes */
  --border-soft: var(--ink-20);

  --accent:       var(--red);        /* section titles, primary CTAs */
  --accent-warm:  var(--ochre);      /* pattern, highlight, inline marker */
  --accent-cool:  var(--navy);       /* bubble, large areas */

  --success:     var(--green);
  --danger:      var(--red);
  --info:        var(--navy);

  /* ---------- Typography ---------- */
  /* Manual p.19: "Základným písmom je Montserrat.
     Nadpisy — Montserrat Black. Súvislý text — Montserrat Medium." */
  --font-display: 'Montserrat', system-ui, -apple-system, sans-serif;  /* use 900 */
  --font-sans:    'Montserrat', system-ui, -apple-system, sans-serif;  /* use 500 */
  --font-mono:    'JetBrains Mono', 'SF Mono', ui-monospace, monospace;

  --fw-medium:    500;
  --fw-semibold:  600;
  --fw-bold:      700;
  --fw-extrabold: 800;
  --fw-black:     900;

  /* Scale — supports the manual's subhead/body/title rhythm */
  --fs-xs:   12px;
  --fs-sm:   14px;
  --fs-base: 16px;
  --fs-md:   18px;
  --fs-lg:   22px;
  --fs-xl:   28px;
  --fs-2xl:  36px;
  --fs-3xl:  48px;
  --fs-4xl:  64px;
  --fs-5xl:  88px;
  --fs-hero: 120px;

  --lh-tight:  1.00;
  --lh-snug:   1.15;
  --lh-normal: 1.5;
  --lh-loose:  1.7;

  --tracking-tight:   -0.01em;
  --tracking-normal:  0;
  --tracking-wide:    0.04em;
  --tracking-caps:    0.10em;

  /* ---------- Spacing (4px base) ---------- */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  24px;
  --sp-6:  32px;
  --sp-7:  48px;
  --sp-8:  64px;
  --sp-9:  96px;
  --sp-10: 128px;

  /* ---------- Radii ---------- */
  --r-sm:   6px;
  --r-md:   12px;
  --r-lg:   20px;
  --r-xl:   32px;
  --r-pill: 999px;

  /* ---------- Borders ---------- */
  --bw-1: 1.5px;
  --bw-2: 2.5px;    /* matches icon stroke weight */
  --bw-3: 4px;

  /* ---------- Shadows — flat, printed feel ---------- */
  --shadow-sm: 2px 2px 0 0 var(--ink);
  --shadow-md: 4px 4px 0 0 var(--ink);
  --shadow-lg: 8px 8px 0 0 var(--ink);

  /* ---------- Motion ---------- */
  --ease-out:    cubic-bezier(.2,.7,.2,1);
  --ease-spring: cubic-bezier(.34,1.56,.64,1);
  --dur-fast: 120ms;
  --dur-med:  220ms;
  --dur-slow: 420ms;

  /* Logo minimums (manual p.11) */
  --logo-min-digital:        30px;   /* bubble only */
  --logo-min-digital-slogan: 50px;   /* with slogan */
  --logo-min-print:          10mm;
  --logo-min-print-slogan:   17mm;
}

/* ============================================================
   Base type — Montserrat everywhere
   ============================================================ */

html, body {
  font-family: var(--font-sans);
  font-weight: var(--fw-medium);
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
  color: var(--fg);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

/* Section titles in manual = Montserrat Black, RED (#C54933) */
.h-section {
  font-family: var(--font-display);
  font-weight: var(--fw-black);
  font-size: var(--fs-3xl);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--red);
  text-transform: none;
}

/* Giant wordmark headings — "DIGITÁL", "LOGO", "FAREBNOSŤ" */
.h-wordmark {
  font-family: var(--font-display);
  font-weight: var(--fw-black);
  font-size: clamp(72px, 12vw, 160px);
  line-height: 0.95;
  letter-spacing: var(--tracking-tight);
  color: var(--red);
  text-transform: uppercase;
}

h1, .h1 {
  font-family: var(--font-display);
  font-weight: var(--fw-black);
  font-size: var(--fs-4xl);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg);
}
h2, .h2 {
  font-family: var(--font-display);
  font-weight: var(--fw-black);
  font-size: var(--fs-3xl);
  line-height: var(--lh-snug);
}
h3, .h3 {
  font-family: var(--font-display);
  font-weight: var(--fw-black);
  font-size: var(--fs-2xl);
  line-height: var(--lh-snug);
}
h4, .h4 {
  font-family: var(--font-display);
  font-weight: var(--fw-black);
  font-size: var(--fs-xl);
}
h5, .h5 {
  font-family: var(--font-sans);
  font-weight: var(--fw-black);
  font-size: var(--fs-lg);
}

.lead {
  font-family: var(--font-sans);
  font-weight: var(--fw-medium);
  font-size: var(--fs-lg);
  line-height: var(--lh-normal);
  color: var(--fg-soft);
}

p, .p {
  font-family: var(--font-sans);
  font-weight: var(--fw-medium);
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
  color: var(--fg-soft);
}

.small, small {
  font-size: var(--fs-sm);
  color: var(--fg-mute);
}

.caption {
  font-size: var(--fs-xs);
  color: var(--fg-mute);
  letter-spacing: var(--tracking-wide);
}

.eyebrow {
  font-family: var(--font-sans);
  font-weight: var(--fw-bold);
  font-size: var(--fs-xs);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--fg-mute);
}

/* Ochre inline-highlight marker (used in manual body copy
   e.g. "Sme **kreatívny priestor**" on page 2) */
.mark-ochre {
  color: var(--ochre);
  font-weight: var(--fw-black);
}
.mark-red {
  color: var(--red);
  font-weight: var(--fw-black);
}

.mono, code, kbd {
  font-family: var(--font-mono);
  font-size: 0.95em;
}