/* =============================================================================
   MALINSKA DESIGN TOKENS
   ----------------------------------------------------------------------------
   All theme-wide values live here. Components reference these only — never
   hardcode colors/sizes/spacing in main.css.
   ========================================================================= */

:root {
  /* ── Color: brand ─────────────────────────────────────────────── */
  --c-teal-50:  #E1F5EE;
  --c-teal-100: #B8E0D0;
  --c-teal-500: #1D9E75;
  --c-teal-700: #0D6E6E;   /* primary brand */
  --c-teal-800: #085041;
  --c-teal-900: #04342C;

  --c-coral-50:  #FAECE7;
  --c-coral-100: #F5C4B3;
  --c-coral-500: #D85A30;  /* action/CTA */
  --c-coral-700: #993C1D;
  --c-coral-800: #712B13;

  /* ── Color: neutrals ──────────────────────────────────────────── */
  --c-ink:        #1A1F2E;  /* primary text */
  --c-ink-muted:  #4A5060;  /* body secondary */
  --c-ink-soft:   #6B6F76;  /* small text, captions */
  --c-ink-faint:  #B4B2A9;  /* placeholders */
  --c-line:       rgba(26, 31, 46, 0.10);
  --c-line-soft:  rgba(26, 31, 46, 0.06);
  --c-line-strong:rgba(26, 31, 46, 0.18);

  --c-sand:       #FAF7F2;  /* page bg */
  --c-sand-deep:  #F1ECE3;  /* alt surfaces */
  --c-white:      #FFFFFF;

  /* ── Color: status ────────────────────────────────────────────── */
  --c-success-bg: var(--c-teal-50);
  --c-success-fg: var(--c-teal-800);
  --c-danger-bg:  var(--c-coral-50);
  --c-danger-fg:  var(--c-coral-700);

  /* ── Typography ───────────────────────────────────────────────── */
  --font-sans:  'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --font-serif: 'Crimson Pro', Georgia, 'Times New Roman', serif;

  --fs-xs:   12px;
  --fs-sm:   13px;
  --fs-base: 15px;
  --fs-md:   17px;
  --fs-lg:   22px;
  --fs-xl:   28px;
  --fs-2xl:  36px;
  --fs-3xl:  48px;

  --lh-tight:   1.2;
  --lh-snug:    1.35;
  --lh-normal:  1.55;
  --lh-relaxed: 1.7;

  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semi:    600;

  /* ── Spacing scale (4px grid) ─────────────────────────────────── */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  20px;
  --sp-6:  24px;
  --sp-8:  32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;
  --sp-20: 80px;

  /* ── Layout ───────────────────────────────────────────────────── */
  --content-max:    1200px;
  --content-narrow: 720px;   /* editorial reading column */
  --gutter:         32px;
  --gutter-mobile:  16px;

  /* ── Radii ────────────────────────────────────────────────────── */
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-pill: 999px;

  /* ── Shadows ──────────────────────────────────────────────────── */
  --shadow-sm: 0 1px 2px rgba(26, 31, 46, 0.05);
  --shadow-md: 0 2px 8px rgba(26, 31, 46, 0.08);
  --shadow-lg: 0 4px 16px rgba(26, 31, 46, 0.12);
  --shadow-xl: 0 8px 32px rgba(26, 31, 46, 0.18);

  /* ── Z-index scale ────────────────────────────────────────────── */
  --z-base:    1;
  --z-sticky:  10;
  --z-overlay: 100;
  --z-modal:   1000;

  /* ── Transitions ──────────────────────────────────────────────── */
  --t-fast:   120ms ease;
  --t-base:   180ms ease;
  --t-slow:   320ms ease;
}

/* Mobile gutter override */
@media (max-width: 720px) {
  :root {
    --gutter: var(--gutter-mobile);
    --fs-2xl: 28px;
    --fs-3xl: 36px;
  }
}