/* ══════════════════════════════════════════════════════
   DESIGN TOKENS — Single source of truth
   Natalia Koldaeva Design System v1.0
   
   Change here → all pages update automatically.
   Do NOT copy these into individual HTML files.
══════════════════════════════════════════════════════ */

:root {

  /* ── Core Color Palette ──────────────────────────── */
  --c-white: #FFFFFF;   /* Main background              */
  --c-sand:  #EEEDEB;   /* Supportive background        */
  --c-peach: #FFE9D6;   /* Accent background            */
  --c-taupe: #757263;   /* Main accent                  */
  --c-black: #000000;   /* Main ink                     */

  /* ── Semantic Surface Tokens ─────────────────────── */
  --bg:        #FFFFFF;
  --surface-1: #EEEDEB;
  --surface-2: rgba(117,114,99,0.08);
  --surface-3: #FFE9D6;

  /* ── Border Tokens ───────────────────────────────── */
  --border:        rgba(117,114,99,0.12);
  --border-med:    rgba(117,114,99,0.22);
  --border-strong: rgba(117,114,99,0.40);

  /* ── Text / Ink Tokens ───────────────────────────── */
  --text-primary:   #000000;
  --text-secondary: rgba(0,0,0,0.50);
  --text-tertiary:  rgba(0,0,0,0.28);
  --text-inverse:   #FFFFFF;

  /* ── Accent Tokens ───────────────────────────────── */
  --accent:        #757263;
  --accent-faint:  rgba(117,114,99,0.08);
  --accent-medium: rgba(117,114,99,0.15);
  --accent-border: rgba(117,114,99,0.22);

  /* ── Status Colors ───────────────────────────────── */
  --green:       #2E7D32;
  --green-faint: rgba(46,125,50,0.08);
  --red:         #B91C1C;
  --red-faint:   rgba(185,28,28,0.07);

  /* ── Typography ──────────────────────────────────── */
  --font-display: 'Noto Sans', sans-serif;  /* H1–H4, display, nav logo */
  --font-body:    'Poppins', sans-serif;    /* Body, UI, captions       */
  --font-mono:    'Menlo', 'Courier New', monospace;

  /* ── Heading Style Tokens ── */
  --h-weight: 500;
  --h-lh:     1.4;
  --h-ls:     0;

  /* ── Paragraph Style Tokens ── */
  --p-weight: 300;
  --p-lh:     1.8;
  --p-ls:     0em;

  /* ── Heading Size Scale ── */
  --h1: 4rem;      /* 64px  — Page Title    */
  --h2: 2.3rem;    /* ~37px — Section Hero  */
  --h3: 2.2rem;    /* ~35px — Section Title */
  --h4: 1.6rem;    /* ~26px — Card Headline */

  /* ── Paragraph Size Scale ── */
  --p1: 1.5rem;    /* 24px  — Lead          */
  --p2: 1rem;      /* 16px  — Body ★        */
  --p3: 0.9rem;    /* ~14px — Small         */
  --p4: 0.6rem;    /* ~10px — Caption/Micro */

  /* ── Full Type Scale (Base 16px) ── */
  --fs-2xs:  0.6rem;
  --fs-xs:   0.75rem;
  --fs-sm:   0.9rem;
  --fs-base: 1rem;
  --fs-xl:   1.25rem;
  --fs-2xl:  1.5rem;
  --fs-3xl:  1.6rem;
  --fs-4xl:  2.2rem;
  --fs-5xl:  2.3rem;
  --fs-6xl:  4rem;
  --fs-7xl:  5rem;
  --fs-8xl:  7rem;

  /* ── Line Heights ── */
  --lh-none:    1;
  --lh-tighter: 1.05;
  --lh-tight:   1.15;
  --lh-snug:    1.25;
  --lh-normal:  1.4;
  --lh-relaxed: 1.6;
  --lh-loose:   1.8;

  /* ── Letter Spacing ── */
  --ls-tightest: -0.04em;
  --ls-tighter:  -0.025em;
  --ls-tight:    -0.015em;
  --ls-normal:    0em;
  --ls-wide:      0.02em;
  --ls-wider:     0.06em;
  --ls-widest:    0.1em;   /* Poppins label caps · UI elements */

  /* ── Spacing Scale — 4px base unit ──────────────── */
  --sp-0:   0px;
  --sp-1:   4px;    /* Icon nudge             */
  --sp-2:   8px;    /* Inline gap             */
  --sp-3:   12px;   /* Compact list           */
  --sp-4:   16px;   /* BASE ★ · mobile margin */
  --sp-5:   20px;   /* Card padding (mob)     */
  --sp-6:   24px;   /* Desktop gutter         */
  --sp-8:   32px;   /* Card padding (desk)    */
  --sp-10:  40px;   /* Feature block gap      */
  --sp-12:  48px;   /* Section padding (mob)  */
  --sp-16:  64px;   /* Hero padding           */
  --sp-20:  80px;   /* Desktop outer margin   */
  --sp-24:  96px;   /* Page section padding   */
  --sp-32:  128px;  /* Landing hero divider   */

  /* ── Layout Grid — Web ──────────────────────────── */
  --container-max:   1240px;
  --container-prose: 720px;
  --container-card:  480px;
  --gutter-desktop:  24px;
  --gutter-tablet:   16px;
  --gutter-mobile:   16px;
  --margin-2xl:      80px;   /* 1440px */
  --margin-xl:       48px;   /* 1280px */
  --margin-lg:       32px;   /* 1024px */
  --margin-md:       24px;   /* 768px  */
  --margin-sm:       16px;   /* 375px  */
  --margin-xs:       12px;   /* 320px  */

  /* ── Breakpoints ── */
  --bp-xs:  320px;
  --bp-sm:  375px;
  --bp-md:  768px;
  --bp-lg:  1024px;
  --bp-xl:  1280px;
  --bp-2xl: 1440px;

  /* ── Radii ── */
  --r-sm:  6px;
  --r-md:  10px;
  --r-lg:  16px;
  --r-xl:  20px;
  --r-2xl: 28px;

  /* ── Button Tokens ── */
  --btn-font:        'Noto Sans', sans-serif;
  --btn-weight:      600;
  --btn-size:        1rem;
  --btn-ls:          0;
  --btn-transform:   none;
  --btn-radius:      9999px;
  --btn-pad-v:       12px;
  --btn-pad-h:       28px;
  --btn-pad-v-sm:    8px;
  --btn-pad-h-sm:    20px;
  --btn-pad-v-lg:    16px;
  --btn-pad-h-lg:    40px;
  --btn-pad-v-xl:    20px;
  --btn-pad-h-xl:    52px;
  --btn-size-sm:     0.875rem;
  --btn-size-md:     1rem;
  --btn-size-lg:     1.125rem;
  --btn-size-xl:     1.25rem;
  --btn-transition:  all 0.18s ease;
  --btn-focus-ring:  0 0 0 3px rgba(117,114,99,0.35);

  /* Button — Primary Solid */
  --btn-solid-bg:            #000000;
  --btn-solid-text:          #FFFFFF;
  --btn-solid-bg-hover:      #757263;
  --btn-solid-bg-active:     rgba(0,0,0,0.82);
  --btn-solid-bg-disabled:   rgba(0,0,0,0.10);
  --btn-solid-text-disabled: rgba(0,0,0,0.28);

  /* Button — Primary Outline */
  --btn-outline-border:          #000000;
  --btn-outline-text:            #000000;
  --btn-outline-border-hover:    #000000;
  --btn-outline-bg-hover:        #000000;
  --btn-outline-text-hover:      #FFFFFF;
  --btn-outline-border-disabled: rgba(0,0,0,0.16);
  --btn-outline-text-disabled:   rgba(0,0,0,0.28);
}