/* ─────────────────────────────────────────────────────────────────
   EAZZY Design System — Color & Typography Tokens
   Source of truth: Figma file "eazzy.fig"
   Two parallel brand expressions ride on one UI vocabulary:
     • Заказчик / Business → Electric Violet
     • Исполнитель / Образование → Deep Teal
   ───────────────────────────────────────────────────────────────── */

/* ===================  FONTS  =====================
   Primary (UI, body, headlines): Inter — Google Fonts
   Display (EAZZY wordmark only): Unbounded — Google Fonts
   Brand-utility (MTS ID button): MTS Wide is private; we substitute Inter
     Bold uppercase + 0.06em tracking. SUBSTITUTION — flag to user.
   ================================================= */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@200;300;400;500;600;700;800&family=Unbounded:wght@400;500;700&family=Atma:wght@400;500;600;700&display=swap');

:root {
  /* ===================  BRAND — VIOLET  =====================
     Заказчик / Business. Sourced from Figma frequencies:
     5E13FF (18 672×) and 380B99 (14 703×) are the two most-used
     hues in the entire file — this is the brand's loudest voice. */
  --brand-violet:        #5E13FF;   /* Elec_Violet 100% — primary CTA, links */
  --brand-violet-700:    #380B99;   /* Violet 70% — pressed/hover */
  --brand-violet-deep:   #170F49;   /* Indigo Black — gradient floor */
  --brand-violet-mid:    #342B6D;   /* mid-stop in soft hero gradient */
  --brand-purple:        #C3A7FE;   /* Purple — accent / illustration */
  --brand-mauve:         #E5D6FE;   /* Mauve Tint 20% — soft fill */
  --brand-lilac:         #F2EAFF;   /* Pale Lilac 10% — wash */
  --brand-lavender:      #F7F3FF;   /* Lavender 5% — page bg */

  /* ===================  BRAND — TEAL  =====================
     Исполнитель / Образование. The teal anchor 008275 (1 394×) carries
     the educational product; near-black 011519 (200×) is its dark surface. */
  --brand-teal:          #008275;   /* Deep Teal 100% — primary CTA */
  --brand-teal-700:      #18736A;   /* hover / shadow */
  --brand-teal-deep:     #011519;   /* near-black bg, navbar, footer */
  --brand-teal-mid:      #002D29;   /* mid-tone for footer */
  --brand-mint:          #80FFF3;   /* Mint — wordmark accent on dark */
  --brand-aqua:          #C2F0EB;   /* Aqua wash */
  --brand-mint-wash:     #EAF7F5;   /* page wash on the teal side */

  /* ===================  STATUS / SEMANTIC  ===================== */
  --status-success:      #199600;   /* Green — Оплачено / Готово */
  --status-warning:      #DB5B00;   /* Orange — На доработку */
  --status-danger:       #C80101;   /* Red — Отклонено / overdue */
  --status-info:         #299BFF;   /* Cobalt — info chips */
  --status-yellow:       #F8C600;   /* Yellow — pending / accent */

  --status-success-soft: #D8F0D2;
  --status-warning-soft: #FBE2D0;
  --status-danger-soft:  #FAD3D3;
  --status-info-soft:    #C4DFFF;

  /* ===================  NEUTRALS  ===================== */
  --black:               #1C1C1C;   /* Dark Gray — primary text */
  --black-pure:           #000000;
  --gray-900:            #070828; /* @kind color */ /* near-black background option */
  --gray-700:            #212121;
  --gray-600:            #3A3A3A;
  --gray-500:            #8E939C;   /* M_Gray — captions, hint */
  --gray-400:            #899399;   /* secondary text on light bg */
  --gray-300:            #D4D5D6;   /* dividers */
  --gray-200:            #EAEAEA;   /* L_Gray — chip bg */
  --gray-100:            #F5F5F5;   /* page wash */
  --gray-050:            #FAFAFA;
  --white:               #FFFFFF;

  /* ===================  ALPHA TEXT  ===================== */
  --text-primary:        rgba(28,28,28,1);
  --text-secondary:      rgba(28,28,28,0.7);
  --text-tertiary:       rgba(28,28,28,0.4);
  --text-disabled:       rgba(28,28,28,0.2);
  --text-on-dark:        #FFFFFF;
  --text-on-dark-soft:   rgba(255,255,255,0.7);
  --text-link:           var(--brand-violet);

  /* ===================  SURFACES  ===================== */
  --bg:                  #FFFFFF;
  --bg-soft:             #F5F5F5;
  --bg-violet-wash:      #F7F3FF;
  --bg-teal-wash:        #EAF7F5;
  --surface-card:        #FFFFFF;
  --surface-table-head:  #D9EBE7;   /* soft teal table header */
  --surface-table-row:   #F7FAF9;
  --surface-modal:       #FFFFFF;

  --border-hairline:     rgba(28,28,28,0.08);
  --border-soft:         rgba(28,28,28,0.12);
  --border-strong:       rgba(28,28,28,0.24);

  /* ===================  GRADIENTS  ===================== */
  --grad-violet:        linear-gradient(180deg, #5E13FF 0%, #170F49 100%); /* @kind color */
  --grad-violet-soft:   linear-gradient(180deg, #5E13FF 0%, #342B6D 100%); /* @kind color */
  --grad-teal:          linear-gradient(180deg, #18736A 0%, #011519 100%); /* @kind color */
  --grad-teal-bright:   linear-gradient(180deg, #008275 0%, #011519 100%); /* @kind color */
  --grad-mint-card:     linear-gradient(180deg, #008275 0%, #80FFF3 200%); /* @kind color */
  --grad-page-violet:   linear-gradient(180deg, #F7F3FF 0%, #FFFFFF 100%); /* @kind color */

  /* ===================  EFFECTS  ===================== */
  --shadow-sm:    0 1px 2px rgba(0,0,0,0.06);
  --shadow-md:    0 4px 6px rgba(0,0,0,0.09);          /* canonical card */
  --shadow-lg:    0 8px 24px rgba(171,190,209,0.40);   /* lifted card */
  --shadow-xl:    0 4px 4px rgba(0,0,0,0.25);          /* hero blob */
  --shadow-brand: 0 6px 20px rgba(94,19,255,0.25);     /* violet CTA glow */
  --shadow-teal:  0 6px 20px rgba(0,130,117,0.25);
  --shadow-inset: inset 0 0 0 1px rgba(28,28,28,0.06);

  /* ===================  RADII  ===================== */
  --radius-xs:   4px;
  --radius-sm:   8px;
  --radius-md:   10px;          /* default button, small card */
  --radius-lg:   16px;          /* MTS-ID-style button */
  --radius-xl:   20px;          /* big cards, login modal */
  --radius-2xl:  24px;
  --radius-3xl:  32px;
  --radius-pill: 999px;

  /* ===================  SPACING (4-px grid) ===================== */
  --sp-1:   4px;    /* hairline gap */
  --sp-2:   8px;    /* icon ↔ label */
  --sp-3:   12px;   /* field padding */
  --sp-4:   16px;   /* card inner gap */
  --sp-5:   20px;   /* button padding */
  --sp-6:   24px;   /* between cards */
  --sp-8:   32px;   /* header padding */
  --sp-10:  40px;
  --sp-12:  48px;   /* section vertical */
  --sp-16:  64px;   /* marketing band */
  --sp-20:  80px;
  --sp-24:  96px;

  /* ===================  TYPE FAMILIES  ===================== */
  --font-sans:    'Inter', -apple-system, system-ui, sans-serif;
  --font-display: 'Unbounded', 'Inter', sans-serif;
  --font-mts:     'Inter', sans-serif;        /* MTS Wide substitute */
  --font-mono:    ui-monospace, SFMono-Regular, Menlo, monospace;

  /* ===================  TYPE — DESKTOP  ===================== */
  --h1-size:      64px;  --h1-line:      76px;  --h1-weight: 600;
  --h2-size:      36px;  --h2-line:      44px;  --h2-weight: 700;
  --h3-size:      28px;  --h3-line:      36px;  --h3-weight: 600;
  --h4-size:      20px;  --h4-line:      28px;  --h4-weight: 600;
  --body-1-size:  18px;  --body-1-line:  28px;
  --body-2-size:  16px;  --body-2-line:  24px;
  --body-3-size:  14px;  --body-3-line:  20px;
  --caption-size: 12px;  --caption-line: 16px;
  --overline-size: 11px; --overline-line: 14px; /* uppercase + tracked */

  /* ===================  TYPE — MOBILE  ===================== */
  --h1-size-m:    28px;  --h1-line-m:    36px;
  --h2-size-m:    24px;  --h2-line-m:    32px;
  --h3-size-m:    18px;  --h3-line-m:    24px;
  --h4-size-m:    16px;  --h4-line-m:    20px;

  /* ===================  MOTION  ===================== */
  --ease-out:     cubic-bezier(0.2, 0.8, 0.2, 1); /* @kind other */
  --ease-in-out:  cubic-bezier(0.65, 0, 0.35, 1); /* @kind other */
  --dur-fast:     120ms; /* @kind other */
  --dur-base:     200ms; /* @kind other */
  --dur-slow:     320ms; /* @kind other */
}

/* ===================  ELEMENT SEMANTICS  ===================== */
html, body {
  font-family: var(--font-sans);
  color: var(--text-primary);
  background: var(--bg);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, .h1 { font-family: var(--font-sans); font-weight: var(--h1-weight); font-size: var(--h1-size); line-height: var(--h1-line); letter-spacing: -0.01em; margin: 0; }
h2, .h2 { font-family: var(--font-sans); font-weight: var(--h2-weight); font-size: var(--h2-size); line-height: var(--h2-line); margin: 0; }
h3, .h3 { font-family: var(--font-sans); font-weight: var(--h3-weight); font-size: var(--h3-size); line-height: var(--h3-line); letter-spacing: 0.01em; margin: 0; }
h4, .h4 { font-family: var(--font-sans); font-weight: var(--h4-weight); font-size: var(--h4-size); line-height: var(--h4-line); letter-spacing: 0.01em; margin: 0; }

p,  .body-1  { font-size: var(--body-1-size); line-height: var(--body-1-line); margin: 0 0 var(--sp-3); }
.body-2      { font-size: var(--body-2-size); line-height: var(--body-2-line); }
.body-3      { font-size: var(--body-3-size); line-height: var(--body-3-line); }
.caption     { font-size: var(--caption-size); line-height: var(--caption-line); color: var(--text-tertiary); letter-spacing: 0.02em; }
.overline    { font-size: var(--overline-size); line-height: var(--overline-line); letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-tertiary); font-weight: 600; }

a { color: var(--text-link); text-decoration: none; }
a:hover { text-decoration: underline; }

code, pre { font-family: var(--font-mono); }

/* The wordmark — Unbounded only here. Never set on body copy. */
.eazzy-mark { font-family: var(--font-display); font-weight: 500; letter-spacing: 0.10em; }

/* ===================  CONVENIENCE BACKGROUNDS  ===================== */
.bg-violet      { background: var(--brand-violet);       color: #fff; }
.bg-violet-deep { background: var(--brand-violet-deep);  color: #fff; }
.bg-teal        { background: var(--brand-teal);         color: #fff; }
.bg-teal-deep   { background: var(--brand-teal-deep);    color: #fff; }
.bg-wash-v      { background: var(--bg-violet-wash); }
.bg-wash-t      { background: var(--bg-teal-wash); }
.grad-violet    { background: var(--grad-violet);        color: #fff; }
.grad-teal      { background: var(--grad-teal);          color: #fff; }

/* ===================  MOBILE TYPE SCALE  ===================== */
@media (max-width: 720px) {
  h1, .h1 { font-size: var(--h1-size-m); line-height: var(--h1-line-m); }
  h2, .h2 { font-size: var(--h2-size-m); line-height: var(--h2-line-m); }
  h3, .h3 { font-size: var(--h3-size-m); line-height: var(--h3-line-m); }
  h4, .h4 { font-size: var(--h4-size-m); line-height: var(--h4-line-m); }
}