/* ============================================================
   SPINMIRAGE — Design Tokens
   All visual decisions live here. Edit this file to retheme.
   ============================================================ */

:root {

  /* ── Colors ──────────────────────────────────────────────── */

  --white:    #ffffff;

  --gray-50:  #f9f9fb;
  --gray-100: #f2f2f5;
  --gray-200: #e4e4eb;
  --gray-300: #c9c9d6;
  --gray-400: #9898aa;
  --gray-500: #6b6b80;
  --gray-700: #3a3a4a;
  --gray-900: #0d0d18;

  /* Accent — violet, the SpinMirage signature */
  --accent:       #6b3ff3;
  --accent-dark:  #4f2bb8;
  --accent-mid:   #8b60f7;
  --accent-light: #ede9fe;
  --accent-xlight:#f5f3ff;

  /* Semantic */
  --green:       #16a34a;
  --green-light: #dcfce7;
  --amber:       #d97706;
  --amber-light: #fef3c7;
  --red:         #dc2626;
  --red-light:   #fee2e2;

  /* Aliases */
  --text-primary:   var(--gray-900);
  --text-secondary: var(--gray-500);
  --text-tertiary:  var(--gray-400);
  --text-inverse:   var(--white);
  --text-accent:    var(--accent);

  --bg-page:    var(--white);
  --bg-surface: var(--gray-50);
  --bg-raised:  var(--white);

  --border-subtle:  var(--gray-200);
  --border-default: var(--gray-300);
  --border-strong:  var(--gray-400);


  /* ── Typography ──────────────────────────────────────────── */

  --font-sans:  'Plus Jakarta Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-serif: 'Instrument Serif', Georgia, 'Times New Roman', serif;
  --font-mono:  'JetBrains Mono', 'Fira Code', 'Cascadia Code', 'SF Mono', Consolas, monospace;

  /* Type scale — fluid via clamp */
  --text-2xs:  0.625rem;   /* 10px */
  --text-xs:   0.75rem;    /* 12px */
  --text-sm:   0.875rem;   /* 14px */
  --text-base: 1rem;       /* 16px */
  --text-lg:   1.125rem;   /* 18px */
  --text-xl:   1.25rem;    /* 20px */
  --text-2xl:  1.5rem;     /* 24px */
  --text-3xl:  clamp(1.625rem, 2.5vw, 2rem);
  --text-4xl:  clamp(2rem, 3.5vw, 2.625rem);
  --text-5xl:  clamp(2.5rem, 5vw, 3.5rem);
  --text-hero: clamp(2.75rem, 6vw, 4.5rem);

  /* Line heights */
  --leading-none:    1;
  --leading-tight:   1.25;
  --leading-snug:    1.375;
  --leading-normal:  1.5;
  --leading-relaxed: 1.65;
  --leading-loose:   2;

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

  /* Letter spacing */
  --tracking-tighter: -0.04em;
  --tracking-tight:   -0.025em;
  --tracking-normal:  0em;
  --tracking-wide:    0.025em;
  --tracking-wider:   0.05em;
  --tracking-widest:  0.1em;


  /* ── Spacing (4px base unit) ─────────────────────────────── */

  --sp-px:  1px;
  --sp-0-5: 0.125rem;  /* 2px */
  --sp-1:   0.25rem;   /* 4px */
  --sp-1-5: 0.375rem;  /* 6px */
  --sp-2:   0.5rem;    /* 8px */
  --sp-2-5: 0.625rem;  /* 10px */
  --sp-3:   0.75rem;   /* 12px */
  --sp-3-5: 0.875rem;  /* 14px */
  --sp-4:   1rem;      /* 16px */
  --sp-5:   1.25rem;   /* 20px */
  --sp-6:   1.5rem;    /* 24px */
  --sp-7:   1.75rem;   /* 28px */
  --sp-8:   2rem;      /* 32px */
  --sp-9:   2.25rem;   /* 36px */
  --sp-10:  2.5rem;    /* 40px */
  --sp-11:  2.75rem;   /* 44px */
  --sp-12:  3rem;      /* 48px */
  --sp-14:  3.5rem;    /* 56px */
  --sp-16:  4rem;      /* 64px */
  --sp-20:  5rem;      /* 80px */
  --sp-24:  6rem;      /* 96px */
  --sp-28:  7rem;      /* 112px */
  --sp-32:  8rem;      /* 128px */
  --sp-40:  10rem;     /* 160px */
  --sp-48:  12rem;     /* 192px */


  /* ── Layout ──────────────────────────────────────────────── */

  --container-max:    1200px;
  --container-prose:  720px;
  --container-narrow: 560px;
  --container-pad:    clamp(var(--sp-4), 5vw, var(--sp-8));

  --nav-height:       72px;
  --sidebar-width:    300px;


  /* ── Borders & Radius ────────────────────────────────────── */

  --radius-xs:  2px;
  --radius-sm:  4px;
  --radius-md:  8px;
  --radius-lg:  12px;
  --radius-xl:  16px;
  --radius-2xl: 24px;
  --radius-3xl: 32px;
  --radius-full: 9999px;

  --border:         1px solid var(--border-subtle);
  --border-medium:  1px solid var(--border-default);
  --border-accent:  1px solid var(--accent);


  /* ── Shadows ─────────────────────────────────────────────── */

  --shadow-xs: 0 1px 2px rgba(13, 13, 24, 0.04);
  --shadow-sm: 0 1px 3px rgba(13, 13, 24, 0.06), 0 1px 2px rgba(13, 13, 24, 0.04);
  --shadow-md: 0 4px 6px -1px rgba(13, 13, 24, 0.07), 0 2px 4px -1px rgba(13, 13, 24, 0.04);
  --shadow-lg: 0 10px 15px -3px rgba(13, 13, 24, 0.08), 0 4px 6px -2px rgba(13, 13, 24, 0.04);
  --shadow-xl: 0 20px 25px -5px rgba(13, 13, 24, 0.09), 0 10px 10px -5px rgba(13, 13, 24, 0.04);
  --shadow-accent: 0 0 0 3px var(--accent-light);


  /* ── Motion ──────────────────────────────────────────────── */

  --ease-default: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out:     cubic-bezier(0, 0, 0.2, 1);
  --ease-in:      cubic-bezier(0.4, 0, 1, 1);
  --ease-spring:  cubic-bezier(0.34, 1.56, 0.64, 1);

  --duration-fast:   150ms;
  --duration-base:   200ms;
  --duration-slow:   300ms;
  --duration-slower: 500ms;


  /* ── Z-index scale ───────────────────────────────────────── */

  --z-below:   -1;
  --z-base:     0;
  --z-above:    10;
  --z-dropdown: 50;
  --z-sticky:   100;
  --z-overlay:  200;
  --z-modal:    300;
  --z-toast:    400;

}