/* ===========================================================================
   MSA MENTAL CINEMATIC · tokens
   Палітра з розділу 0.4 «Візуальна біблія безперервності».
   Court Chalk · Clay · Storm Navy · Cloud Gold · Championship Light
   =========================================================================== */

:root {
	/* --- Base palette ------------------------------------------------- */
	--chalk:            #ece7d9;  /* Court Chalk — теплий молочно-крейдяний */
	--chalk-warm:       #f5f1e7;
	--chalk-deep:       #d8d2c1;

	--clay:             #b05a3c;  /* Clay — теракота без помаранчевої кислотності */
	--clay-deep:        #8b4229;
	--clay-soft:        #c9765a;

	--navy:             #0d131a;  /* Storm Navy */
	--navy-2:           #131c26;
	--navy-3:           #1c2732;
	--navy-line:        #2a3541;

	--gold:             #c5a06a;  /* Cloud Gold */
	--gold-soft:        #dcc094;
	--light:            #f3e2c2;  /* Championship Light */

	/* --- Semantic ------------------------------------------------------ */
	--paper:            #f4f1e8;  /* editorial plate, світла */
	--paper-2:          #eae5d8;
	--ink:              #11171e;  /* текст на світлому */
	--ink-2:            #3f4954;
	--ink-3:            #6a747f;

	--on-dark:          var(--chalk);
	--on-dark-2:        rgba(236, 231, 217, .74);
	--on-dark-3:        rgba(236, 231, 217, .52);

	--rule-dark:        rgba(236, 231, 217, .16);
	--rule-light:       rgba(17, 23, 30, .13);

	--accent:           var(--clay);
	--accent-on:        #fdf9f1;

	--focus:            #f3e2c2;

	/* --- Type ---------------------------------------------------------- */
	--font-sans: Inter, "Segoe UI", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
	--font-mono: ui-monospace, "SF Mono", "Cascadia Mono", Consolas, "Liberation Mono", monospace;

	/* Fluid scale — 390px → 1440px */
	--fs-eyebrow:  clamp(.70rem,  .60rem + .28vw,  .80rem);
	--fs-micro:    clamp(.75rem,  .70rem + .22vw,  .86rem);
	--fs-small:    clamp(.875rem, .82rem + .24vw,  .98rem);
	--fs-body:     clamp(1rem,    .95rem + .32vw,  1.18rem);
	--fs-lead:     clamp(1.12rem, 1.02rem + .58vw, 1.45rem);
	--fs-h4:       clamp(1.05rem, .98rem + .42vw,  1.30rem);
	--fs-h3:       clamp(1.32rem, 1.14rem + .92vw, 1.95rem);
	--fs-h2:       clamp(1.85rem, 1.42rem + 2.1vw, 3.35rem);
	--fs-h1:       clamp(2.30rem, 1.55rem + 3.6vw, 4.60rem);
	--fs-display:  clamp(3.20rem, 1.20rem + 9.4vw, 9.50rem);

	--lh-tight:  1.02;
	--lh-head:   1.08;
	--lh-snug:   1.28;
	--lh-body:   1.62;

	--tr-tight:  -.035em;
	--tr-head:   -.022em;
	--tr-wide:    .16em;

	/* --- Space --------------------------------------------------------- */
	--sp-1: .25rem;
	--sp-2: .5rem;
	--sp-3: .75rem;
	--sp-4: 1rem;
	--sp-5: 1.5rem;
	--sp-6: 2rem;
	--sp-7: 3rem;
	--sp-8: 4rem;
	--sp-9: 6rem;
	--sp-10: 8rem;

	--section-y:  clamp(4.5rem, 3rem + 6vw, 9rem);
	--gutter:     clamp(1.15rem, .6rem + 2.4vw, 3rem);
	--measure:    68ch;
	--container:  1280px;
	--container-narrow: 900px;

	/* --- Shape --------------------------------------------------------- */
	--r-xs: 4px;
	--r-sm: 8px;
	--r-md: 14px;
	--r-lg: 22px;
	--r-xl: clamp(14px, 2.2vw, 32px);
	--r-pill: 999px;

	--shadow-card: 0 1px 2px rgba(17, 23, 30, .05), 0 12px 34px -18px rgba(17, 23, 30, .30);
	--shadow-lift: 0 2px 6px rgba(17, 23, 30, .07), 0 30px 60px -28px rgba(17, 23, 30, .45);
	--shadow-dark: 0 30px 70px -32px rgba(0, 0, 0, .8);

	/* --- Motion -------------------------------------------------------- */
	--ease-out: cubic-bezier(.16, 1, .3, 1);
	--ease-io:  cubic-bezier(.65, .05, .36, 1);
	--dur-fast: 180ms;
	--dur-mid:  380ms;
	--dur-slow: 720ms;

	/* --- Layers -------------------------------------------------------- */
	--z-canvas:  0;
	--z-content: 10;
	--z-rail:    40;
	--z-header:  60;
	--z-skip:    90;
}

/* Тема має один режим — вона кінематографічна й темна за задумом.
   Світлі editorial-плити є частиною композиції, а не окремою темою. */

/* ---------------------------------------------------------------------------
   Мобільні поля контейнера.

   Десктопна крива --gutter дає 18—20px уже на 320—430px, а це майже впритул
   до кінематографічної рамки hero. Нижче 768px беремо власну криву 14—20px:
   вона лишає більше місця тексту й не чіпає жодної ширини від 768px.
   --------------------------------------------------------------------------- */
@media (max-width: 767px) {
	:root { --gutter: clamp(14px, 4vw, 20px); }
}