/* ============================================================
   School-master — Design System
   colors_and_type.css
   Brand: система для онлайн-школ
   Font: Montserrat (Cyrillic). Loaded from Google Fonts CDN.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,400;0,500;0,600;0,700;0,800;1,500&display=swap');

:root {
  /* ---------- BRAND COLORS (raw, as provided) ---------- */
  --sm-magenta: #DB1F90;   /* primary brand accent */
  --sm-green:   #08A371;   /* success / growth */
  --sm-orange:  #DF7F07;   /* energy / highlights */
  --sm-ink:     #070707;   /* near-black */

  /* ---------- MAGENTA SCALE (primary) ---------- */
  --magenta-50:  #FDEAF5;
  --magenta-100: #FBD0E8;
  --magenta-200: #F5A2CF;
  --magenta-300: #EE6FB3;
  --magenta-400: #E4459E;
  --magenta-500: #DB1F90;  /* base */
  --magenta-600: #BD157A;
  --magenta-700: #971060;
  --magenta-800: #6F0C47;
  --magenta-900: #4A0830;

  /* ---------- GREEN SCALE (secondary) ---------- */
  --green-50:  #E4F7EF;
  --green-100: #C2EEDC;
  --green-300: #5FCDA0;
  --green-500: #08A371;  /* base */
  --green-600: #068760;
  --green-700: #05674A;

  /* ---------- ORANGE SCALE (secondary) ---------- */
  --orange-50:  #FDF1E0;
  --orange-100: #FADFBC;
  --orange-300: #EFAE54;
  --orange-500: #DF7F07;  /* base */
  --orange-600: #BC6905;
  --orange-700: #8E4F04;

  /* ---------- NEUTRAL / SLATE SCALE ---------- */
  --slate-0:   #FFFFFF;
  --slate-25:  #FBFBFC;
  --slate-50:  #F5F6F8;
  --slate-100: #ECEEF1;
  --slate-200: #DDE0E6;
  --slate-300: #C2C7D0;
  --slate-400: #9aa1ad;
  --slate-500: #6B7280;
  --slate-600: #4B515C;
  --slate-700: #353A43;
  --slate-800: #23262C;
  --slate-900: #14161A;
  --slate-950: #070707;

  /* ---------- SEMANTIC SURFACES ---------- */
  --bg:          var(--slate-0);     /* page background */
  --bg-subtle:   var(--slate-50);    /* alternating sections */
  --bg-sunken:   var(--slate-100);
  --surface:     #FFFFFF;            /* cards */
  --surface-ink: var(--slate-950);   /* dark sections / footer */

  /* ---------- SEMANTIC TEXT ---------- */
  --fg1: var(--slate-950);  /* headings, primary text */
  --fg2: var(--slate-600);  /* body copy */
  --fg3: var(--slate-500);  /* muted / captions */
  --fg-on-dark:    #FFFFFF;
  --fg-on-dark-2:  rgba(255,255,255,0.72);
  --fg-on-brand:   #FFFFFF;

  /* ---------- SEMANTIC ROLES ---------- */
  --primary:        var(--magenta-500);
  --primary-hover:  var(--magenta-600);
  --primary-press:  var(--magenta-700);
  --primary-soft:   var(--magenta-50);
  --accent-green:   var(--green-500);
  --accent-orange:  var(--orange-500);
  --link:           var(--magenta-600);

  /* ---------- BORDERS ---------- */
  --border:        var(--slate-200);
  --border-strong: var(--slate-300);
  --border-on-dark: rgba(255,255,255,0.12);

  /* ---------- RADII ---------- */
  --r-xs:  6px;
  --r-sm:  10px;
  --r-md:  14px;
  --r-lg:  20px;
  --r-xl:  28px;
  --r-2xl: 40px;
  --r-pill: 999px;

  /* ---------- SHADOWS (soft, cool-tinted) ---------- */
  --shadow-xs: 0 1px 2px rgba(20,22,26,0.06);
  --shadow-sm: 0 2px 8px rgba(20,22,26,0.06);
  --shadow-md: 0 8px 24px rgba(20,22,26,0.08);
  --shadow-lg: 0 18px 48px rgba(20,22,26,0.12);
  --shadow-brand: 0 14px 32px rgba(219,31,144,0.28);
  --shadow-green: 0 14px 32px rgba(8,163,113,0.26);

  /* ---------- SPACING (8pt 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;

  /* ---------- TYPOGRAPHY ---------- */
  --font-display: 'Montserrat', -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-body:    'Montserrat', -apple-system, 'Segoe UI', Roboto, sans-serif;

  --w-regular: 400;
  --w-medium:  500;
  --w-semibold:600;
  --w-bold:    700;
  --w-extra:   800;

  /* Fluid type scale */
  --t-display:  clamp(40px, 5.2vw, 68px);   /* hero */
  --t-h1:       clamp(34px, 4vw, 52px);
  --t-h2:       clamp(28px, 3vw, 40px);
  --t-h3:       clamp(22px, 2.2vw, 28px);
  --t-h4:       20px;
  --t-lead:     clamp(18px, 1.5vw, 22px);   /* hero subcopy */
  --t-body:     17px;
  --t-small:    15px;
  --t-caption:  13px;
  --t-eyebrow:  13px;

  --lh-tight: 1.05;
  --lh-snug:  1.18;
  --lh-body:  1.6;
}

/* ============================================================
   SEMANTIC TYPE CLASSES
   ============================================================ */
.sm-eyebrow {
  font-family: var(--font-display);
  font-weight: var(--w-bold);
  font-size: var(--t-eyebrow);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--primary);
}
.sm-display {
  font-family: var(--font-display);
  font-weight: var(--w-extra);
  font-size: var(--t-display);
  line-height: var(--lh-tight);
  letter-spacing: -0.02em;
  color: var(--fg1);
}
.sm-h1 {
  font-family: var(--font-display);
  font-weight: var(--w-bold);
  font-size: var(--t-h1);
  line-height: var(--lh-snug);
  letter-spacing: -0.015em;
  color: var(--fg1);
}
.sm-h2 {
  font-family: var(--font-display);
  font-weight: var(--w-bold);
  font-size: var(--t-h2);
  line-height: var(--lh-snug);
  letter-spacing: -0.01em;
  color: var(--fg1);
}
.sm-h3 {
  font-family: var(--font-display);
  font-weight: var(--w-semibold);
  font-size: var(--t-h3);
  line-height: 1.25;
  color: var(--fg1);
}
.sm-h4 {
  font-family: var(--font-display);
  font-weight: var(--w-semibold);
  font-size: var(--t-h4);
  line-height: 1.3;
  color: var(--fg1);
}
.sm-lead {
  font-family: var(--font-body);
  font-weight: var(--w-regular);
  font-size: var(--t-lead);
  line-height: 1.5;
  color: var(--fg2);
}
.sm-body {
  font-family: var(--font-body);
  font-weight: var(--w-regular);
  font-size: var(--t-body);
  line-height: var(--lh-body);
  color: var(--fg2);
}
.sm-small {
  font-family: var(--font-body);
  font-size: var(--t-small);
  line-height: 1.5;
  color: var(--fg2);
}
.sm-caption {
  font-family: var(--font-body);
  font-size: var(--t-caption);
  line-height: 1.4;
  color: var(--fg3);
}