/* ═══════════════════════════════════════════════════════════
   3mi Store — Design Tokens (CSS Custom Properties)
   Single source of truth for all visual decisions
   Modern, refined, glassmorphism-ready system
   ═══════════════════════════════════════════════════════════ */

/* ─── COLOR PRIMITIVES ─── */
/* Base palette — semantic aliases reference these */
:root {
  /* Neutrals — warmer, more sophisticated */
  --color-neutral-0: #ffffff;
  --color-neutral-50: #fafafa;
  --color-neutral-100: #f4f3f1;
  --color-neutral-200: #e7e5e2;
  --color-neutral-300: #d6d3cf;
  --color-neutral-400: #a8a4a0;
  --color-neutral-500: #787470;
  --color-neutral-600: #5a5652;
  --color-neutral-700: #44403c;
  --color-neutral-800: #2e2a27;
  --color-neutral-900: #1c1a18;
  --color-neutral-950: #0d0c0b;

  /* Brand / Accent — richer, more vibrant */
  --color-brand-50: #fdf0f1;
  --color-brand-100: #fae1e3;
  --color-brand-200: #f5c4c8;
  --color-brand-300: #eda6ad;
  --color-brand-400: #e37980;
  --color-brand-500: #d94d57;  /* primary accent — slightly warmer */
  --color-brand-600: #c43d46;
  --color-brand-700: #a33138;
  --color-brand-800: #852a2f;
  --color-brand-900: #6b2327;

  /* Semantic colors — refined */
  --color-success-500: #1ec95e;
  --color-success-600: #1aa34e;
  --color-warning-500: #f5a01a;
  --color-warning-600: #d48818;
  --color-error-500: #f04444;
  --color-error-600: #cc3838;
  --color-info-500: #3b8cf6;
  --color-info-600: #2d7ae6;

  /* Social brand colors */
  --color-wa: #25D366;
  --color-fb: #1877F2;
  --color-ig: #E1306C;
  --color-tt: #000000;
  --color-yt: #FF0000;
  --color-tw: #000000;
  --color-tg: #26A5E4;
  --color-sc: #FFFC00;
}

/* Dark mode primitives — warmer dark theme */
[data-theme="dark"] {
  --color-neutral-0: #0d0c0b;
  --color-neutral-50: #1c1a18;
  --color-neutral-100: #2e2a27;
  --color-neutral-200: #44403c;
  --color-neutral-300: #5a5652;
  --color-neutral-400: #787470;
  --color-neutral-500: #a8a4a0;
  --color-neutral-600: #d6d3cf;
  --color-neutral-700: #e7e5e2;
  --color-neutral-800: #f4f3f1;
  --color-neutral-900: #fafafa;
  --color-neutral-950: #ffffff;

  /* Brand stays vibrant in dark */
  --color-brand-50: #3d0d13;
  --color-brand-100: #54141c;
  --color-brand-200: #751b28;
  --color-brand-300: #941e30;
  --color-brand-400: #b82337;
  --color-brand-500: #d94d57;
  --color-brand-600: #e37980;
  --color-brand-700: #eda6ad;
  --color-brand-800: #f5c4c8;
  --color-brand-900: #fae1e3;
}

/* ─── SEMANTIC COLOR ALIASES ─── */
/* These are what components actually use — swap themes by changing primitives above */
:root {
  /* Surfaces */
  --surface-0: var(--color-neutral-0);
  --surface-1: var(--color-neutral-50);
  --surface-2: var(--color-neutral-100);
  --surface-3: var(--color-neutral-200);
  --surface-elevated: var(--color-neutral-0);

  /* Hero / dark section backgrounds — stay dark in both themes */
  --bg-hero: var(--color-neutral-950);

  /* Glass surfaces — for glassmorphism */
  --glass-1: color-mix(in srgb, var(--surface-0) 80%, transparent);
  --glass-2: color-mix(in srgb, var(--surface-0) 70%, transparent);
  --glass-3: color-mix(in srgb, var(--surface-0) 55%, transparent);
  --glass-border: color-mix(in srgb, var(--border-subtle) 60%, transparent);
  --glass-border-strong: color-mix(in srgb, var(--border-default) 40%, transparent);

  /* Text */
  --text-primary: var(--color-neutral-900);
  --text-secondary: var(--color-neutral-600);
  --text-tertiary: var(--color-neutral-400);
  --text-inverse: var(--color-neutral-0);
  --text-link: var(--color-brand-600);
  --text-link-hover: var(--color-brand-700);

  /* Borders */
  --border-subtle: var(--color-neutral-200);
  --border-default: var(--color-neutral-300);
  --border-strong: var(--color-neutral-400);
  --border-focus: var(--color-brand-500);

  /* Brand */
  --brand-50: var(--color-brand-50);
  --brand-100: var(--color-brand-100);
  --brand-200: var(--color-brand-200);
  --brand-300: var(--color-brand-300);
  --brand-400: var(--color-brand-400);
  --brand-500: var(--color-brand-500);
  --brand-600: var(--color-brand-600);
  --brand-700: var(--color-brand-700);

  /* Semantic */
  --success: var(--color-success-500);
  --success-hover: var(--color-success-600);
  --warning: var(--color-warning-500);
  --warning-hover: var(--color-warning-600);
  --error: var(--color-error-500);
  --error-hover: var(--color-error-600);
  --info: var(--color-info-500);
  --info-hover: var(--color-info-600);
}

[data-theme="dark"] {
  --text-primary: var(--color-neutral-950);
  --text-secondary: var(--color-neutral-600);
  --text-tertiary: var(--color-neutral-500);
  --text-inverse: var(--color-neutral-900);
  --text-link: var(--color-brand-400);
  --text-link-hover: var(--color-brand-300);

  --border-subtle: var(--color-neutral-800);
  --border-default: var(--color-neutral-700);
  --border-strong: var(--color-neutral-600);
  --border-focus: var(--color-brand-400);

  /* Glass surfaces — darker glass */
  --glass-1: color-mix(in srgb, var(--surface-0) 75%, transparent);
  --glass-2: color-mix(in srgb, var(--surface-0) 60%, transparent);
  --glass-3: color-mix(in srgb, var(--surface-0) 45%, transparent);
  --glass-border: color-mix(in srgb, var(--border-default) 40%, transparent);
  --glass-border-strong: color-mix(in srgb, var(--border-strong) 30%, transparent);

  --success: var(--color-success-500);
  --warning: var(--color-warning-500);
  --error: var(--color-error-500);
  --info: var(--color-info-500);
}

/* ─── SPACING SCALE (4px base) ─── */
:root {
  --space-0: 0;
  --space-1: 0.25rem;  /* 4px */
  --space-2: 0.5rem;   /* 8px */
  --space-3: 0.75rem;  /* 12px */
  --space-4: 1rem;     /* 16px */
  --space-5: 1.25rem;  /* 20px */
  --space-6: 1.5rem;   /* 24px */
  --space-7: 2rem;     /* 32px */
  --space-8: 2.5rem;   /* 40px */
  --space-9: 3rem;     /* 48px */
  --space-10: 4rem;    /* 64px */
  --space-11: 5rem;    /* 80px */
  --space-12: 6rem;    /* 96px */

  /* Component-specific */
  --space-inset-xs: var(--space-1);
  --space-inset-sm: var(--space-2);
  --space-inset-md: var(--space-3);
  --space-inset-lg: var(--space-4);
  --space-inset-xl: var(--space-5);
  --space-stack-xs: var(--space-1);
  --space-stack-sm: var(--space-2);
  --space-stack-md: var(--space-3);
  --space-stack-lg: var(--space-5);
  --space-stack-xl: var(--space-7);
  --space-inline-xs: var(--space-1);
  --space-inline-sm: var(--space-2);
  --space-inline-md: var(--space-3);
  --space-inline-lg: var(--space-4);
}

/* ─── TYPOGRAPHY ─── */
:root {
  /* Font families */
  --font-display: 'Syne', system-ui, sans-serif;
  --font-body: 'Outfit', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', monospace;

  /* Fluid type scale (clamp: min, preferred, max) */
  --text-xs: clamp(0.6875rem, 0.65rem + 0.19vw, 0.75rem);      /* 11-12px */
  --text-sm: clamp(0.8125rem, 0.77rem + 0.21vw, 0.875rem);      /* 13-14px */
  --text-base: clamp(0.9375rem, 0.88rem + 0.29vw, 1rem);        /* 15-16px */
  --text-lg: clamp(1.0625rem, 1rem + 0.31vw, 1.125rem);         /* 17-18px */
  --text-xl: clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem);           /* 20-24px */
  --text-2xl: clamp(1.5rem, 1.35rem + 0.75vw, 2rem);            /* 24-32px */
  --text-3xl: clamp(1.875rem, 1.65rem + 1.12vw, 2.5rem);        /* 30-40px */
  --text-4xl: clamp(2.25rem, 1.9rem + 1.75vw, 3.5rem);          /* 36-56px */
  --text-5xl: clamp(3rem, 2.4rem + 3vw, 5rem);                  /* 48-80px */

  /* Font weights */
  --weight-normal: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --weight-extrabold: 800;

  /* Line heights */
  --leading-tight: 1.1;
  --leading-snug: 1.3;
  --leading-normal: 1.5;
  --leading-relaxed: 1.625;
  --leading-loose: 2;

  /* Letter spacing */
  --tracking-tight: -0.02em;
  --tracking-normal: 0;
  --tracking-wide: 0.02em;
  --tracking-wider: 0.04em;
  --tracking-widest: 0.1em;
}

/* ─── BORDER RADIUS ─── */
:root {
  --radius-none: 0;
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-2xl: 24px;
  --radius-full: 9999px;

  /* Component mappings */
  --radius-btn: var(--radius-md);
  --radius-btn-lg: var(--radius-lg);
  --radius-input: var(--radius-md);
  --radius-card: var(--radius-xl);
  --radius-card-lg: var(--radius-2xl);
  --radius-badge: var(--radius-full);
  --radius-modal: var(--radius-2xl);
  --radius-tooltip: var(--radius-md);
}

/* ─── SHADOWS / ELEVATION ─── */
:root {
  /* Layered elevation system — softer, more natural */
  --shadow-0: none;
  --shadow-1: 0 1px 2px 0 rgb(0 0 0 / 0.02), 0 1px 3px 1px rgb(0 0 0 / 0.02);
  --shadow-2: 0 2px 8px -2px rgb(0 0 0 / 0.04), 0 4px 16px -4px rgb(0 0 0 / 0.03), 0 8px 24px -8px rgb(0 0 0 / 0.02);
  --shadow-3: 0 4px 12px -2px rgb(0 0 0 / 0.05), 0 8px 24px -4px rgb(0 0 0 / 0.04), 0 16px 32px -8px rgb(0 0 0 / 0.03);
  --shadow-4: 0 8px 20px -4px rgb(0 0 0 / 0.06), 0 16px 32px -8px rgb(0 0 0 / 0.05), 0 24px 48px -12px rgb(0 0 0 / 0.04);
  --shadow-5: 0 16px 32px -8px rgb(0 0 0 / 0.08), 0 32px 64px -16px rgb(0 0 0 / 0.07), 0 48px 96px -24px rgb(0 0 0 / 0.06);

  /* Glassmorphism shadows — subtle depth for glass surfaces */
  --shadow-glass-1: 0 2px 8px -2px rgb(0 0 0 / 0.03), 0 4px 16px -4px rgb(0 0 0 / 0.02);
  --shadow-glass-2: 0 4px 16px -4px rgb(0 0 0 / 0.04), 0 8px 24px -8px rgb(0 0 0 / 0.03);
  --shadow-glass-3: 0 8px 32px -8px rgb(0 0 0 / 0.06), 0 16px 48px -16px rgb(0 0 0 / 0.04);

  /* Colored shadows (for brand elements) — softer glow */
  --shadow-brand-sm: 0 2px 8px -2px var(--brand-500);
  --shadow-brand-md: 0 8px 24px -4px var(--brand-500);
  --shadow-brand-lg: 0 16px 48px -8px var(--brand-500);

  /* Component mappings */
  --shadow-card: var(--shadow-2);
  --shadow-card-hover: var(--shadow-3);
  --shadow-dropdown: var(--shadow-4);
  --shadow-modal: var(--shadow-5);
  --shadow-tooltip: var(--shadow-2);
  --shadow-focus: 0 0 0 3px var(--brand-100);
  --shadow-focus-dark: 0 0 0 3px var(--brand-900);
}

[data-theme="dark"] {
  --shadow-1: 0 1px 2px 0 rgb(0 0 0 / 0.25), 0 1px 3px 1px rgb(0 0 0 / 0.2);
  --shadow-2: 0 2px 8px -2px rgb(0 0 0 / 0.35), 0 4px 16px -4px rgb(0 0 0 / 0.3), 0 8px 24px -8px rgb(0 0 0 / 0.25);
  --shadow-3: 0 4px 12px -2px rgb(0 0 0 / 0.45), 0 8px 24px -4px rgb(0 0 0 / 0.4), 0 16px 32px -8px rgb(0 0 0 / 0.35);
  --shadow-4: 0 8px 20px -4px rgb(0 0 0 / 0.5), 0 16px 32px -8px rgb(0 0 0 / 0.45), 0 24px 48px -12px rgb(0 0 0 / 0.4);
  --shadow-5: 0 16px 32px -8px rgb(0 0 0 / 0.55), 0 32px 64px -16px rgb(0 0 0 / 0.5), 0 48px 96px -24px rgb(0 0 0 / 0.45);

  --shadow-glass-1: 0 2px 8px -2px rgb(0 0 0 / 0.3), 0 4px 16px -4px rgb(0 0 0 / 0.25);
  --shadow-glass-2: 0 4px 16px -4px rgb(0 0 0 / 0.4), 0 8px 24px -8px rgb(0 0 0 / 0.35);
  --shadow-glass-3: 0 8px 32px -8px rgb(0 0 0 / 0.5), 0 16px 48px -16px rgb(0 0 0 / 0.45);

  --shadow-brand-sm: 0 2px 8px -2px var(--brand-500);
  --shadow-brand-md: 0 8px 24px -4px var(--brand-500);
  --shadow-brand-lg: 0 16px 48px -8px var(--brand-500);

  --shadow-focus: 0 0 0 3px var(--brand-900);
}

/* ─── MOTION / ANIMATION ─── */
:root {
  /* Durations */
  --duration-instant: 0ms;
  --duration-fast: 120ms;
  --duration-base: 200ms;
  --duration-slow: 300ms;
  --duration-slower: 500ms;

  /* Easings */
  --ease-linear: linear;
  --ease-in: cubic-bezier(0.4, 0, 1, 1);
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);

  /* Component mappings */
  --transition-fast: var(--duration-fast) var(--ease-out);
  --transition-base: var(--duration-base) var(--ease-in-out);
  --transition-slow: var(--duration-slow) var(--ease-in-out);
  --transition-spring: var(--duration-slower) var(--ease-spring);
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-fast: 0ms;
    --duration-base: 0ms;
    --duration-slow: 0ms;
    --duration-slower: 0ms;
    --transition-fast: none;
    --transition-base: none;
    --transition-slow: none;
    --transition-spring: none;
  }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ─── Z-INDEX SCALE ─── */
:root {
  --z-base: 0;
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-fixed: 300;
  --z-modal-backdrop: 400;
  --z-modal: 500;
  --z-popover: 600;
  --z-tooltip: 700;
  --z-toast: 800;
  --z-loading: 9999;
}

/* ─── BREAKPOINTS (for reference in JS) ─── */
:root {
  --bp-sm: 480px;
  --bp-md: 768px;
  --bp-lg: 1024px;
  --bp-xl: 1280px;
  --bp-2xl: 1536px;
}

/* ─── LAYOUT ─── */
:root {
  --container-max: 1200px;
  --container-padding: var(--space-4);
  --header-height: 64px;
  --header-height-mobile: 56px;
}

/* ─── FOCUS RING ─── */
:root {
  --focus-ring: 0 0 0 3px var(--brand-100);
  --focus-ring-dark: 0 0 0 3px var(--brand-900);
  --focus-ring-offset: 2px;
}

[data-theme="dark"] {
  --focus-ring: var(--focus-ring-dark);
}

/* ─── UTILITY: Focus visible polyfill ─── */
:focus:not(:focus-visible) { outline: none; }
:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}