/* ============================================================
   FALAI Design System — Design Tokens
   Version: 1.0.0

   Single source of truth for all visual properties.
   Import this file BEFORE design-system.css.
   ============================================================ */

:root {

  /* ── Color: Backgrounds ────────────────────────────────── */
  --color-bg-deep:          #0B1220;
  --color-bg-base:          #111827;
  --color-bg-surface:       #151D2E;
  --color-bg-surface-2:     #1A2235;
  --color-bg-elevated:      #1F2A3D;

  /* ── Color: Borders ────────────────────────────────────── */
  --color-border:           #1E293B;
  --color-border-light:     #334155;
  --color-border-glass:     rgba(255, 255, 255, 0.08);

  /* ── Color: Accent / Primary (Emerald) ─────────────────── */
  --color-accent:           #10B981;
  --color-accent-hover:     #0F9F70;
  --color-accent-strong:    #01B574;
  --color-accent-light:     #34D399;
  --color-accent-glow:      rgba(16, 185, 129, 0.25);
  --color-accent-glow-strong: rgba(16, 185, 129, 0.4);
  --color-accent-bg:        rgba(16, 185, 129, 0.07);
  --color-accent-bg-medium: rgba(16, 185, 129, 0.10);
  --color-accent-border:    rgba(16, 185, 129, 0.2);

  /* ── Color: Semantic ───────────────────────────────────── */
  --color-danger:           #EF4444;
  --color-danger-bg:        rgba(239, 68, 68, 0.10);
  --color-danger-border:    rgba(239, 68, 68, 0.40);
  --color-danger-dark:      #DC2626;
  --color-success:          #22C55E;
  --color-success-dark:     #059669;
  --color-warning:          #F59E0B;
  --color-info:             #3B82F6;
  --color-info-light:       #38BDF8;

  /* ── Color: Text ───────────────────────────────────────── */
  --color-text:             #F8FAFC;
  --color-text-secondary:   #CBD5E1;
  --color-text-dim:         #94A3B8;
  --color-text-muted:       #64748B;
  --color-text-on-accent:   #000000;
  --color-text-on-danger:   #FECACA;

  /* ── Color: Gradients ──────────────────────────────────── */
  --gradient-heading:       linear-gradient(135deg, #FFFFFF 0%, #E2E8F0 50%, #94A3B8 100%);
  --gradient-heading-accent: linear-gradient(135deg, #FFFFFF 30%, #34D399 100%);
  --gradient-accent:        linear-gradient(135deg, #10B981, #059669);
  --gradient-danger:        linear-gradient(90deg, #DC2626, #EF4444);
  --gradient-glow-hero:     radial-gradient(circle, rgba(16, 185, 129, 0.08) 0%, rgba(16, 185, 129, 0.02) 40%, transparent 70%);
  --gradient-surface:       linear-gradient(180deg, rgba(16, 185, 129, 0.04) 0%, #151D2E 100%);

  /* ── Typography: Font Families ─────────────────────────── */
  --font-display:           'Manrope', system-ui, -apple-system, sans-serif;
  --font-body:              'Inter', system-ui, -apple-system, sans-serif;
  --font-mono:              ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Courier New', monospace;

  /* ── Typography: Font Sizes ────────────────────────────── */
  --text-xs:                12px;
  --text-sm:                13px;
  --text-base:              14px;
  --text-md:                15px;
  --text-lg:                16px;
  --text-xl:                17px;
  --text-2xl:               18px;
  --text-3xl:               19px;
  --text-4xl:               20px;
  --text-5xl:               24px;
  --text-6xl:               28px;
  --text-7xl:               32px;
  --text-8xl:               36px;
  --text-9xl:               40px;
  --text-10xl:              44px;
  --text-11xl:              48px;
  --text-12xl:              52px;
  --text-hero:              64px;

  /* ── Typography: Font Weights ──────────────────────────── */
  --weight-regular:         400;
  --weight-medium:          500;
  --weight-semibold:        600;
  --weight-bold:            700;
  --weight-extrabold:       800;

  /* ── Typography: Line Heights ──────────────────────────── */
  --leading-none:           1;
  --leading-tight:          1.05;
  --leading-snug:           1.1;
  --leading-normal:         1.5;
  --leading-relaxed:        1.7;
  --leading-loose:          1.8;

  /* ── Typography: Letter Spacing ────────────────────────── */
  --tracking-tighter:       -2.5px;
  --tracking-tight:         -2px;
  --tracking-snug:          -1.5px;
  --tracking-normal:        0;
  --tracking-wide:          0.5px;
  --tracking-wider:         1px;
  --tracking-widest:        1.5px;

  /* ── Spacing Scale (8pt grid) ──────────────────────────── */
  --space-0:                0;
  --space-1:                4px;
  --space-2:                8px;
  --space-3:                12px;
  --space-4:                16px;
  --space-5:                20px;
  --space-6:                24px;
  --space-7:                28px;
  --space-8:                32px;
  --space-10:               40px;
  --space-12:               48px;
  --space-14:               56px;
  --space-16:               64px;
  --space-20:               80px;
  --space-24:               96px;
  --space-30:               120px;

  /* ── Border Radius ─────────────────────────────────────── */
  --radius-xs:              4px;
  --radius-sm:              8px;
  --radius-md:              12px;
  --radius-lg:              16px;
  --radius-xl:              24px;
  --radius-full:            100px;

  /* ── Shadows ───────────────────────────────────────────── */
  --shadow-sm:              0 2px 8px rgba(0, 0, 0, 0.15);
  --shadow-md:              0 4px 15px rgba(0, 0, 0, 0.2);
  --shadow-lg:              0 8px 25px rgba(0, 0, 0, 0.3);
  --shadow-xl:              0 20px 50px rgba(0, 0, 0, 0.3);
  --shadow-2xl:             0 25px 60px rgba(0, 0, 0, 0.4);
  --shadow-glow-sm:         0 0 20px rgba(16, 185, 129, 0.15);
  --shadow-glow-md:         0 0 40px rgba(16, 185, 129, 0.25);
  --shadow-glow-lg:         0 0 60px rgba(16, 185, 129, 0.25);
  --shadow-glow-xl:         0 0 80px rgba(16, 185, 129, 0.06);
  --shadow-card-hover:      0 20px 40px rgba(0, 0, 0, 0.2);
  --shadow-nav:             0 4px 30px rgba(0, 0, 0, 0.3);

  /* ── Transitions ───────────────────────────────────────── */
  --ease-default:           cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out:               cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-bounce:            cubic-bezier(0.34, 1.56, 0.64, 1);
  --duration-fast:          150ms;
  --duration-normal:        300ms;
  --duration-slow:          500ms;
  --duration-reveal:        700ms;
  --transition-default:     0.3s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-fast:        0.15s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow:        0.5s cubic-bezier(0.4, 0, 0.2, 1);

  /* ── Z-Index Scale ─────────────────────────────────────── */
  --z-behind:               -1;
  --z-base:                 0;
  --z-raised:               10;
  --z-dropdown:             100;
  --z-sticky:               500;
  --z-nav:                  1000;
  --z-mobile-menu:          999;
  --z-modal-backdrop:       2000;
  --z-modal:                2001;
  --z-toast:                3000;

  /* ── Layout ────────────────────────────────────────────── */
  --max-width:              1200px;
  --max-width-narrow:       800px;
  --max-width-content:      680px;
  --nav-height:             72px;
  --section-gap:            120px;
  --container-padding:      40px;

  /* ── Breakpoints (reference only - CSS vars can't be used in media queries)
       xs:   320px   — Small phones
       sm:   480px   — Large phones
       md:   768px   — Tablets
       lg:   1024px  — Small desktops
       xl:   1200px  — Standard desktops
       2xl:  1440px  — Large desktops
     ────────────────────────────────────────────────────── */
}

/* ── Responsive Token Overrides ─────────────────────────── */

@media (max-width: 1199px) {
  :root {
    --section-gap: 100px;
  }
}

@media (max-width: 768px) {
  :root {
    --section-gap: 80px;
    --nav-height: 64px;
    --container-padding: 20px;
    --text-hero: 36px;
  }
}

@media (max-width: 480px) {
  :root {
    --section-gap: 64px;
    --text-hero: 30px;
  }
}