/* ==========================================================================
   Duke Klevenski — Design Tokens
   Единственный источник значений. Здесь только переменные, никаких селекторов
   компонентов. Палитра выведена из работ: ультрамарин воды, коралл и хурма
   плодов, жёлтая рыба, листва, ветки.
   ========================================================================== */

:root {
  /* ---------- Raw palette ---------- */
  --c-paper:            #F7F4EE;
  --c-paper-2:          #EFEAE0;
  --c-paper-3:          #E6E0D3;
  --c-line:             #D8D1C4;
  --c-ink:              #16161D;
  --c-ink-2:            #3A3A42;
  --c-muted:            #77736B;

  --c-ultramarine:      #1E3FBF;
  --c-ultramarine-deep: #152C8A;
  --c-ultramarine-tint: #E4E9FA;

  --c-coral:            #E4573D;
  --c-coral-tint:       #FBE6E1;
  --c-persimmon:        #F08A3C;
  --c-persimmon-tint:   #FDEBDC;
  --c-gold:             #F2C230;
  --c-gold-tint:        #FBF1CF;
  --c-leaf:             #4F9A3E;
  --c-leaf-tint:        #E3F0DF;
  --c-pink:             #EC6F94;
  --c-bark:             #7B5236;
  --c-sea:              #1DA0C4;

  /* ---------- Semantic ---------- */
  --bg:            var(--c-paper);
  --bg-2:          var(--c-paper-2);
  --bg-3:          var(--c-paper-3);
  --fg:            var(--c-ink);
  --fg-2:          var(--c-ink-2);
  --fg-muted:      var(--c-muted);
  --border:        var(--c-line);

  --accent:        var(--c-ultramarine);
  --accent-hover:  var(--c-ultramarine-deep);
  --accent-tint:   var(--c-ultramarine-tint);
  --on-accent:     var(--c-paper);

  --success:       var(--c-leaf);
  --success-tint:  var(--c-leaf-tint);
  --danger:        var(--c-coral);
  --danger-tint:   var(--c-coral-tint);
  --warning:       var(--c-gold);
  --warning-tint:  var(--c-gold-tint);
  --info:          var(--c-persimmon);
  --info-tint:     var(--c-persimmon-tint);

  /* ---------- Typography ---------- */
  --font-display: "Fraunces", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --font-text:    "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono:    ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --fs-xs:  0.75rem;
  --fs-sm:  0.875rem;
  --fs-md:  1rem;
  --fs-lg:  clamp(1.125rem, 1rem + 0.4vw, 1.25rem);
  --fs-xl:  clamp(1.5rem, 1.3rem + 0.8vw, 1.75rem);
  --fs-2xl: clamp(2rem, 1.6rem + 1.4vw, 2.5rem);
  --fs-3xl: clamp(2.75rem, 2rem + 3vw, 4rem);
  --fs-4xl: clamp(3.5rem, 2.4rem + 5.5vw, 6rem);

  --lh-tight: 1.05;
  --lh-snug:  1.2;
  --lh-body:  1.6;

  --ls-eyebrow: 0.12em;
  --ls-tight:  -0.015em;

  --fw-light:  300;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;

  /* ---------- 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;
  --sp-11: 160px;
  --sp-12: 192px;

  --section-y: clamp(var(--sp-8), 10vw, var(--sp-10));

  /* ---------- Layout ---------- */
  --container:        1280px;
  --container-narrow: 720px;
  --gutter:           clamp(16px, 4vw, 48px);
  --grid-gap:         clamp(var(--sp-4), 2.5vw, var(--sp-6));

  /* ---------- Shape ---------- */
  --r-xs:   2px;
  --r-sm:   4px;
  --r-md:   8px;
  --r-full: 999px;

  /* Пропорции работ: 60 × 48 in (горизонталь) */
  --ratio-canvas:          5 / 4;
  --ratio-canvas-portrait: 4 / 5;

  /* ---------- Elevation ---------- */
  --shadow-1: 0 1px 2px rgb(22 22 29 / 0.06), 0 4px 12px rgb(22 22 29 / 0.06);
  --shadow-2: 0 2px 4px rgb(22 22 29 / 0.08), 0 12px 32px rgb(22 22 29 / 0.10);
  /* «Холст на стене»: тонкий контур + тёплая тень вниз */
  --shadow-frame: 0 0 0 1px rgb(22 22 29 / 0.08), 0 18px 40px -12px rgb(74 52 36 / 0.35);

  /* ---------- Motion ---------- */
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --dur:  180ms;
  --dur-slow: 320ms;

  /* ---------- Focus ---------- */
  --focus-ring: 0 0 0 2px var(--bg), 0 0 0 4px var(--accent);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur: 0ms;
    --dur-slow: 0ms;
  }
}