/* ============================================================
   Domus Solis / dialogai.lt — Design tokens
   Type + color foundations extracted from the source codebase.
   Drop this into any prototype: it sets up fonts, palette,
   shadows, radii, easings, and a semantic typography scale.
   ============================================================ */

/* ── Webfonts (local) ───────────────────────────────────── */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url('../assets/fonts/inter-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url('../assets/fonts/inter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 600 800;
  font-display: swap;
  src: url('../assets/fonts/fraunces-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 600 800;
  font-display: swap;
  src: url('../assets/fonts/fraunces-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ── Design tokens ──────────────────────────────────────── */
:root {
  /* ── Brand palette ────────────────────────────────────── */
  --ds-ink:     #0B2645; /* deep forest — primary brand, dark surfaces, headings */
  --ds-forest: #174F8A; /* lighter forest — secondary accent, kicker labels */
  --ds-mint:   #D6E8F8; /* mint — soft accent on dark, secondary button bg */
  --ds-cream:  #F4F8FC; /* page cream — default page background */
  --ds-sand:   #EFE3D0; /* sand — subtle warm bg, used in borders (low alpha) */
  --ds-clay:   #3B82C4; /* clay — used only in dark-mesh radial accents */
  --ds-white:  #ffffff;

  /* ── Neutrals (text + UI) ─────────────────────────────── */
  --ds-slate:  #334155; /* body text on light */
  --ds-slate-2:#475569; /* secondary text, lead paragraphs */
  --ds-muted:  #64748b; /* tertiary text, captions, hints */
  --ds-line:   #e7ded0; /* hairline divider (cream-tinted) */

  /* ── Semantic surfaces ────────────────────────────────── */
  --ds-bg:           var(--ds-cream);
  --ds-bg-white:     var(--ds-white);
  --ds-bg-dark:      var(--ds-ink);
  --ds-fg:           var(--ds-slate);
  --ds-fg-strong:    var(--ds-ink);
  --ds-fg-muted:     var(--ds-muted);
  --ds-fg-on-dark:   #ffffff;
  --ds-fg-on-dark-2: rgba(255,255,255,.78);
  --ds-border-warm:  rgba(214, 202, 180, .6);
  --ds-border-glass: rgba(255,255,255,.7);

  /* ── Signature dark mesh (used on CTA + Nansen card) ──── */
  --ds-dark-mesh:
    radial-gradient(circle at 10% 20%, rgba(221,241,232,.16), transparent 30%),
    radial-gradient(circle at 90% 10%, rgba(185,112,74,.25), transparent 28%),
    linear-gradient(135deg, #0b2645 0%, #0d3458 52%, #071832 100%);

  /* Glass-on-cream surface used by the floating header pill */
  --ds-glass-cream:    rgba(255,255,255,.72);
  --ds-glass-blur:     blur(18px);

  /* ── Radii ────────────────────────────────────────────── */
  --ds-radius-sm:  0.9rem;   /* small chips, hamburger button */
  --ds-radius-md:  1rem;     /* nav pill, default button radius */
  --ds-radius-lg:  1.75rem;  /* default card */
  --ds-radius-xl:  2rem;     /* hero / feature card */
  --ds-radius-2xl: 2.5rem;   /* nansen / big feature panel */
  --ds-radius-pill: 999px;   /* full pill (round photos, badges) */

  /* ── Shadows ─────────────────────────────────────────── */
  --ds-shadow-card:   0 12px 40px rgba(11, 38, 69, .08);
  --ds-shadow-soft:   0 24px 70px rgba(11, 38, 69, .14);
  --ds-shadow-hover:  0 18px 35px rgba(11, 38, 69, .18);
  --ds-shadow-photo:  0 20px 44px rgba(11, 38, 69, .15);
  --ds-shadow-stat:   0 14px 34px rgba(11, 38, 69, .09);

  /* ── Motion ──────────────────────────────────────────── */
  --ds-ease-soft: cubic-bezier(.22, .61, .36, 1);
  --ds-dur-fast:  .25s;
  --ds-dur:       .45s;
  --ds-dur-slow:  .65s;

  /* ── Type families ───────────────────────────────────── */
  --ds-font-serif: Fraunces, Georgia, "Times New Roman", serif;
  --ds-font-sans:  Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --ds-font-mono:  ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  /* ── Layout ──────────────────────────────────────────── */
  --ds-container-max: 1280px;
  --ds-section-y:     6rem;
  --ds-section-y-sm:  4rem;
}

/* ── Base reset ─────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--ds-font-sans);
  background: var(--ds-bg);
  color: var(--ds-fg);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased; /* vendor prefix — nėra W3C standarto, palaikomas visose naršyklėse */
  -moz-osx-font-smoothing: grayscale; /* vendor prefix — nėra W3C standarto, palaikomas visose naršyklėse */
  text-rendering: optimizeLegibility;
}

img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
p { margin: 0; }

/* ── Semantic typography ────────────────────────────────── */
/* Use these classes for content, or copy the rules into your
   own selectors. Headings are serif (Fraunces). Body, labels
   and UI are sans (Inter, very heavy weights — 800/900). */

h1, h2, h3, h4, .h1, .h2, .h3, .h4 {
  margin: 0;
  color: var(--ds-fg-strong);
  line-height: 1.05;
}

/* Display + headlines — Fraunces, very tight tracking */
h1, h2, .h1, .h2, .display {
  font-family: var(--ds-font-serif);
  letter-spacing: -0.025em;
}

h1, .h1 {
  font-size: clamp(2.8rem, 5.2vw, 5.6rem);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -0.035em;
  max-width: 18ch;
}

/* h1 has a signature 2-line treatment where the 2nd clause
   drops to the forest green and breaks to a new line. */
h1 .ds-h1-quiet { display: block; color: var(--ds-forest); }

h2, .h2 {
  font-size: clamp(2.4rem, 4vw, 4.5rem);
  font-weight: 800;
}

/* h3 + h4 are SANS (Inter), heavy. This is unusual — it gives
   serif display + sans subhead pairing the brand a grounded,
   editorial-meets-modern feel. */
h3, .h3 {
  font-family: var(--ds-font-sans);
  font-size: 1.45rem;
  font-weight: 900;
}
h4, .h4 {
  font-family: var(--ds-font-sans);
  font-size: 1.05rem;
  font-weight: 800;
}

/* Body */
p, .ds-body {
  font-size: 1rem;
  line-height: 1.6;
  color: var(--ds-fg);
}

/* Lead — large intro paragraph under an h1 */
.ds-lead {
  font-size: 1.25rem;
  line-height: 1.8;
  color: var(--ds-slate-2);
}

/* Rich text inside cards — slightly smaller, secondary color */
.ds-rich {
  font-size: 1.05rem;
  line-height: 1.75;
  color: var(--ds-slate-2);
}

/* Section kicker — small, all-caps, wide-tracked, forest green.
   Sits above every h2; this is the most-repeated brand element. */
.ds-kicker {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  color: var(--ds-forest);
  text-transform: uppercase;
  letter-spacing: .2em;
  font-size: .78rem;
  font-weight: 900;
}

/* Eyebrow within a card (e.g. "laisvas žmogus" above a card h3) */
.ds-eyebrow {
  color: var(--ds-forest);
  text-transform: uppercase;
  letter-spacing: .18em;
  font-size: .72rem;
  font-weight: 900;
}

/* Stat number — display weight in serif */
.ds-stat-num {
  font-family: var(--ds-font-serif);
  font-size: clamp(2rem, 3vw, 2.75rem);
  line-height: .95;
  letter-spacing: -.04em;
  color: var(--ds-fg-strong);
}

/* Tiny label — for stat units ("dialogo", "dalyvių") */
.ds-micro {
  font-size: .82rem;
  font-weight: 900;
  letter-spacing: .08em;
  line-height: 1.25;
  text-transform: uppercase;
  color: var(--ds-slate-2);
}

/* Logo wordmark — for the .lt domain logotype */
.ds-wordmark {
  font-family: var(--ds-font-serif);
  font-size: 1.65rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.035em;
  text-transform: lowercase;
  color: var(--ds-ink);
}