/* ============================================================================
   memry · design tokens
   Synaptic pink × data cyan × graphite. Memory + technical precision.
   ============================================================================ */

@import url("https://fonts.googleapis.com/css2?family=Geist:wght@300;400;500;600;700&family=Geist+Mono:wght@400;500&family=Instrument+Serif:ital@0;1&display=swap");

:root {
  /* ---------- Brand · Synapse Pink (anatomical, punchy, not bubblegum) ---------- */
  --m-synapse-50:  #FFF0F3;
  --m-synapse-100: #FFDEE5;
  --m-synapse-200: #FFBDC9;
  --m-synapse-300: #FF94A7;
  --m-synapse-400: #FB6A85;
  --m-synapse-500: #F0476B; /* primary */
  --m-synapse-600: #D02852;
  --m-synapse-700: #A91D44;
  --m-synapse-800: #831638;
  --m-synapse-900: #5C0F27;
  --m-synapse-950: #3A0817;

  /* ---------- Accent · Signal Cyan (data, retrieval, precision) ---------- */
  --m-cyan-50:  #ECFEFF;
  --m-cyan-100: #CFFAFE;
  --m-cyan-200: #A4F2FB;
  --m-cyan-300: #66E5F2;
  --m-cyan-400: #1FCFE2;
  --m-cyan-500: #06B6C7; /* default accent */
  --m-cyan-600: #0892A0;
  --m-cyan-700: #0E7480;
  --m-cyan-800: #155E68;
  --m-cyan-900: #164E58;
  --m-cyan-950: #08323C;

  /* ---------- Neutral · Graphite (cool but not blue-shifted) ---------- */
  --m-graphite-0:   #FFFFFF;
  --m-graphite-50:  #F6F7F9;
  --m-graphite-100: #ECEEF2;
  --m-graphite-200: #D8DCE3;
  --m-graphite-300: #B5BAC4;
  --m-graphite-400: #8B919E;
  --m-graphite-500: #5F6573;
  --m-graphite-600: #434956;
  --m-graphite-700: #2D323D;
  --m-graphite-800: #1C212B;
  --m-graphite-900: #13171F;
  --m-graphite-950: #0A0D13;

  /* ---------- Semantic ---------- */
  --m-success: #22C076;
  --m-warning: #F0B23A;
  --m-danger:  #E5484D;
  --m-info:    var(--m-cyan-500);

  --m-success-bg: #E8F8F0;
  --m-warning-bg: #FCF3DF;
  --m-danger-bg:  #FBE5E6;
  --m-info-bg:    var(--m-cyan-50);

  /* ---------- Type ---------- */
  --m-font-sans: "Geist", ui-sans-serif, system-ui, sans-serif;
  --m-font-mono: "Geist Mono", ui-monospace, "JetBrains Mono", monospace;
  --m-font-serif: "Instrument Serif", ui-serif, Georgia, serif;

  --m-text-xs:   11px;
  --m-text-sm:   12px;
  --m-text-base: 14px;
  --m-text-md:   16px;
  --m-text-lg:   18px;
  --m-text-xl:   22px;
  --m-text-2xl:  28px;
  --m-text-3xl:  36px;
  --m-text-4xl:  48px;
  --m-text-5xl:  64px;
  --m-text-6xl:  84px;

  --m-weight-regular: 400;
  --m-weight-medium:  500;
  --m-weight-semibold: 600;
  --m-weight-bold:    700;

  --m-leading-tight:   1.1;
  --m-leading-snug:    1.25;
  --m-leading-normal:  1.45;
  --m-leading-relaxed: 1.6;

  --m-track-display:  -0.03em;
  --m-track-tight:    -0.015em;
  --m-track-normal:    0em;
  --m-track-eyebrow:   0.08em;

  /* ---------- Spacing (4px ramp) ---------- */
  --m-space-0:  0;
  --m-space-1:  4px;
  --m-space-2:  8px;
  --m-space-3:  12px;
  --m-space-4:  16px;
  --m-space-5:  20px;
  --m-space-6:  24px;
  --m-space-8:  32px;
  --m-space-10: 40px;
  --m-space-12: 48px;
  --m-space-16: 64px;
  --m-space-20: 80px;
  --m-space-24: 96px;
  --m-space-32: 128px;

  /* ---------- Radius ---------- */
  --m-radius-xs:  4px;
  --m-radius-sm:  6px;
  --m-radius-md:  8px;
  --m-radius-lg:  12px;
  --m-radius-xl:  16px;
  --m-radius-2xl: 20px;
  --m-radius-pill: 999px;

  /* ---------- Motion ---------- */
  --m-dur-fast: 120ms;
  --m-dur-base: 200ms;
  --m-dur-slow: 320ms;
  --m-ease-out:    cubic-bezier(0.2, 0.7, 0.2, 1);
  --m-ease-inout:  cubic-bezier(0.65, 0, 0.35, 1);
  --m-ease-trace:  cubic-bezier(0.4, 0, 0.1, 1); /* memory-trace easing */

  /* ---------- Borders ---------- */
  --m-border-thin: 1px;
  --m-border-med:  1.5px;
}

/* ============================================================================
   THEMES — semantic tokens flip per [data-theme]
   ============================================================================ */

[data-theme="light"], :root {
  --m-bg:           var(--m-graphite-0);
  --m-bg-subtle:    var(--m-graphite-50);
  --m-bg-muted:     var(--m-graphite-100);
  --m-surface:      var(--m-graphite-0);
  --m-surface-raised: var(--m-graphite-0);
  --m-text:         var(--m-graphite-900);
  --m-text-muted:   var(--m-graphite-500);
  --m-text-subtle:  var(--m-graphite-400);
  --m-border:       var(--m-graphite-200);
  --m-border-strong: var(--m-graphite-300);
  --m-accent:       var(--m-synapse-500);
  --m-accent-hover: var(--m-synapse-600);
  --m-accent-soft:  var(--m-synapse-100);
  --m-signal:       var(--m-cyan-500);
  --m-signal-soft:  var(--m-cyan-100);
  --m-focus-ring:   color-mix(in srgb, var(--m-synapse-500) 60%, transparent);

  --m-shadow-xs: 0 1px 0 0 rgba(13, 17, 23, 0.04);
  --m-shadow-sm: 0 1px 2px 0 rgba(13, 17, 23, 0.06), 0 1px 1px -1px rgba(13, 17, 23, 0.04);
  --m-shadow-md: 0 4px 8px -2px rgba(13, 17, 23, 0.08), 0 2px 4px -2px rgba(13, 17, 23, 0.05);
  --m-shadow-lg: 0 12px 24px -8px rgba(13, 17, 23, 0.12), 0 4px 8px -4px rgba(13, 17, 23, 0.06);
  --m-shadow-xl: 0 24px 48px -12px rgba(13, 17, 23, 0.16);
}

[data-theme="dark"] {
  --m-bg:           var(--m-graphite-950);
  --m-bg-subtle:    var(--m-graphite-900);
  --m-bg-muted:     var(--m-graphite-800);
  --m-surface:      var(--m-graphite-900);
  --m-surface-raised: var(--m-graphite-800);
  --m-text:         var(--m-graphite-50);
  --m-text-muted:   var(--m-graphite-400);
  --m-text-subtle:  var(--m-graphite-500);
  --m-border:       color-mix(in srgb, var(--m-graphite-700) 60%, transparent);
  --m-border-strong: var(--m-graphite-700);
  --m-accent:       var(--m-synapse-400);
  --m-accent-hover: var(--m-synapse-300);
  --m-accent-soft:  color-mix(in srgb, var(--m-synapse-500) 18%, transparent);
  --m-signal:       var(--m-cyan-400);
  --m-signal-soft:  color-mix(in srgb, var(--m-cyan-500) 18%, transparent);
  --m-focus-ring:   color-mix(in srgb, var(--m-synapse-400) 60%, transparent);

  --m-success-bg: color-mix(in srgb, var(--m-success) 18%, transparent);
  --m-warning-bg: color-mix(in srgb, var(--m-warning) 18%, transparent);
  --m-danger-bg:  color-mix(in srgb, var(--m-danger) 18%, transparent);
  --m-info-bg:    color-mix(in srgb, var(--m-info) 18%, transparent);

  --m-shadow-xs: 0 1px 0 0 rgba(0, 0, 0, 0.3);
  --m-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.03);
  --m-shadow-md: 0 4px 12px -2px rgba(0, 0, 0, 0.5);
  --m-shadow-lg: 0 12px 28px -8px rgba(0, 0, 0, 0.6);
  --m-shadow-xl: 0 24px 56px -12px rgba(0, 0, 0, 0.7);
}

/* ============================================================================
   Type defaults — body class .m enables them
   ============================================================================ */
body.m {
  font-family: var(--m-font-sans);
  font-size: var(--m-text-base);
  line-height: var(--m-leading-normal);
  color: var(--m-text);
  background: var(--m-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "ss01", "ss03", "cv11";
}

.m .num,
.m .mono,
.m table td.num,
.m code,
.m kbd,
.m pre {
  font-family: var(--m-font-mono);
  font-feature-settings: "tnum", "zero";
}

.m .serif {
  font-family: var(--m-font-serif);
  letter-spacing: 0;
}

.m h1, .m h2, .m h3 { letter-spacing: var(--m-track-tight); }
.m h1 { font-size: var(--m-text-5xl); font-weight: var(--m-weight-semibold); letter-spacing: var(--m-track-display); line-height: var(--m-leading-tight); }
.m h2 { font-size: var(--m-text-3xl); font-weight: var(--m-weight-semibold); line-height: var(--m-leading-snug); }
.m h3 { font-size: var(--m-text-xl); font-weight: var(--m-weight-semibold); line-height: var(--m-leading-snug); }

.m ::selection {
  background: var(--m-synapse-200);
  color: var(--m-graphite-900);
}
[data-theme="dark"] .m ::selection,
.m[data-theme="dark"] ::selection {
  background: color-mix(in srgb, var(--m-synapse-400) 35%, transparent);
  color: var(--m-graphite-50);
}