/*
 * MacFleek Design Tokens — production palette
 * ────────────────────────────────────────────
 * Use ONLY these values. Compose new colors via `color-mix(in srgb, …)`,
 * never invent ad-hoc hex codes.
 */

:root {
  /* ── Brand purple scale ── */
  --brand-50:  #f5f3ff;
  --brand-100: #ede9fe;
  --brand-200: #ddd6fe;
  --brand-300: #c4b5fd;
  --brand-400: #a78bfa;
  --brand-500: #8b5cf6;
  --brand-600: #6366f1;  /* primary accent */
  --brand-700: #4f46e5;
  --brand-800: #4338ca;
  --brand-900: #3730a3;
  --brand-950: #1e1b4b;  /* deepest indigo, dark-mode background top */

  /* ── Deep gradient stops ── */
  --void-0:    #0f0420;  /* near-black purple, dark-mode background bottom */
  --grad-bg:   radial-gradient(60% 80% at 50% 0%,
                 rgba(99, 102, 241, 0.10) 0%,
                 transparent 70%);
  --grad-hero-dark:  linear-gradient(180deg, #1e1b4b 0%, #4c1d95 55%, #0f0420 100%);
  --grad-hero-light: linear-gradient(180deg, #f5f3ff 0%, #ede9fe 100%);
  --grad-chrome:     linear-gradient(180deg,
                       #ffffff 0%,
                       #f5f3ff 18%,
                       #c4b5fd 50%,
                       #a78bfa 75%,
                       #e9d5ff 100%);   /* metallic for witch icon */

  /* ── Semantic ── */
  --success: #10b981;
  --success-bg: #dcfce7;
  --warning: #f59e0b;
  --warning-bg: #fef3c7;
  --danger:  #ef4444;
  --danger-bg: #fee2e2;
  --info:    #3b82f6;
  --info-bg: #dbeafe;

  /* ── Neutral (zinc scale) ── */
  --zinc-50:  #fafafa;
  --zinc-100: #f4f4f5;
  --zinc-200: #e4e4e7;
  --zinc-300: #d4d4d8;
  --zinc-400: #a1a1aa;
  --zinc-500: #71717a;
  --zinc-600: #52525b;
  --zinc-700: #3f3f46;
  --zinc-800: #27272a;
  --zinc-900: #18181b;
  --zinc-950: #09090b;

  /* ── Text ── */
  --text-primary:   #18181b;
  --text-secondary: #52525b;
  --text-tertiary:  #a1a1aa;
  --text-inverse:   #fafafa;

  /* ── Surfaces (light mode) ── */
  --surface-0: #ffffff;                            /* base canvas */
  --surface-1: #fafafa;                            /* card */
  --surface-2: #f4f4f5;                            /* recessed */
  --surface-vibrant: rgba(255, 255, 255, 0.72);    /* glass material */
  --surface-hover: rgba(99, 102, 241, 0.06);
  --surface-selected: rgba(99, 102, 241, 0.12);

  /* ── Borders / hairlines ── */
  --hairline:        color-mix(in srgb, currentColor 10%, transparent);
  --hairline-strong: color-mix(in srgb, currentColor 18%, transparent);
  --hairline-focus:  var(--brand-600);

  /* ── Typography ── */
  --font-display: -apple-system, "SF Pro Display", "SF Pro", Inter,
                  system-ui, sans-serif;
  --font-text:    -apple-system, "SF Pro Text", system-ui, sans-serif;
  --font-mono:    ui-monospace, "SF Mono", "JetBrains Mono", Menlo, monospace;

  --text-xs:   0.75rem;     /* 12 */
  --text-sm:   0.875rem;    /* 14 */
  --text-base: 1rem;        /* 16 */
  --text-lg:   1.125rem;    /* 18 */
  --text-xl:   1.25rem;     /* 20 */
  --text-2xl:  1.5rem;      /* 24 */
  --text-3xl:  1.875rem;    /* 30 */
  --text-4xl:  2.25rem;     /* 36 */
  --text-5xl:  3rem;        /* 48 */
  --text-6xl:  3.75rem;     /* 60 */

  --leading-tight:   1.15;
  --leading-snug:    1.35;
  --leading-normal:  1.5;
  --leading-relaxed: 1.65;

  /* All numerics use tabular */
  --numerals: tabular-nums;

  /* ── Spacing scale (4-pt grid) ── */
  --s-1:  0.25rem;   /* 4 */
  --s-2:  0.5rem;    /* 8 */
  --s-3:  0.75rem;   /* 12 */
  --s-4:  1rem;      /* 16 */
  --s-5:  1.25rem;   /* 20 */
  --s-6:  1.5rem;    /* 24 */
  --s-8:  2rem;      /* 32 */
  --s-10: 2.5rem;    /* 40 */
  --s-12: 3rem;      /* 48 */
  --s-16: 4rem;      /* 64 */
  --s-20: 5rem;      /* 80 */
  --s-24: 6rem;      /* 96 */

  /* ── Radii ── */
  --r-sm:   6px;
  --r-md:   10px;
  --r-lg:   14px;
  --r-xl:   18px;
  --r-2xl:  24px;
  --r-pill: 999px;
  /* For radius > 12, use squircle path instead of border-radius:
     M 0 R C 0 0, R 0, R 0  …  → see ICONS.md for reusable squircle */

  /* ── Shadows (Apple-style: long, soft, low alpha) ── */
  --shadow-xs:  0 1px 2px rgba(0,0,0,0.04);
  --shadow-sm:  0 2px 8px -2px rgba(0,0,0,0.08);
  --shadow-md:  0 8px 24px -8px rgba(0,0,0,0.12);
  --shadow-lg:  0 18px 50px -12px rgba(0,0,0,0.18);
  --shadow-xl:  0 32px 80px -20px rgba(0,0,0,0.25);
  --shadow-brand-glow: 0 25px 80px -20px rgba(99, 102, 241, 0.4);

  /* ── Easing ── */
  --ease-apple-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-apple-smooth: cubic-bezier(0.25, 0.1, 0.25, 1);
  --ease-apple-fast:   cubic-bezier(0.4, 0, 0.2, 1);

  --d-fast:   0.2s;
  --d-base:   0.35s;
  --d-slow:   0.6s;
  --d-drama:  1.2s;
  --d-epic:   1.8s;

  /* ── Z-layers ── */
  --z-base:    0;
  --z-card:    10;
  --z-sticky:  20;
  --z-overlay: 50;
  --z-modal:   100;
  --z-toast:   200;
}

/* ── Dark mode override ── */
@media (prefers-color-scheme: dark) {
  :root {
    --text-primary:   #fafafa;
    --text-secondary: #d4d4d8;
    --text-tertiary:  #71717a;
    --text-inverse:   #18181b;

    --surface-0: #0a0a0a;
    --surface-1: #18181b;
    --surface-2: #27272a;
    --surface-vibrant: rgba(20, 20, 20, 0.72);
    --surface-hover:   rgba(167, 139, 250, 0.10);
    --surface-selected: rgba(99, 102, 241, 0.24);
  }
}

/* ── Squircle helper (Apple's continuous corner shape) ── */
.squircle-radius-22-5pct {
  /* Use as background: clip-path: path('M 512 0 C ...');
     Or as actual rounded rect approximation: */
  clip-path: path('M 50% 0 C 80% 0, 100% 20%, 100% 50% C 100% 80%, 80% 100%, 50% 100% C 20% 100%, 0 80%, 0 50% C 0 20%, 20% 0, 50% 0 Z');
  /* For real squircle on the AppIcon (1024x1024 canvas):
     path('M 512 0 C 853 0, 1024 171, 1024 512 C 1024 853, 853 1024, 512 1024 C 171 1024, 0 853, 0 512 C 0 171, 171 0, 512 0 Z') */
}

/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ── Base typography ── */
body {
  font-family: var(--font-display);
  font-feature-settings: "kern" 1, "liga" 1, "ss01" 1;
  -webkit-font-smoothing: antialiased;
  font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

[class*="number"], .num, .stat, .price {
  font-variant-numeric: var(--numerals);
}