/**
 * variables.css
 * -----------------------------------------------------------------------------
 * Single source of truth for KnowMe's design tokens.
 * Every color, spacing, radius, shadow, font, and motion token lives here.
 * Consumed via `var(--token)` across all other CSS files.
 * -----------------------------------------------------------------------------
 */

:root {
  /* ============================================================
   *  COLOR PALETTE — Dark theme (primary)
   * ============================================================ */
  --color-bg-primary:    #050816;
  --color-bg-secondary:  #0A0F1F;
  --color-bg-card:       #0F172A;
  --color-bg-elevated:   #131C32;
  --color-bg-overlay:    rgba(5, 8, 22, 0.72);

  --color-accent:        #3B82F6;
  --color-accent-hover:  #60A5FA;
  --color-accent-muted:  rgba(59, 130, 246, 0.16);
  --color-accent-glow:   rgba(59, 130, 246, 0.45);

  --color-success:       #10B981;
  --color-warning:       #F59E0B;
  --color-danger:        #EF4444;
  --color-info:          #06B6D4;

  --color-text:          #F8FAFC;
  --color-text-secondary:#CBD5E1;
  --color-muted:         #94A3B8;
  --color-faint:         #64748B;

  --color-border:        rgba(148, 163, 184, 0.12);
  --color-border-strong: rgba(148, 163, 184, 0.24);

  /* Glassmorphism surfaces */
  --glass-bg:            rgba(15, 23, 42, 0.55);
  --glass-border:        rgba(248, 250, 252, 0.08);
  --glass-blur:          16px;

  /* Gradients */
  --gradient-aurora:     linear-gradient(135deg, #3B82F6 0%, #8B5CF6 50%, #EC4899 100%);
  --gradient-cosmic:     linear-gradient(180deg, #050816 0%, #0A0F1F 100%);
  --gradient-text:       linear-gradient(135deg, #F8FAFC 0%, #94A3B8 100%);
  --gradient-glow:       radial-gradient(circle at 50% 50%, var(--color-accent-glow), transparent 70%);

  /* ============================================================
   *  SPACING — 8px base scale
   * ============================================================ */
  --space-0:   0;
  --space-1:   4px;
  --space-2:   8px;
  --space-3:   12px;
  --space-4:   16px;
  --space-5:   24px;
  --space-6:   32px;
  --space-7:   48px;
  --space-8:   64px;
  --space-9:   96px;
  --space-10:  128px;
  --space-11:  160px;
  --space-12:  192px;

  /* ============================================================
   *  TYPOGRAPHY
   * ============================================================ */
  --font-primary:    "General Sans", "Inter", system-ui, -apple-system, sans-serif;
  --font-display:    "General Sans", "Inter", system-ui, sans-serif;
  --font-mono:       "JetBrains Mono", "Fira Code", ui-monospace, monospace;

  /* Modular type scale (1.250 — Major Third) */
  --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 */
  --text-7xl:   6rem;       /* 96px */

  --leading-tight:   1.1;
  --leading-snug:    1.3;
  --leading-normal:  1.55;
  --leading-relaxed: 1.75;

  --tracking-tighter: -0.04em;
  --tracking-tight:   -0.02em;
  --tracking-normal:  0;
  --tracking-wide:    0.02em;
  --tracking-wider:   0.06em;

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

  /* ============================================================
   *  RADIUS
   * ============================================================ */
  --radius-sm:    6px;
  --radius-md:    12px;
  --radius-lg:    20px;
  --radius-xl:    32px;
  --radius-2xl:   48px;
  --radius-full:  999px;

  /* ============================================================
   *  SHADOWS — soft, layered
   * ============================================================ */
  --shadow-xs:    0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-sm:    0 2px 8px rgba(0, 0, 0, 0.35);
  --shadow-md:    0 8px 24px rgba(0, 0, 0, 0.4);
  --shadow-lg:    0 16px 48px rgba(0, 0, 0, 0.5);
  --shadow-xl:    0 32px 80px rgba(0, 0, 0, 0.6);
  --shadow-glow:  0 0 32px var(--color-accent-glow);

  /* ============================================================
   *  LAYOUT
   * ============================================================ */
  --container-max:   1280px;
  --container-narrow: 768px;
  --container-wide:  1440px;
  --gutter:          var(--space-5);
  --navbar-height:   72px;

  /* ============================================================
   *  MOTION
   * ============================================================ */
  --ease-out:     cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out:  cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring:  cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-linear:  linear;

  --duration-fast:    150ms;
  --duration-base:    300ms;
  --duration-slow:    500ms;
  --duration-slower:  800ms;
  --duration-page:    1200ms;

  /* ============================================================
   *  Z-INDEX SCALE
   * ============================================================ */
  --z-base:       1;
  --z-raised:     10;
  --z-dropdown:   100;
  --z-sticky:     200;
  --z-navbar:     500;
  --z-cursor:     9999;
  --z-loader:     10000;
  --z-modal:      9000;
  --z-toast:      9500;
}

/* ============================================================
 *  LIGHT THEME OVERRIDES
 * ============================================================ */
[data-theme="light"] {
  --color-bg-primary:    #F8FAFC;
  --color-bg-secondary:  #F1F5F9;
  --color-bg-card:       #FFFFFF;
  --color-bg-elevated:   #FFFFFF;
  --color-bg-overlay:    rgba(248, 250, 252, 0.72);

  --color-text:          #050816;
  --color-text-secondary:#334155;
  --color-muted:         #64748B;
  --color-faint:         #94A3B8;

  --color-border:        rgba(15, 23, 42, 0.08);
  --color-border-strong: rgba(15, 23, 42, 0.16);

  --glass-bg:            rgba(255, 255, 255, 0.65);
  --glass-border:        rgba(15, 23, 42, 0.06);

  --gradient-cosmic:     linear-gradient(180deg, #F8FAFC 0%, #F1F5F9 100%);
  --gradient-text:       linear-gradient(135deg, #050816 0%, #64748B 100%);

  --shadow-xs:    0 1px 2px rgba(15, 23, 42, 0.06);
  --shadow-sm:    0 2px 8px rgba(15, 23, 42, 0.08);
  --shadow-md:    0 8px 24px rgba(15, 23, 42, 0.10);
  --shadow-lg:    0 16px 48px rgba(15, 23, 42, 0.12);
}