/* ============================================================
   Plego Design System — Foundations (subset used by this landing)
   Imported from the Claude Design project
   "Mentorable — промо книги" → _ds/potok-recruitment-design-system-plego
   ============================================================ */

@font-face {
  font-family: "Museo Sans Cyrl";
  src: url("./fonts/Museo_Sans_Cyrl_500.ttf") format("truetype");
  font-weight: 400 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Museo Sans Cyrl";
  src: url("./fonts/Museo_Sans_Cyrl_700.ttf") format("truetype");
  font-weight: 600 800;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ----- Neutral palette ----- */
  --n1000: #121417;
  --n900:  #24282E;
  --n800:  #31373F;
  --n700:  #434B56;
  --n600:  #757E8A;
  --n500:  #9BA1AA;
  --n400:  #BDC1C7;
  --n300:  #D8DBDE;
  --n200:  #E8E9EB;
  --n100:  #F4F5F6;
  --n0:    #FFFFFF;

  /* Neutral with alpha (light theme uses n1000 base) */
  --n1000-x05: hsla(216, 12%, 8%, 0.04);
  --n1000-x1:  hsla(216, 12%, 8%, 0.08);
  --n1000-x2:  hsla(216, 12%, 8%, 0.16);
  --n1000-x3:  hsla(216, 12%, 8%, 0.24);
  --n1000-x4:  hsla(216, 12%, 8%, 0.32);
  --n1000-x6:  hsla(216, 12%, 8%, 0.48);
  --n1000-x8:  hsla(216, 12%, 8%, 0.64);

  --n0-x1:  hsla(0,0%,100%,0.08);
  --n0-x2:  hsla(0,0%,100%,0.16);
  --n0-x4:  hsla(0,0%,100%,0.32);
  --n0-x6:  hsla(0,0%,100%,0.48);
  --n0-x8:  hsla(0,0%,100%,0.64);

  /* ----- Brand -----
     The landing runs on the DS's --blue600 rather than the lighter default
     brand cyan: it carries 3.9:1 against white instead of 2.15:1, so button
     labels and links are actually readable. */
  --brand-primary: #0C82E9;                      /* hsl(208 90% 48%) */
  --brand-primary-x1: hsla(208, 90%, 48%, 0.08);
  --brand-primary-x2: hsla(208, 90%, 48%, 0.16);
  --brand-primary-x4: hsla(208, 90%, 48%, 0.32);
  --brand-primary-x6: hsla(208, 90%, 48%, 0.48);
  --brand-primary-hover:   hsl(208, 90%, 43%);
  --brand-primary-pressed: hsl(208, 90%, 37%);

  /* ----- Accent palette ----- */
  --green600:  #1EB861;
  --green400:  #27CE6F;
  --red600:    #D9453A;
  --yellow600: #F3B114;
  --blue600:   #0C82E9;

  /* ----- Semantic — text ----- */
  --text-primary:   var(--n1000);
  --text-secondary: var(--n1000-x8);
  --text-tertiary:  var(--n1000-x6);
  --text-inverse:   var(--n0);

  /* ----- Semantic — borders ----- */
  --border-field:   var(--n1000-x2);
  --border-divider: var(--n1000-x1);

  /* ----- Semantic — backgrounds ----- */
  --background-app:      var(--n100);
  --background-default:  var(--n0);
  --background-raised:   var(--n0);
  --background-sunken:   var(--n100);
  --background-bold:     var(--n200);
  --background-inverse:  var(--n700);

  /* ----- Spacing (8px step) ----- */
  --spacing-x05: 4px;
  --spacing-x1:  8px;
  --spacing-x2:  16px;
  --spacing-x3:  24px;
  --spacing-x4:  32px;
  --spacing-x6:  48px;
  --spacing-x8:  64px;

  /* ----- Border radius ----- */
  --radius-x05:  4px;
  --radius-x1:   8px;
  --radius-pill: 999px;

  /* ----- Elevation ----- */
  --elevation-8:
    0 2px 4px 0 hsla(0,0%,0%,0.08),
    0 4px 8px 0 hsla(0,0%,0%,0.08);
  --elevation-24:
    0 4px 8px 0 hsla(0,0%,0%,0.08),
    0 8px 24px 0 hsla(0,0%,0%,0.24);
  --elevation-48:
    0 8px 16px 0 hsla(0,0%,0%,0.16),
    0 24px 48px 0 hsla(0,0%,0%,0.24);

  /* ----- Typography ----- */
  --font-sans: "Museo Sans Cyrl", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  --font-size-12: 12px;  --line-height-12: 16px;
  --font-size-13: 13px;  --line-height-13: 18px;
  --font-size-14: 14px;  --line-height-14: 20px;
  --font-size-16: 16px;  --line-height-16: 22px;
  --font-size-20: 20px;  --line-height-20: 26px;
  --font-size-24: 24px;  --line-height-24: 30px;
  --font-size-34: 34px;  --line-height-34: 40px;
  --font-size-48: 48px;  --line-height-48: 58px;
}

/* ----- Base body ----- */
html, body {
  font-family: var(--font-sans);
  color: var(--text-primary);
  background: var(--background-sunken);
  font-size: var(--font-size-14);
  line-height: var(--line-height-14);
  font-weight: 500;
  -webkit-font-smoothing: antialiased;
}

/* ----- Semantic type roles ----- */
.h1, h1 {
  font-size: var(--font-size-20);
  line-height: var(--line-height-20);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--text-primary);
}
.h2, h2 {
  font-size: var(--font-size-16);
  line-height: var(--line-height-16);
  font-weight: 700;
  color: var(--text-primary);
}
.h3, h3 {
  font-size: var(--font-size-14);
  line-height: var(--line-height-14);
  font-weight: 700;
  color: var(--text-primary);
}
.body, p {
  font-size: var(--font-size-14);
  line-height: var(--line-height-14);
  color: var(--text-primary);
}
.caption {
  font-size: var(--font-size-12);
  line-height: var(--line-height-12);
  color: var(--text-secondary);
}