/* =========================
   Base / Reset / Tokens
   ========================= */

/* 1) Predictable box model */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* 2) Remove default spacing */
html,
body {
  margin: 0;
  padding: 0;
}

/* 3) Base tokens (потом заменишь на свои) */
:root {
  /* Layout */
  --container: 1200px;
  --gutter: 24px;
  --radius: 20px;

  /* Spacing scale */
  --s-8: 8px;
  --s-12: 12px;
  --s-16: 16px;
  --s-24: 24px;
  --s-32: 32px;
  --s-40: 40px;
  --s-56: 56px;
  --s-80: 80px;
  --s-120: 120px;

  /* Type */
  --font-h: "Libre Franklin", sans-serif;
  --font-p: "IBM Plex Sans", sans-serif;

  /* Headings */
  --fs-h1: 72px;
  --lh-h1: 76px;
  --fs-h2: 60px;
  --lh-h2: 64px;
  --fs-h3: 40px;
  --lh-h3: 48px;
  --fs-h4: 32px;
  --lh-h4: 40px;
  --fs-h5: 24px;
  --lh-h5: 32px;

  /* Paragraphs */
  --fs-p-l: 28px;
  --lh-p-l: 36px;
  --fs-p-m: 24px;
  --lh-p-m: 32px;
  --fs-p-s: 20px;
  --lh-p-s: 28px;
  --fs-p-xs: 16px;
  --lh-p-xs: 24px;


  /* Colors (временные, чтобы сразу было читабельно) */
  --bg: #F2F2F0;
  --bg-2: #ffffff;
  --text: #0A0A0A;
  --muted: rgba(10, 10, 10, 0.6);
  --soft: rgba(10, 10, 10, 0.05);
  --accent: #8143F9;
  --negative-bg: #0b0c0f;
  --negative-text: #ffffff;
  --negative-text-muted: rgba(255, 255, 255, 0.6);
  --negative-text-soft: rgba(255, 255, 255, 0.3);

  --nav-pad-x: 24px;
  /* базовый горизонтальный отступ */
  --nav-icon-space: 20px;
  /* сколько добавляем под иконку */
}

.theme-default,
.theme-link {
  --accent: #8143F9;
}

.theme-ranking {
  --accent: #9458DC;
}

.theme-other {
  --accent: #2D43E0;
}

/* 4) Base page */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  min-height: 100vh;
  font-family: var(--font-p);
  background: var(--bg);
  color: var(--text);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
  text-rendering: optimizeLegibility;
}

p,
li {
  text-wrap: pretty;
}

/* 5) Links */
a {
  color: inherit;
  text-decoration: none;
}

a:not(.case-card, .nav-link, .more-work-card) {
  transition: color 200ms ease-out;
}

a:not(.case-card, .nav-link, .more-work-card):hover {
  color: var(--accent);
}

/* 6) Media defaults */
img,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
  height: auto;
}

/* 7) Typography defaults (минимально) */
h1,
h2,
h3,
h4,
h5,
h6,
p {
  margin: 0;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-h);
}

@media (max-width: 600px) {
  h1 {
    /*hyphens: auto;*/
  }
}

/* Headings */
h1 {
  font-size: var(--fs-h1);
  line-height: var(--lh-h1);
  letter-spacing: -0.025em;
}

h2 {
  font-size: var(--fs-h2);
  line-height: var(--lh-h2);
  letter-spacing: -0.02em;
}

h3 {
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
  letter-spacing: -0.015em;
}

h4 {
  font-size: var(--fs-h4);
  line-height: var(--lh-h4);
  letter-spacing: -0.01em;
}

h5 {
  font-size: var(--fs-h5);
  line-height: var(--lh-h5);
  letter-spacing: -0.005em;
}

h1,
h2,
h3,
h4,
h5 {
  font-weight: 700;
}

p+p {
  margin-top: var(--s-16);
}

/* Paragraph utilities */
body {
  font-size: var(--fs-p-m);
  line-height: var(--lh-p-m);
}

.p-l {
  font-size: var(--fs-p-l);
  line-height: var(--lh-p-l);
}

.p-s {
  font-size: var(--fs-p-s);
  line-height: var(--lh-p-s);
}

.p-xs {
  font-size: var(--fs-p-xs);
  line-height: var(--lh-p-xs);
}

.p-l,
.p-m,
.p-s,
.p-xs {
  font-weight: 400;
}

p,
.p-l,
.p-m {
  letter-spacing: 0;
}

.p-s,
.p-xs {
  letter-spacing: 0.01em;
}

/* Extra bold variants */
.p-m-b {
  font-size: var(--fs-p-m);
}

.p-s-b {
  font-size: var(--fs-p-s);
}

.p-m-b,
.p-s-b {
  font-weight: 600;
  line-height: 1.38;
  font-style: normal;
}


/* 9) Focus (доступность) */
:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
}


.container {
  max-width: var(--container);
  margin: 0 auto;
  container-type: inline-size;
}


/*@media (min-width: 601px) and (max-width: 1199px) {*/

@media (min-width: 601px) and (max-width: 999px) {
  :root {
    /* H1: 28 -> 76, LH: 32 -> 80 */
    --fs-h1: clamp(40px, calc(8vw - 20px), 108px);
    --lh-h1: clamp(46px, calc(8vw - 16px), 108px);

    /* H2: 24 -> 60, LH: 32 -> 64 */
    --fs-h2: clamp(24px, calc(6vw - 12px), 60px);
    --lh-h2: clamp(32px, calc(5.333vw + 0px), 64px);

    /* H3: 20 -> 40, LH: 28 -> 48 */
    --fs-h3: clamp(20px, calc(3.333vw + 0px), 40px);
    --lh-h3: clamp(28px, calc(3.333vw + 8px), 48px);

    /* H4: 18 -> 32, LH: 24 -> 40 */
    --fs-h4: clamp(18px, calc(2.333vw + 4px), 32px);
    --lh-h4: clamp(24px, calc(2.667vw + 8px), 40px);

    /* H5: 16 -> 24, LH: 24 -> 32 */
    --fs-h5: clamp(16px, calc(1.333vw + 8px), 24px);
    --lh-h5: clamp(24px, calc(1.333vw + 16px), 32px);

    /* P-L: 18 -> 32 */
    --fs-p-l: clamp(18px, calc(18px + (28 - 18) * ((100vw - 601px) / 598)), 28px);
    --lh-p-l: clamp(26px, calc(26px + (36 - 26) * ((100vw - 601px) / 598)), 36px);

    /* P-M: 16 -> 28 */
    --fs-p-m: clamp(16px, calc(16px + (24 - 16) * ((100vw - 601px) / 598)), 24px);
    --lh-p-m: clamp(24px, calc(24px + (32 - 24) * ((100vw - 601px) / 598)), 32px);

    /* P-S: 14 -> 24 */
    --fs-p-s: clamp(14px, calc(14px + (20 - 14) * ((100vw - 601px) / 598)), 20px);
    --lh-p-s: clamp(20px, calc(20px + (28 - 20) * ((100vw - 601px) / 598)), 28px);

    /* P-XS: 13 -> 20 */
    --fs-p-xs: clamp(13px, calc(13px + (16 - 13) * ((100vw - 601px) / 598)), 16px);
    --lh-p-xs: clamp(18px, calc(18px + (24 - 18) * ((100vw - 601px) / 598)), 24px);
  }
}

@media (max-width: 600px) {
  :root {
    --gutter: 16px;
    --radius: 18px;

    --fs-h1: 40px;
    --lh-h1: 46px;
    /* 4*8 */
    --fs-h2: 24px;
    --lh-h2: 32px;
    /* 4*8 */
    --fs-h3: 20px;
    --lh-h3: 28px;
    /* не кратно 8, но норм */
    --fs-h4: 18px;
    --lh-h4: 24px;
    /* 3*8 */
    --fs-h5: 16px;
    --lh-h5: 24px;
    /* 3*8 */

    --fs-p-l: 20px;
    --lh-p-l: 28px;
    --fs-p-m: 18px;
    --lh-p-m: 26px;
    --fs-p-s: 16px;
    --lh-p-s: 24px;
    --fs-p-xs: 14px;
    --lh-p-xs: 20px;
  }

  h1 {
    letter-spacing: -0.015em;
  }

  h2 {
    letter-spacing: -0.01em;
  }

  h3 {
    letter-spacing: -0.005em;
  }

  h4,
  h5 {
    letter-spacing: 0em;
  }
}