/* ==========================================================================
   tokens.css — Design system foundation
   Color, typography, spacing, radius, shadow, motion. Theme-aware.
   ========================================================================== */

/* Explicit cascade layer order (lowest → highest priority) */
@layer tokens, base, layout, components, utilities;

@layer tokens {
  :root {
    /* ---- Brand palette (raw) ---- */
    --iris-300: #b4b0ff;
    --iris-400: #8b85ff;
    --iris-500: #5b57f2;
    --iris-600: #4a45e0;
    --iris-700: #3d39c4;
    --cyan-400: #38d4f0;
    --indigo-500: #6366f1;

    /* ---- Neutrals (raw) ---- */
    --neutral-0:  #ffffff;
    --neutral-50: #f7f7fa;
    --neutral-100:#f0f0f4;
    --neutral-200:#e4e4ec;
    --neutral-300:#d2d2dd;
    --neutral-400:#a0a0af;
    --neutral-500:#71717f;
    --neutral-600:#52525e;
    --neutral-700:#3a3a44;
    --neutral-800:#22222a;
    --neutral-900:#141418;
    --neutral-950:#0a0a0f;

    /* ---- Semantic raw ---- */
    --green-500:  #22c55e;
    --amber-500:  #f59e0b;
    --red-500:    #ef4444;

    /* ---- Typography ---- */
    --font-display: "Cairo", system-ui, -apple-system, "Segoe UI", sans-serif;
    --font-body: "Cairo", system-ui, -apple-system, "Segoe UI", sans-serif;
    --font-arabic: "Cairo", system-ui, -apple-system, "Segoe UI", sans-serif;

    /* Fluid type scale (1.25 ratio, clamped) */
    --fs-xs:   clamp(0.75rem, 0.72rem + 0.15vw, 0.8125rem);
    --fs-sm:   clamp(0.875rem, 0.84rem + 0.18vw, 0.9375rem);
    --fs-base: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
    --fs-md:   clamp(1.125rem, 1.06rem + 0.32vw, 1.25rem);
    --fs-lg:   clamp(1.375rem, 1.24rem + 0.66vw, 1.75rem);
    --fs-xl:   clamp(1.75rem, 1.5rem + 1.25vw, 2.5rem);
    --fs-2xl:  clamp(2.25rem, 1.85rem + 2vw, 3.5rem);
    --fs-3xl:  clamp(2.75rem, 2.1rem + 3.2vw, 4.75rem);

    --lh-tight: 1.1;
    --lh-snug: 1.3;
    --lh-base: 1.65;

    --tracking-tight: -0.02em;
    --tracking-snug: -0.011em;
    --tracking-wide: 0.08em;

    /* ---- Spacing scale ---- */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.5rem;
    --space-6: 2rem;
    --space-7: 3rem;
    --space-8: 4rem;
    --space-9: 6rem;
    --space-10: 8rem;
    --section-pad: clamp(4rem, 3rem + 6vw, 8rem);

    /* ---- Layout ---- */
    --container: 1180px;
    --container-narrow: 760px;
    --gutter: clamp(1.25rem, 0.8rem + 2.2vw, 2.5rem);

    /* ---- Radius ---- */
    --radius-sm: 8px;
    --radius-md: 14px;
    --radius-lg: 22px;
    --radius-xl: 32px;
    --radius-pill: 999px;

    /* ---- Motion ---- */
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
    --dur-fast: 140ms;
    --dur: 240ms;
    --dur-slow: 520ms;

    --header-h: 72px;
    --z-header: 100;
    --z-overlay: 200;
    --z-toast: 300;
  }

  /* ====================== LIGHT THEME (default) ====================== */
  :root,
  [data-theme="light"] {
    color-scheme: light;

    --bg: var(--neutral-0);
    --bg-elevated: #fcfcfe;
    --surface: var(--neutral-0);
    --surface-2: var(--neutral-50);
    --surface-3: var(--neutral-100);
    --border: var(--neutral-200);
    --border-strong: var(--neutral-300);

    --text: var(--neutral-900);
    --text-2: var(--neutral-500);
    --text-3: var(--neutral-400);
    --text-on-primary: #ffffff;

    --primary: var(--iris-500);
    --primary-hover: var(--iris-600);
    --primary-soft: color-mix(in srgb, var(--iris-500) 10%, transparent);
    --secondary: var(--indigo-500);
    --accent: var(--cyan-400);

    --success: var(--green-500);
    --warning: var(--amber-500);
    --error: var(--red-500);

    --glass-bg: color-mix(in srgb, var(--neutral-0) 72%, transparent);
    --glass-border: color-mix(in srgb, var(--neutral-900) 8%, transparent);

    --shadow-sm: 0 1px 2px rgba(20, 20, 24, 0.06), 0 1px 1px rgba(20, 20, 24, 0.04);
    --shadow-md: 0 6px 24px -8px rgba(20, 20, 24, 0.12), 0 2px 6px rgba(20, 20, 24, 0.06);
    --shadow-lg: 0 24px 60px -16px rgba(20, 20, 24, 0.18), 0 8px 24px -12px rgba(20, 20, 24, 0.1);
    --shadow-glow: 0 0 0 1px var(--primary-soft), 0 16px 50px -12px color-mix(in srgb, var(--primary) 40%, transparent);

    --grid-line: color-mix(in srgb, var(--neutral-900) 4%, transparent);
    --aurora-1: color-mix(in srgb, var(--iris-500) 50%, transparent);
    --aurora-2: color-mix(in srgb, var(--cyan-400) 40%, transparent);
    --aurora-3: color-mix(in srgb, var(--indigo-500) 45%, transparent);
  }

  /* ====================== DARK THEME ====================== */
  [data-theme="dark"] {
    color-scheme: dark;

    --bg: var(--neutral-950);
    --bg-elevated: #101016;
    --surface: #121219;
    --surface-2: #17171f;
    --surface-3: #1d1d26;
    --border: color-mix(in srgb, #ffffff 9%, transparent);
    --border-strong: color-mix(in srgb, #ffffff 16%, transparent);

    --text: #f3f3f6;
    --text-2: #a3a3b0;
    --text-3: #6f6f7d;
    --text-on-primary: #ffffff;

    --primary: var(--iris-400);
    --primary-hover: var(--iris-300);
    --primary-soft: color-mix(in srgb, var(--iris-400) 16%, transparent);
    --secondary: #818cf8;
    --accent: var(--cyan-400);

    --success: #4ade80;
    --warning: #fbbf24;
    --error: #f87171;

    --glass-bg: color-mix(in srgb, var(--neutral-950) 64%, transparent);
    --glass-border: color-mix(in srgb, #ffffff 10%, transparent);

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-md: 0 8px 30px -10px rgba(0, 0, 0, 0.6);
    --shadow-lg: 0 30px 70px -20px rgba(0, 0, 0, 0.7);
    --shadow-glow: 0 0 0 1px var(--primary-soft), 0 20px 60px -14px color-mix(in srgb, var(--primary) 50%, transparent);

    --grid-line: color-mix(in srgb, #ffffff 5%, transparent);
    --aurora-1: color-mix(in srgb, var(--iris-400) 55%, transparent);
    --aurora-2: color-mix(in srgb, var(--cyan-400) 38%, transparent);
    --aurora-3: color-mix(in srgb, #6366f1 50%, transparent);
  }
}