/* ============================================================
   SONAR DESIGN SYSTEM — Design Tokens
   Copié de livrables/sites-web/Sonar/colors_and_type.css
   ============================================================ */

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

:root {
  /* ── Brand Colors ── */
  --miami:        #00B4D8;
  --miami-deep:   #0077B6;
  --miami-soft:   #CAF0F8;
  --miami-glow:   rgba(0, 180, 216, 0.25);
  --miami-glow-strong: rgba(0, 180, 216, 0.45);

  --marine:       #0A2540;
  --marine-soft:  #1E3A5F;
  --marine-muted: #0D2D4E;
  --marine-glass: rgba(10, 37, 64, 0.7);

  --coral:        #FF6B6B;
  --coral-soft:   rgba(255, 107, 107, 0.15);
  --sunset:       #FB923C;

  /* ── Neutrals ── */
  --bg:           #FAFAF7;
  --bg-alt:       #F1F5F9;
  --white:        #FFFFFF;

  --ink:          #0A2540;
  --ink-soft:     #475569;
  --ink-mute:     #94A3B8;
  --border:       #E2E8F0;
  --border-dark:  rgba(255, 255, 255, 0.08);

  /* ── Semantic ── */
  --color-primary:       var(--miami);
  --color-primary-hover: var(--miami-deep);
  --color-bg-page:       var(--bg);
  --color-bg-dark:       var(--marine);
  --color-text:          var(--ink);
  --color-text-muted:    var(--ink-soft);
  --color-accent:        var(--coral);

  /* ── Severity colors ── */
  --severity-critical: #EF4444;
  --severity-critical-bg: rgba(239, 68, 68, 0.08);
  --severity-major:    #F59E0B;
  --severity-major-bg: rgba(245, 158, 11, 0.08);
  --severity-minor:    #10B981;
  --severity-minor-bg: rgba(16, 185, 129, 0.08);

  /* ── Typography ── */
  --font-sans:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --font-display: "Inter", -apple-system, sans-serif;
  --font-mono:    "JetBrains Mono", "Fira Code", "Courier New", monospace;

  /* ── Type Scale ── */
  --text-xs:    11px;
  --text-sm:    13px;
  --text-base:  15px;
  --text-md:    17px;
  --text-lg:    20px;
  --text-xl:    24px;
  --text-2xl:   32px;
  --text-3xl:   40px;
  --text-4xl:   56px;
  --text-5xl:   72px;

  /* ── Font Weights ── */
  --fw-regular:   400;
  --fw-medium:    500;
  --fw-semibold:  600;
  --fw-bold:      700;
  --fw-extrabold: 800;
  --fw-black:     900;

  /* ── Line Heights ── */
  --lh-tight:   1.05;
  --lh-snug:    1.25;
  --lh-normal:  1.5;
  --lh-relaxed: 1.65;
  --lh-loose:   1.8;

  /* ── Letter Spacing ── */
  --ls-display: -0.03em;
  --ls-heading: -0.02em;
  --ls-body:    0em;
  --ls-eyebrow: 0.12em;
  --ls-caps:    0.08em;

  /* ── Spacing Scale ── */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-30: 120px;

  /* ── Border Radius ── */
  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-lg:   16px;
  --radius-xl:   24px;
  --radius-pill: 999px;

  /* ── Shadows ── */
  --shadow-sm:          0 1px 3px rgba(0,0,0,0.08), 0 1px 6px rgba(0,0,0,0.05);
  --shadow-md:          0 4px 12px rgba(0,0,0,0.08), 0 2px 4px rgba(0,0,0,0.04);
  --shadow-lg:          0 8px 32px rgba(0,0,0,0.12), 0 2px 8px rgba(0,0,0,0.06);
  --shadow-xl:          0 20px 60px rgba(0,0,0,0.18);
  --shadow-glow:        0 0 24px var(--miami-glow), 0 0 48px rgba(0,180,216,0.12);
  --shadow-glow-strong: 0 0 32px var(--miami-glow-strong);
  --shadow-dark:        0 8px 32px rgba(0,0,0,0.4);

  /* ── Layout ── */
  --max-width:   1100px;
  --section-pad: 120px;

  /* ── Transitions ── */
  --transition-fast: 0.12s ease;
  --transition-base: 0.2s ease;
  --transition-slow: 0.4s ease;
}