/* ============================================================
   atmosfere Design Tokens
   Source: atmosfere Brand Guidelines §18.1
   ============================================================ */

:root {
  /* ── Brand Colors ── */
  --color-brand-blue:        #2563EB;
  --color-brand-blue-deep:   #1E3A8A;
  --color-brand-cyan:        #60A5FA;
  --color-brand-ice:         #BFDBFE;
  --color-navy:              #0B1220;
  --color-surface-dark:      #111827;
  --color-surface-light:     #F8FAFC;
  --color-white:             #FFFFFF;
  --color-border-light:      #E2E8F0;
  --color-border-dark:       rgba(148, 163, 184, 0.18);

  /* Text */
  --color-text-primary:      #0F172A;
  --color-text-secondary:    #64748B;
  --color-text-muted:        #94A3B8;
  --color-text-inverse:      #FFFFFF;

  /* Wordmark two-tone */
  --wordmark-prefix:         #64748B;
  --wordmark-suffix:         #2563EB;

  /* ── Gradients ── */
  --gradient-brand:          linear-gradient(135deg, #1E3A8A 0%, #2563EB 50%, #60A5FA 100%);
  --gradient-hero-dark:      linear-gradient(135deg, #0B1220 0%, #1E3A8A 100%);
  --gradient-surface-light:  linear-gradient(180deg, #F8FAFC 0%, #FFFFFF 100%);
  --gradient-glow:           radial-gradient(ellipse at 50% 0%, rgba(37, 99, 235, 0.18) 0%, transparent 70%);
  --gradient-cta:            linear-gradient(135deg, #1E3A8A 0%, #2563EB 100%);

  /* ── Typography ── */
  --font-family: "Inter", "SF Pro Display", "SF Pro Text", "Helvetica Neue", Arial, sans-serif;

  --text-xs:   0.75rem;
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-lg:   1.125rem;
  --text-xl:   1.25rem;
  --text-2xl:  1.5rem;
  --text-3xl:  1.875rem;
  --text-4xl:  2.25rem;
  --text-5xl:  3rem;
  --text-6xl:  3.75rem;
  --text-7xl:  4.5rem;

  --font-regular:  400;
  --font-medium:   500;
  --font-semibold: 600;
  --font-bold:     700;

  --leading-tight:   1.2;
  --leading-snug:    1.375;
  --leading-normal:  1.5;
  --leading-relaxed: 1.625;

  --tracking-tight:   -0.025em;
  --tracking-normal:   0em;
  --tracking-wide:     0.025em;
  --tracking-wider:    0.05em;
  --tracking-widest:   0.1em;

  /* ── Spacing ── */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-32: 8rem;

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

  /* ── Shadows ── */
  --shadow-soft:    0 4px 16px rgba(15, 23, 42, 0.08);
  --shadow-card:    0 12px 32px rgba(15, 23, 42, 0.12);
  --shadow-premium: 0 24px 80px rgba(15, 23, 42, 0.18);
  --shadow-dark:    0 24px 80px rgba(0, 0, 0, 0.35);
  --shadow-glow:    0 0 40px rgba(37, 99, 235, 0.25);

  /* ── Glass ── */
  --glass-light-bg:     rgba(255, 255, 255, 0.18);
  --glass-dark-bg:      rgba(15, 23, 42, 0.42);
  --glass-border-light: rgba(255, 255, 255, 0.22);
  --glass-border-dark:  rgba(148, 163, 184, 0.18);
  --glass-blur:         blur(18px);
  --glass-blur-heavy:   blur(24px);

  /* ── Transitions ── */
  --ease-fast:    150ms ease;
  --ease-base:    250ms ease;
  --ease-slow:    400ms ease;
  --ease-premium: 600ms cubic-bezier(0.16, 1, 0.3, 1);

  /* ── Layout ── */
  --container-sm:      640px;
  --container-md:      768px;
  --container-lg:      1024px;
  --container-xl:      1280px;
  --container-2xl:     1440px;
  --container-padding: var(--space-6);

  /* ── Z-Index ── */
  --z-base:    1;
  --z-raised:  10;
  --z-nav:     100;
  --z-modal:   200;
  --z-tooltip: 300;
}