/* ============================================================
   clarity.ai — colors & type
   Warm minimalism. Light theme. Russian-first (full Cyrillic).
   ============================================================ */

/* ---------- Webfonts ---------------------------------------- */
/* Display: PT Serif — classic, full Cyrillic, warm.
   Body:    Inter Tight — neutral sans, Cyrillic, geometric, calm.
   Mono:    JetBrains Mono — technical accents, Cyrillic. */
@import url('https://fonts.googleapis.com/css2?family=PT+Serif:ital,wght@0,400;0,700;1,400&family=Inter+Tight:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap&subset=cyrillic');

:root {
  /* ---------- Color: base surfaces (warm, not pure white) --- */
  --bone:        #F6F2EC;   /* page background, warmest */
  --cream:       #EFE9E0;   /* raised surfaces, cards */
  --sand:        #E4DCCE;   /* dividers, subtle fills */
  --paper:       #FBF8F3;   /* lifted cards, modals */
  --ink:         #1A1814;   /* primary text, darkest */
  --graphite:    #2C2822;   /* secondary headings */
  --stone:       #5C574E;   /* body text */
  --pebble:      #8A8477;   /* muted text, meta */
  --mist:        #B8B2A4;   /* disabled, placeholder */

  /* ---------- Accents (single warm terracotta family) ------- */
  --clay-50:     #F7ECE3;
  --clay-100:    #EED5BF;
  --clay-300:    #D49A72;
  --clay-500:    #B5623A;   /* primary accent */
  --clay-700:    #8A4524;
  --clay-900:    #4E2714;

  /* ---------- Semantic (muted, not saturated) --------------- */
  --sage:        #6B7A5A;   /* positive / success — dusty green */
  --sage-soft:   #E0E4D6;
  --ochre:       #B58A2E;   /* caution — dark honey */
  --ochre-soft:  #EEE3C8;
  --rust:        #9C4029;   /* critical — burnt rust */
  --rust-soft:   #EBD5CC;

  /* ---------- Semantic tokens: foreground ------------------- */
  --fg-1:        var(--ink);       /* highest contrast */
  --fg-2:        var(--graphite);
  --fg-3:        var(--stone);
  --fg-4:        var(--pebble);
  --fg-5:        var(--mist);
  --fg-accent:   var(--clay-700);
  --fg-on-accent:#FBF8F3;

  /* ---------- Semantic tokens: background ------------------- */
  --bg-page:     var(--bone);
  --bg-surface:  var(--cream);
  --bg-raised:   var(--paper);
  --bg-accent:   var(--clay-500);
  --bg-accent-soft: var(--clay-50);

  /* ---------- Borders --------------------------------------- */
  --border-hair:    rgba(26, 24, 20, 0.08);   /* ink @ 8% — default */
  --border-soft:    rgba(26, 24, 20, 0.14);
  --border-strong:  rgba(26, 24, 20, 0.24);
  --border-accent:  var(--clay-500);

  /* ---------- Shadows (warm, low, subtle) ------------------- */
  --shadow-xs: 0 1px 0 rgba(26, 24, 20, 0.04);
  --shadow-sm: 0 1px 2px rgba(26, 24, 20, 0.05), 0 1px 1px rgba(26, 24, 20, 0.03);
  --shadow-md: 0 4px 12px rgba(26, 24, 20, 0.06), 0 1px 2px rgba(26, 24, 20, 0.04);
  --shadow-lg: 0 12px 32px rgba(26, 24, 20, 0.08), 0 2px 6px rgba(26, 24, 20, 0.04);
  --shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.6);

  /* ---------- Radii ----------------------------------------- */
  --r-xs: 2px;
  --r-sm: 4px;
  --r-md: 8px;
  --r-lg: 14px;
  --r-xl: 20px;
  --r-pill: 999px;

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

  /* ---------- Type families --------------------------------- */
  --font-serif: 'PT Serif', 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --font-sans:  'Inter Tight', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono:  'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace;

  /* ---------- Type scale (display = serif, body = sans) ----- */
  --t-display-1: 700 88px/0.98 var(--font-serif);
  --t-display-2: 700 64px/1.02 var(--font-serif);
  --t-h1:        700 44px/1.08 var(--font-serif);
  --t-h2:        700 32px/1.14 var(--font-serif);
  --t-h3:        600 22px/1.28 var(--font-sans);
  --t-h4:        600 17px/1.35 var(--font-sans);
  --t-eyebrow:   500 12px/1.4  var(--font-mono);  /* uppercase tracked */
  --t-body-lg:   400 19px/1.55 var(--font-sans);
  --t-body:      400 16px/1.58 var(--font-sans);
  --t-body-sm:   400 14px/1.5  var(--font-sans);
  --t-meta:      500 13px/1.4  var(--font-sans);
  --t-caption:   400 12px/1.4  var(--font-sans);
  --t-mono:      400 13px/1.5  var(--font-mono);

  /* ---------- Motion ---------------------------------------- */
  --ease-standard: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-enter:    cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 140ms;
  --dur-med:  220ms;
  --dur-slow: 380ms;
}

/* ============================================================
   Semantic element styles — use these directly.
   ============================================================ */
body {
  background: var(--bg-page);
  color: var(--fg-2);
  font: var(--t-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

h1 { font: var(--t-h1);      color: var(--fg-1); letter-spacing: -0.015em; }
h2 { font: var(--t-h2);      color: var(--fg-1); letter-spacing: -0.012em; }
h3 { font: var(--t-h3);      color: var(--fg-1); letter-spacing: -0.005em; }
h4 { font: var(--t-h4);      color: var(--fg-1); }

.display-1 { font: var(--t-display-1); color: var(--fg-1); letter-spacing: -0.025em; }
.display-2 { font: var(--t-display-2); color: var(--fg-1); letter-spacing: -0.02em; }

.eyebrow {
  font: var(--t-eyebrow);
  color: var(--fg-4);
  text-transform: uppercase;
  letter-spacing: 0.14em;
}

p     { font: var(--t-body);    color: var(--fg-3); max-width: 64ch; }
.lead { font: var(--t-body-lg); color: var(--fg-2); max-width: 58ch; }
small { font: var(--t-caption); color: var(--fg-4); }
code, kbd, .mono { font: var(--t-mono); color: var(--fg-2); }

a {
  color: var(--fg-1);
  text-decoration: underline;
  text-decoration-color: var(--border-soft);
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  transition: text-decoration-color var(--dur-fast) var(--ease-standard),
              color var(--dur-fast) var(--ease-standard);
}
a:hover { text-decoration-color: var(--clay-500); color: var(--fg-accent); }

hr {
  border: 0;
  border-top: 1px solid var(--border-hair);
  margin: var(--s-6) 0;
}

::selection { background: var(--clay-100); color: var(--ink); }