/* ============================================================
   Daruta — design tokens (CSS variables only).
   Single source of truth for color · type · spacing · radius ·
   shadows · motion · theme. Никаких element-level стилей здесь.
   Element-level styles живут в base.css.
   ============================================================ */

/* ---------- 1. Webfonts ---------- */
@import url("https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400&family=Inter:wght@300;400;500;600;700&family=Tenor+Sans&display=swap");

/* ---------- 2. Base palette (raw, theme-agnostic) ---------- */
:root {
  --daruta-color-milk-50:  #fff9ea;
  --daruta-color-milk-100: #f8f1e4;
  --daruta-color-milk-200: #f1e8d5;
  --daruta-color-milk-300: #e7d9c2;
  --daruta-color-milk-400: #d6c4a4;

  --daruta-color-forest-300: #b8c6a7;
  --daruta-color-forest-500: #6b735f;
  --daruta-color-forest-600: #425944;
  --daruta-color-forest-700: #2f4734;
  --daruta-color-forest-800: #1f2a23;

  --daruta-color-ink-900: #25231e;
  --daruta-color-ink-700: #3a382f;
  --daruta-color-ink-500: #746b5d;
  --daruta-color-ink-400: #a59c8c;

  --daruta-color-clay:    #b98661;
  --daruta-color-cocoa:   #6b4e3d;
  --daruta-color-rust:    #c36a4a;
  --daruta-color-sky:     #a9c6e0;
  --daruta-color-sage:    #9aaf95;

  --daruta-color-night-900: #191d17;
  --daruta-color-night-800: #24291f;
  --daruta-color-night-700: #302b22;
  --daruta-color-night-500: #7c806d;
}

/* ---------- 3. Typography scale ---------- */
:root {
  --daruta-font-display:   "Tenor Sans", "Cormorant Garamond", serif;
  --daruta-font-body:      "Inter", "Avenir", "Helvetica Neue", sans-serif;
  --daruta-font-editorial: "Cormorant Garamond", "Tenor Sans", serif;

  --daruta-type-display-xl-size: 56px; --daruta-type-display-xl-lh: 1.04; --daruta-type-display-xl-tracking: .08em;
  --daruta-type-display-l-size:  44px; --daruta-type-display-l-lh:  1.06; --daruta-type-display-l-tracking:  .07em;
  --daruta-type-display-m-size:  32px; --daruta-type-display-m-lh:  1.08; --daruta-type-display-m-tracking:  .06em;
  --daruta-type-h1-size:         28px; --daruta-type-h1-lh:         1.14; --daruta-type-h1-tracking:         .02em;
  --daruta-type-h2-size:         22px; --daruta-type-h2-lh:         1.22; --daruta-type-h2-tracking:         .01em;
  --daruta-type-h3-size:         18px; --daruta-type-h3-lh:         1.30; --daruta-type-h3-tracking:         0;
  --daruta-type-body-size:       15px; --daruta-type-body-lh:       1.55; --daruta-type-body-tracking:       0;
  --daruta-type-small-size:      13px; --daruta-type-small-lh:      1.45; --daruta-type-small-tracking:      0;
  --daruta-type-micro-size:      11px; --daruta-type-micro-lh:      1.40; --daruta-type-micro-tracking:      .12em;
  --daruta-type-editorial-size:  20px; --daruta-type-editorial-lh:  1.45; --daruta-type-editorial-tracking:  .005em;
}

/* ---------- 4. Spacing scale (4px grid) ---------- */
:root {
  --daruta-space-0:   0;
  --daruta-space-1:   4px;
  --daruta-space-2:   8px;
  --daruta-space-3:   12px;
  --daruta-space-4:   16px;
  --daruta-space-5:   20px;
  --daruta-space-6:   24px;
  --daruta-space-8:   32px;
  --daruta-space-10:  40px;
  --daruta-space-12:  48px;
  --daruta-space-16:  64px;
  --daruta-space-20:  80px;
  --daruta-space-24:  96px;

  --daruta-page-pad-mobile:  16px;
  --daruta-page-pad-desktop: 64px;
  --daruta-content-max:      1200px;
  --daruta-mobile-max:       430px;
}

/* ---------- 5. Radius scale ---------- */
:root {
  --daruta-radius-0:     0;
  --daruta-radius-xs:    6px;
  --daruta-radius-sm:    10px;
  --daruta-radius-md:    16px;
  --daruta-radius-card:  20px;
  --daruta-radius-lg:    24px;
  --daruta-radius-sheet: 28px;
  --daruta-radius-pill:  999px;
}

/* ---------- 6. Shadows ---------- */
:root {
  --daruta-shadow-none:   none;
  --daruta-shadow-fabric: 0 1px 0 rgba(37,35,30,.04), 0 2px 8px rgba(37,35,30,.04);
  --daruta-shadow-soft:   0 18px 50px rgba(37,35,30,.10);
  --daruta-shadow-sheet:  0 -16px 40px rgba(37,35,30,.12);
  --daruta-shadow-focus:  0 0 0 3px rgba(66,89,68,.18);
}

/* ---------- 7. Motion ---------- */
:root {
  --daruta-ease-natural: cubic-bezier(.22,.61,.36,1);
  --daruta-ease-soft:    cubic-bezier(.4,0,.2,1);
  --daruta-dur-fast:     120ms;
  --daruta-dur-base:     180ms;
  --daruta-dur-slow:     280ms;
}

/* ---------- 8. Semantic theme tokens — light ---------- */
:root,
[data-theme="light"] {
  --daruta-bg:          var(--daruta-color-milk-200);
  --daruta-paper:       var(--daruta-color-milk-50);
  --daruta-surface:     var(--daruta-color-milk-100);
  --daruta-surface-2:   var(--daruta-color-milk-300);
  --daruta-line:        var(--daruta-color-forest-500);
  --daruta-line-soft:   rgba(107,115,95,.32);
  --daruta-line-quiet:  rgba(107,115,95,.18);

  --daruta-fg:          var(--daruta-color-ink-900);
  --daruta-fg-2:        var(--daruta-color-ink-700);
  --daruta-muted:       var(--daruta-color-ink-500);
  --daruta-muted-2:     var(--daruta-color-ink-400);

  --daruta-forest:      var(--daruta-color-forest-600);
  --daruta-deep-green:  var(--daruta-color-forest-700);
  --daruta-on-forest:   var(--daruta-color-milk-50);

  --daruta-clay:        var(--daruta-color-clay);
  --daruta-cocoa:       var(--daruta-color-cocoa);
  --daruta-rust:        var(--daruta-color-rust);
  --daruta-sky:         var(--daruta-color-sky);
  --daruta-sage:        var(--daruta-color-sage);

  --daruta-hero-overlay: linear-gradient(180deg, rgba(37,35,30,.00) 40%, rgba(37,35,30,.32) 100%);
  color-scheme: light;
}

/* ---------- 9. Semantic theme tokens — dark (matte) ---------- */
[data-theme="dark"] {
  --daruta-bg:          var(--daruta-color-night-900);
  --daruta-paper:       var(--daruta-color-night-800);
  --daruta-surface:     var(--daruta-color-night-800);
  --daruta-surface-2:   var(--daruta-color-night-700);
  --daruta-line:        var(--daruta-color-night-500);
  --daruta-line-soft:   rgba(124,128,109,.35);
  --daruta-line-quiet:  rgba(124,128,109,.20);

  --daruta-fg:          var(--daruta-color-milk-200);
  --daruta-fg-2:        #d8cdb6;
  --daruta-muted:       #b8ad98;
  --daruta-muted-2:     #8a8270;

  --daruta-forest:      #8fa982;
  --daruta-deep-green:  var(--daruta-color-forest-300);
  --daruta-on-forest:   var(--daruta-color-night-900);

  --daruta-clay:        var(--daruta-color-clay);
  --daruta-cocoa:       #8a6850;
  --daruta-rust:        var(--daruta-color-rust);
  --daruta-sky:         #8fafc8;
  --daruta-sage:        var(--daruta-color-sage);

  --daruta-hero-overlay: linear-gradient(180deg, rgba(0,0,0,0) 35%, rgba(0,0,0,.55) 100%);
  color-scheme: dark;
}

:root { color-scheme: light dark; }