/* ============================================================
   dityam.com.ua — Design Tokens
   ------------------------------------------------------------
   Cream paper, warm orange ink. Friendly, clear, Ukrainian.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@400;500;600;700&family=Kalam:wght@300;400;700&display=swap');

/* Brand sans — DM Sans, four cuts.
   The system primarily uses 400 (body) and 500 (UI / display).
   700 (Bold) is reserved for the rare moment that needs extra
   weight: hero displays at very large sizes, or a single CTA label
   where the size alone won't carry. Hierarchy still comes from
   size + tracking; 700 is the exception, not the rule. */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/DMSansRegular.woff2') format('woff2'),
       url('fonts/DMSansRegular.woff')  format('woff'),
       url('fonts/DMSansRegular.ttf')   format('truetype');
}
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/DMSansMedium.woff2') format('woff2'),
       url('fonts/DMSansMedium.woff')  format('woff'),
       url('fonts/DMSansMedium.ttf')   format('truetype');
}
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/DMSansBold.woff2') format('woff2'),
       url('fonts/DMSansBold.woff')  format('woff'),
       url('fonts/DMSansBold.ttf')   format('truetype');
}
@font-face {
  font-family: 'DM Sans';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/DMSansItalic.woff2') format('woff2'),
       url('fonts/DMSansItalic.woff')  format('woff'),
       url('fonts/DMSansItalic.ttf')   format('truetype');
}
@font-face {
  font-family: 'DM Sans';
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/DMSansMediumItalic.woff2') format('woff2'),
       url('fonts/DMSansMediumItalic.woff')  format('woff'),
       url('fonts/DMSansMediumItalic.ttf')   format('truetype');
}

:root {
  /* ---------- Surfaces ---------- */
  --bg:           #f1ebde;  /* warm cream paper, the canvas of every slide */
  --bg-soft:      #f7f1e6;  /* one shade up, for inset cards */
  --surface:      #ffffff;  /* clean cards inside the cream */
  --surface-warm: #fefcf7;  /* card on cream — barely-there separation */

  /* ---------- Ink ---------- */
  --ink:          #1a1a1a;  /* primary text — near-black, never #000 */
  --ink-soft:     #4a4a4a;  /* body, captions */
  --ink-muted:    #8a8a8a;  /* meta, labels, supporting */
  --ink-faint:    #b8b3a6;  /* placeholder, disabled */

  /* ---------- Accent: Orange ---------- */
  --accent:       #e85d24;  /* dityam orange — pill buttons, italic logo, hot dot */
  --accent-deep:  #d14c15;  /* hover/active */
  --accent-warm:  #ff7a3a;  /* gradient lift */
  --accent-soft:  #fef2eb;  /* tinted background */
  --accent-faint: #fff4ec;  /* barely-tinted */

  /* ---------- Supporting tints ----------
     Used SPARINGLY for category chips / category illustrations.
     Never as primary surfaces. */
  --warm-1:       #fef7e0;  /* sun yellow tint */
  --warm-2:       #fde8c7;  /* peach tint */
  --warm-ink:     #8a5a0a;  /* readable on warm-* */

  --cool-1:       #e8f4f2;
  --cool-2:       #d4ebe6;
  --cool-ink:     #0a5348;

  --pink-1:       #fde8ef;
  --pink-2:       #fbd4e0;
  --pink-ink:     #8a1a3a;

  --purple-1:     #ede8f8;
  --purple-2:     #d9cff2;
  --purple-ink:   #4c3d8c;

  --green-1:      #e4f2d6;
  --green-ink:    #2d5814;

  --red-1:        #fde3e3;
  --red-ink:      #991b1b;

  --amber-1:      #fef2d4;
  --amber-ink:    #78350f;

  /* ---------- Blue-green family (sage teal) ----------
     Added: replaces the old powder-blue. Warm green-blue
     that sits naturally next to cream without hospital-blue coldness. */
  --blue-1:      #cce8e0;   /* sage teal surface */
  --blue-2:      #b8ddd4;   /* seafoam chip / border */
  --blue-3:      #8ac4b8;   /* hover / strong border */
  --blue-ink:    #0e5449;   /* deep teal text on blue-1/2 */
  --border:       #e8e3d6;  /* warm line that disappears into cream */
  --border-strong:#d4cfc1;
  --border-ink:   #1a1a1a;  /* heavy outline on grid notebook */

  /* ---------- Type ---------- */
  --font-sans:    'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-display: 'DM Sans', -apple-system, sans-serif; /* same family — display feels via size + tracking, not weight */
  --font-script:  'Caveat', cursive;          /* italic logo wordmark, accent words */
  --font-hand:    'Kalam', cursive;           /* hand-written annotations */

  /* Type scale — TIGHT, posterish. Headlines run hot. */
  --t-xs:   0.75rem;  /* 12 — micro labels */
  --t-sm:   0.8125rem;/* 13 — meta */
  --t-base: 0.9375rem;/* 15 — body */
  --t-md:   1rem;     /* 16 */
  --t-lg:   1.125rem; /* 18 */
  --t-xl:   1.375rem; /* 22 — sub-heads */
  --t-2xl:  1.75rem;  /* 28 */
  --t-3xl:  2.25rem;  /* 36 */
  --t-4xl:  3rem;     /* 48 — H1 mobile */
  --t-5xl:  4rem;     /* 64 — poster */
  --t-6xl:  5.5rem;   /* 88 — hero */

  /* Line-heights */
  --lh-tight:  1.05; /* @kind font */ /* hero / display */
  --lh-snug:   1.18; /* @kind font */ /* H2-H4 */
  --lh-body:   1.55; /* @kind font */
  --lh-ui:     1.4; /* @kind font */

  /* Letter-spacing */
  --ls-tight: -0.02em;   /* display */
  --ls-snug:  -0.01em;
  --ls-normal: 0; /* @kind spacing */
  --ls-loose:  0.04em;   /* eyebrow / uppercase */
  --ls-mega:   0.12em;   /* BETA badge */

  /* ---------- Spacing (4px base) ---------- */
  --s-1:  4px;
  --s-2:  8px;
  --s-3:  12px;
  --s-4:  16px;
  --s-5:  20px;
  --s-6:  24px;
  --s-7:  32px;
  --s-8:  40px;
  --s-9:  56px;
  --s-10: 72px;
  --s-11: 96px;

  /* ---------- Radii — friendly and rounded ---------- */
  --r-1: 6px;    /* tags */
  --r-2: 10px;   /* small buttons, meta blocks */
  --r-3: 14px;   /* primary buttons */
  --r-4: 16px;   /* cards */
  --r-5: 20px;   /* filter panel */
  --r-6: 24px;   /* hero / modal / footer */
  --r-pill: 9999px;

  /* ---------- Elevation ---------- */
  --shadow-1: 0 1px 3px rgba(26,26,26,0.04);
  --shadow-2: 0 4px 12px rgba(26,26,26,0.06);
  --shadow-3: 0 8px 24px rgba(26,26,26,0.08);
  --shadow-accent: 0 6px 20px rgba(232,93,36,0.35);
  --shadow-accent-lift: 0 10px 28px rgba(232,93,36,0.5);

  /* ---------- Motion ---------- */
  --ease:     cubic-bezier(0.2, 0.9, 0.3, 1); /* @kind other */
  --t-fast:   120ms; /* @kind other */
  --t-base-d: 200ms; /* @kind other */
  --t-slow:   350ms; /* @kind other */
}

/* ============================================================
   Page background — the cream "paper" that defines dityam
   Optional grid texture for editorial / Instagram-poster layouts.
   ============================================================ */

.dityam-paper {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
}

.dityam-paper--grid {
  background-color: var(--bg);
  background-image:
    linear-gradient(rgba(26,26,26,0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(26,26,26,0.045) 1px, transparent 1px);
  background-size: 28px 28px;
  background-position: -1px -1px;
}

.dityam-paper--web {
  background:
    radial-gradient(ellipse at top left, var(--accent-faint) 0%, transparent 50%),
    radial-gradient(ellipse at top right, var(--cool-1) 0%, transparent 50%),
    var(--bg);
}

/* ============================================================
   Type primitives
   ============================================================ */

/* DM Sans now ships 400, 500, and 700. Hierarchy still comes from
   SIZE + TIGHT TRACKING, not weight. Display headlines use 500 (the
   default heaviest cut) with -0.025em tracking; body uses 400. The
   700 cut is reserved for the rare moment that genuinely needs it —
   a single hero on the home page, the BETA badge, the donate-amount
   number on a fundraising page. Reach for it deliberately. */

.dt-display {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(2.25rem, 6vw, 5.5rem);
  line-height: var(--lh-tight);
  letter-spacing: -0.025em;
  color: var(--ink);
  text-wrap: balance;
}

.dt-h1 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(2rem, 4.5vw, 3.25rem);
  line-height: 1.1;
  letter-spacing: -0.025em;
  color: var(--ink);
  text-wrap: balance;
}

.dt-h2 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--t-2xl);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-tight);
  color: var(--ink);
}

.dt-h3 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--t-xl);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-snug);
  color: var(--ink);
}

.dt-eyebrow {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--t-xs);
  text-transform: uppercase;
  letter-spacing: var(--ls-loose);
  color: var(--ink-muted);
}

.dt-body {
  font-family: var(--font-sans);
  font-size: var(--t-md);
  line-height: var(--lh-body);
  color: var(--ink-soft);
  text-wrap: pretty;
}

.dt-meta {
  font-family: var(--font-sans);
  font-size: var(--t-sm);
  color: var(--ink-muted);
  line-height: var(--lh-ui);
}

/* The italic accent word — Caveat, orange, slightly tilted.
   Use this for ONE word per headline, never more. */
.dt-script {
  font-family: var(--font-script);
  font-weight: 600;
  font-style: italic;
  color: var(--accent);
  display: inline-block;
  transform: rotate(-2deg);
  letter-spacing: 0;
  font-size: 1.25em;
  line-height: 0.9;
}

/* The Каlam wordmark variant — heavier, more "marker" feel.
   Use for the dityam.com.ua wordmark on dark / poster contexts. */
.dt-wordmark {
  font-family: var(--font-script);
  font-weight: 700;
  font-style: italic;
  color: var(--accent);
  letter-spacing: 0;
}

/* Hand-written annotation — Kalam, neutral ink, like a margin note */
.dt-hand {
  font-family: var(--font-hand);
  font-weight: 400;
  color: var(--ink-soft);
  letter-spacing: 0;
}
