/* ── Anteomnio 3.0 — Design Tokens ─────────────────────────────────────────── */
:root {
  /* Colors */
  --color-bg:           #ffffff;
  --color-bg-soft:      #f8f8f7;
  --color-bg-muted:     #f2f2f0;
  --color-surface:      #ffffff;
  --color-border:       #e8e8e5;
  --color-border-soft:  #f0f0ed;
  --color-border-strong:#b0b0ab;

  --color-text:         #111110;
  --color-text-2:       #3d3d3a;
  --color-text-3:       #595956;
  --color-text-4:       #767672;
  --color-text-inv:     #ffffff;

  --color-accent:       #1a3fa8;        /* Deep blue */
  --color-accent-hover: #142e82;
  --color-accent-light: #eef1fb;
  --color-accent-muted: #6b83c4;

  --color-success:      #16a34a;
  --color-warning:      #d97706;
  --color-danger:       #dc2626;
  --color-info:         #0891b2;

  /* Typography */
  --font-sans:   'Inter', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono:   'JetBrains Mono', 'Fira Code', 'Courier New', monospace;

  --text-xs:    0.75rem;    /* 12px */
  --text-sm:    0.875rem;   /* 14px */
  --text-base:  1rem;       /* 16px */
  --text-md:    1.125rem;   /* 18px */
  --text-lg:    1.25rem;    /* 20px */
  --text-xl:    1.5rem;     /* 24px */
  --text-2xl:   1.875rem;   /* 30px */
  --text-3xl:   2.25rem;    /* 36px */
  --text-4xl:   3rem;       /* 48px */
  --text-5xl:   3.75rem;    /* 60px */
  --text-6xl:   4.5rem;     /* 72px */

  --leading-tight:  1.2;
  --leading-snug:   1.375;
  --leading-normal: 1.5;
  --leading-relaxed:1.6;
  --leading-loose:  1.75;

  --weight-normal:  400;
  --weight-medium:  500;
  --weight-semi:    600;
  --weight-bold:    700;

  /* Spacing (8px scale) */
  --space-1:  0.25rem;   /* 4px  */
  --space-2:  0.5rem;    /* 8px  */
  --space-3:  0.75rem;   /* 12px */
  --space-4:  1rem;      /* 16px */
  --space-5:  1.25rem;   /* 20px */
  --space-6:  1.5rem;    /* 24px */
  --space-8:  2rem;      /* 32px */
  --space-10: 2.5rem;    /* 40px */
  --space-12: 3rem;      /* 48px */
  --space-16: 4rem;      /* 64px */
  --space-20: 5rem;      /* 80px */
  --space-24: 6rem;      /* 96px */
  --space-32: 8rem;      /* 128px */

  /* Layout */
  --nav-height:       72px;
  --container-max:    1280px;
  --container-pad:    var(--space-6);
  --section-pad:      var(--space-20);
  --section-pad-sm:   var(--space-12);
  --section-pad-lg:   var(--space-24);

  /* Radius */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-2xl:  24px;
  --radius-full: 9999px;

  /* Shadow */
  --shadow-sm:   0 1px 2px rgba(0,0,0,.05);
  --shadow-md:   0 4px 12px rgba(0,0,0,.08);
  --shadow-lg:   0 8px 32px rgba(0,0,0,.10);
  --shadow-xl:   0 16px 48px rgba(0,0,0,.12);

  /* Transitions */
  --ease-fast:   0.15s ease;
  --ease-base:   0.2s ease;
  --ease-slow:   0.3s ease;
  --ease-spring: cubic-bezier(.34,1.56,.64,1);

  /* Z-index */
  --z-nav:     100;
  --z-overlay: 200;
  --z-modal:   300;
  --z-toast:   400;

  /* Alert / Badge semantic tokens (overridden in dark mode) */
  --alert-success-bg:     #f0fdf4;
  --alert-success-fg:     #15803d;
  --alert-success-border: #bbf7d0;
  --alert-error-bg:       #fef2f2;
  --alert-error-fg:       #dc2626;
  --alert-error-border:   #fecaca;
  --badge-danger-bg:      #fef2f2;
  --badge-danger-fg:      #dc2626;
  --badge-warning-bg:     #fffbeb;
  --badge-warning-fg:     #d97706;
  --badge-warning-border: #fde68a;
}

/* ── Mobile Spacing Scale‑Down ───────────────────────────────────────────────
   Reduces global container padding and section vertical rhythm on small screens
   so content is not over-compressed on 375‑640px viewports.
   ─────────────────────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  :root {
    --container-pad:  var(--space-4);    /* 16px  (was 24px) */
    --section-pad:    var(--space-12);   /* 48px  (was 80px) */
    --section-pad-sm: var(--space-8);    /* 32px  (was 48px) */
    --section-pad-lg: var(--space-16);   /* 64px  (was 96px) */
  }
}