/* Mega Aladdin World — design tokens */

:root {
  /* Type families (overridden via JS by font-pair tweak) */
  --font-display: "Manrope", "Inter Tight", system-ui, sans-serif;
  --font-text: "Inter", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;

  /* Type scale (desktop) */
  --fs-h1: 40px;  --lh-h1: 48px;
  --fs-h2: 32px;  --lh-h2: 40px;
  --fs-h3: 24px;  --lh-h3: 32px;
  --fs-h4: 20px;  --lh-h4: 28px;
  --fs-bodyL: 16px; --lh-bodyL: 24px;
  --fs-bodyM: 14px; --lh-bodyM: 20px;
  --fs-caption: 12px; --lh-caption: 16px;

  /* Radii */
  --r-sm: 6px;
  --r-md: 8px;
  --r-lg: 12px;
  --r-xl: 16px;
  --r-2xl: 24px;
  --r-pill: 999px;

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

  /* Shadows — elevation scale */
  --shadow-1: 0 1px 2px rgba(15, 23, 42, .04), 0 8px 24px rgba(15, 23, 42, .06);
  --shadow-2: 0 2px 6px rgba(15, 23, 42, .06), 0 16px 40px rgba(15, 23, 42, .08);
  --shadow-3: 0 4px 12px rgba(15, 23, 42, .10), 0 24px 60px rgba(15, 23, 42, .12);
  --shadow-focus: 0 0 0 3px color-mix(in oklab, var(--c-primary) 35%, transparent);

  /* Density (overridden by tweak) */
  --card-pad: 16px;
  --row-gap: 24px;

  /* Brand accent (overridden by tweak: gold/teal/purple) */
  --c-accent: #E0A82E;
  --c-accent-hover: #C7901F;
  --c-accent-muted: #FFF5DC;
  --c-accent-ink: #6B4A00;

  /* Motion */
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --t-fast: 120ms;
  --t-base: 200ms;
  --t-slow: 320ms;
}

/* LIGHT THEME */
[data-theme="light"] {
  --c-bg: #FFFFFF;
  --c-surface: #F7F8FB;
  --c-surface-2: #FFFFFF;
  --c-surface-3: #EEF1F7;
  --c-text: #0F172A;
  --c-text-2: #475569;
  --c-text-3: #64748B;
  --c-border: #E2E8F0;
  --c-border-strong: #CBD5E1;
  --c-primary: #1E2A78;
  --c-primary-hover: #162061;
  --c-primary-ink: #FFFFFF;
  --c-primary-soft: #EEF0FB;
  --c-success: #16A34A;
  --c-warning: #F59E0B;
  --c-danger: #DC2626;
  --c-danger-soft: #FEE2E2;
  --c-night: #0B1130; /* hero / star sky */
  --c-night-2: #182056;
  color-scheme: light;
}

/* DARK THEME */
[data-theme="dark"] {
  --c-bg: #0B0F1A;
  --c-surface: #141A2A;
  --c-surface-2: #1B2238;
  --c-surface-3: #232B45;
  --c-text: #F1F5F9;
  --c-text-2: #94A3B8;
  --c-text-3: #7A8597;
  --c-border: #2A3147;
  --c-border-strong: #3A4264;
  --c-primary: #5B6BD8;
  --c-primary-hover: #7281E0;
  --c-primary-ink: #FFFFFF;
  --c-primary-soft: #1C2243;
  --c-success: #22C55E;
  --c-warning: #FBBF24;
  --c-danger: #F87171;
  --c-danger-soft: #3A1414;
  --c-night: #050816;
  --c-night-2: #0F1638;
  color-scheme: dark;
}

/* Accent variants (set via [data-accent]) */
[data-accent="gold"] {
  --c-accent: #E0A82E;
  --c-accent-hover: #C7901F;
  --c-accent-muted: #FFF5DC;
  --c-accent-ink: #6B4A00;
}
[data-theme="dark"][data-accent="gold"] {
  --c-accent: #F2C14E;
  --c-accent-hover: #E0A82E;
  --c-accent-muted: #3A2E10;
  --c-accent-ink: #FFE9B3;
}
[data-accent="teal"] {
  --c-accent: #0EA5A4;
  --c-accent-hover: #0B8584;
  --c-accent-muted: #D6F4F3;
  --c-accent-ink: #003A39;
}
[data-theme="dark"][data-accent="teal"] {
  --c-accent: #2DD4D2;
  --c-accent-hover: #0EA5A4;
  --c-accent-muted: #0C2B2B;
  --c-accent-ink: #B7F3F2;
}
[data-accent="purple"] {
  --c-accent: #8B5CF6;
  --c-accent-hover: #7C4DEC;
  --c-accent-muted: #EFE7FE;
  --c-accent-ink: #2E1065;
}
[data-theme="dark"][data-accent="purple"] {
  --c-accent: #A78BFA;
  --c-accent-hover: #8B5CF6;
  --c-accent-muted: #261A4A;
  --c-accent-ink: #E2D6FF;
}

/* Density */
[data-density="compact"] {
  --card-pad: 12px;
  --row-gap: 16px;
}
[data-density="regular"] {
  --card-pad: 16px;
  --row-gap: 24px;
}
[data-density="comfy"] {
  --card-pad: 22px;
  --row-gap: 32px;
}

/* Motion preference (overridden by tweak) */
[data-motion="reduced"] *,
[data-motion="reduced"] *::before,
[data-motion="reduced"] *::after {
  transition-duration: 1ms !important;
  animation-duration: 1ms !important;
  animation-iteration-count: 1 !important;
}
[data-motion="none"] *,
[data-motion="none"] *::before,
[data-motion="none"] *::after {
  transition: none !important;
  animation: none !important;
}