/* ========================================================================
   sibdiving — variant-c · tokens
   Editorial-minimalist × Swiss magazine
   Light paper · grey hairlines · single blue accent · Inter 400-800
   ======================================================================== */

:root {
  color-scheme: light;

  /* ===== PRIMITIVE · paper (warm near-white to warm wash) ===== */
  --paper-50:  oklch(99.5% 0.002 95);
  --paper-100: oklch(98.5% 0.003 95);
  --paper-200: oklch(96% 0.005 95);
  --paper-300: oklch(93% 0.005 90);

  /* ===== PRIMITIVE · ink (warm near-black scale) ===== */
  --ink-950: oklch(14% 0.01 270);
  --ink-900: oklch(20% 0.012 270);
  --ink-800: oklch(28% 0.012 270);
  --ink-700: oklch(38% 0.01 270);
  --ink-600: oklch(48% 0.009 270);
  --ink-500: oklch(58% 0.008 270);
  --ink-400: oklch(68% 0.007 270);
  --ink-300: oklch(78% 0.006 270);
  --ink-200: oklch(87% 0.005 270);
  --ink-100: oklch(93% 0.004 270);

  /* ===== PRIMITIVE · water (single blue accent system) ===== */
  --water-900: oklch(28% 0.12 235);
  --water-800: oklch(38% 0.15 232);
  --water-700: oklch(50% 0.18 232);   /* PRIMARY ACCENT */
  --water-600: oklch(62% 0.17 225);
  --water-500: oklch(72% 0.14 220);
  --water-400: oklch(82% 0.10 220);
  --water-300: oklch(88% 0.08 220);
  --water-200: oklch(93% 0.05 220);
  --water-100: oklch(96.5% 0.025 220);
  --water-50:  oklch(98% 0.015 220);

  /* ===== SEMANTIC ===== */
  --bg:              var(--paper-100);
  --bg-raised:       #ffffff;
  --bg-alt:          var(--paper-200);
  --bg-sand:         var(--paper-300);
  --bg-accent-tint:  var(--water-100);
  --bg-invert:       var(--ink-950);

  --text:        var(--ink-900);
  --text-strong: var(--ink-950);
  --text-soft:   var(--ink-700);
  --text-mute:   var(--ink-500);
  --text-faint:  var(--ink-400);
  --text-invert: var(--paper-50);

  --hairline:        var(--ink-200);
  --hairline-soft:   var(--ink-100);
  --hairline-strong: var(--ink-300);
  --hairline-hover:  var(--ink-500);

  --accent:        var(--water-700);
  --accent-hover:  var(--water-800);
  --accent-deep:   var(--water-900);
  --accent-soft:   var(--water-100);
  --accent-200:    var(--water-200);
  --accent-cyan:   var(--water-500);

  --focus:         var(--water-700);
  --focus-ring:    oklch(50% 0.18 232 / 0.3);

  /* ===== TYPE (Inter only, 1.5 scale) ===== */
  --font-sans: "Inter", "Inter Fallback", ui-sans-serif, -apple-system,
               "Segoe UI", system-ui, "Helvetica Neue", sans-serif;

  --fs-12: 0.75rem;
  --fs-14: 0.875rem;
  --fs-16: 1rem;
  --fs-18: 1.125rem;
  --fs-20: 1.25rem;
  --fs-24: 1.5rem;
  --fs-32: 2rem;
  --fs-40: 2.5rem;
  --fs-56: 3.5rem;
  --fs-72: 4.5rem;

  --step-eyebrow: var(--fs-14);
  --step-body:    var(--fs-18);
  --step-body-lg: var(--fs-20);
  --step-lead:    var(--fs-24);
  --step-h4:      var(--fs-18);
  --step-h3:      clamp(1.25rem, 0.8vw + 1.05rem, 1.5rem);
  --step-h2:      clamp(1.625rem, 1.4vw + 1.25rem, 2.25rem);
  --step-h1:      clamp(2rem, 2.4vw + 1.4rem, 3rem);
  --step-display: clamp(2.25rem, 4vw + 0.9rem, 4rem);
  --step-mega:    clamp(2.75rem, 5.5vw + 0.8rem, 4.75rem);

  --lh-display: 1.03;
  --lh-heading: 1.12;
  --lh-body:    1.6;
  --lh-tight:   1.22;

  --tr-tight:   -0.02em;
  --tr-snug:    -0.012em;
  --tr-base:    0;
  --tr-caption: 0.06em;

  --measure:       62ch;
  --measure-lead:  54ch;
  --measure-tight: 46ch;

  /* ===== SPACING (4-px grid) ===== */
  --s-1:  0.25rem;
  --s-2:  0.5rem;
  --s-3:  0.75rem;
  --s-4:  1rem;
  --s-5:  1.25rem;
  --s-6:  1.5rem;
  --s-8:  2rem;
  --s-10: 2.5rem;
  --s-12: 3rem;
  --s-16: 4rem;
  --s-20: 5rem;
  --s-24: 6rem;
  --s-32: 8rem;
  --s-40: 10rem;

  /* ===== RADIUS (rounder per feedback) ===== */
  --r-xs:  6px;
  --r-sm:  8px;
  --r-md:  12px;   /* standard button radius */
  --r-lg:  14px;
  --r-xl:  18px;
  --r-2xl: 24px;
  --r-pill: 999px;

  /* ===== ELEVATION (2 levels only) ===== */
  --shadow-hair:  0 0 0 1px var(--hairline) inset;
  --shadow-rest:  0 1px 0 0 oklch(20% 0.01 270 / 0.04);
  --shadow-lift:  0 16px 40px -16px oklch(20% 0.01 270 / 0.16),
                  0 4px 12px -4px oklch(20% 0.01 270 / 0.08);
  --shadow-photo: 0 24px 48px -24px oklch(20% 0.01 270 / 0.14);

  /* ===== MOTION ===== */
  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
  --ease-out:       cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-in-out:    cubic-bezier(0.4, 0, 0.2, 1);

  --t-fast:    160ms;
  --t-base:    220ms;
  --t-medium:  360ms;
  --t-slow:    600ms;
  --t-cine:   1000ms;

  /* ===== Z ===== */
  --z-base:   0;
  --z-raised: 10;
  --z-nav:    100;
  --z-menu:   200;
  --z-modal: 1000;

  /* ===== LAYOUT ===== */
  --max:       1240px;
  --max-wide:  1360px;
  --max-read:  960px;
  --pad-x:     clamp(1.25rem, 3.5vw, 3rem);
  --nav-h:     72px;

  /* Generous breathing room (user feedback: "нужны хорошие отступы, пространства — во втором было лучше") */
  --sec:        clamp(4.5rem, 9vw, 8rem);     /* vertical section padding */
  --sec-tight:  clamp(2.5rem, 5vw, 4rem);
  --sec-gap:    clamp(3rem, 6vw, 5rem);       /* gap inside a section between blocks */
  --card-pad:   clamp(1.5rem, 2.5vw, 2.25rem);
  --card-gap:   clamp(1.5rem, 2vw, 2rem);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --t-fast: 1ms; --t-base: 1ms; --t-medium: 1ms; --t-slow: 1ms; --t-cine: 1ms;
  }
}