/* =========================================================================
   Synth Data Labs — colors_and_type.css
   Design tokens: colors, type, spacing, radii, shadows, motion.
   ========================================================================= */

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

:root {
  /* --- Brand ----------------------------------------------------------- */
  /* Cobalt blue — trust & confidence. Token names kept as --violet-* for back-compat; cobalt aliases below. */
  --violet-50:  #EEF4FF;
  --violet-100: #D6E4FF;
  --violet-200: #AAC4FF;
  --violet-300: #6B97F5;   /* primary accent (dark theme) */
  --violet-400: #3A6FE0;
  --violet-500: #1E4FC2;   /* primary accent (light theme) */
  --violet-600: #143A96;
  --violet-700: #0E2B72;
  --violet-800: #091E51;
  --violet-900: #05112E;

  --cobalt-50:  var(--violet-50);
  --cobalt-100: var(--violet-100);
  --cobalt-200: var(--violet-200);
  --cobalt-300: var(--violet-300);
  --cobalt-400: var(--violet-400);
  --cobalt-500: var(--violet-500);
  --cobalt-600: var(--violet-600);
  --cobalt-700: var(--violet-700);
  --cobalt-800: var(--violet-800);
  --cobalt-900: var(--violet-900);

  --lime-300: #E8FF6B;
  --lime-400: #D4FF3D;      /* secondary signal (waveform/energy) */
  --lime-500: #B5E024;

  --amber-400: #FFB23D;     /* warning */
  --red-400:   #FF5D5D;     /* danger */
  --teal-400:  #3DDBD9;     /* info */

  --emerald-50:  #ECFDF5;
  --emerald-100: #D1FAE5;
  --emerald-200: #A7F3D0;
  --emerald-300: #4ADE80;   /* success / positive (dark theme) */
  --emerald-400: #22C55E;
  --emerald-500: #16A34A;   /* success / positive (light theme) */
  --emerald-600: #15803D;
  --emerald-700: #166534;
  --emerald-800: #14532D;
  --emerald-900: #0B3F22;

  /* --- Neutrals (dark-first) ------------------------------------------- */
  --gray-0:   #000000;
  --gray-50:  #0A0A0B;      /* app bg */
  --gray-100: #0F0F11;      /* surface */
  --gray-150: #141417;      /* surface raised */
  --gray-200: #1A1A1E;      /* card */
  --gray-250: #222226;      /* card hover */
  --gray-300: #2A2A30;      /* border strong */
  --gray-400: #3A3A42;      /* border */
  --gray-500: #55555F;      /* divider */
  --gray-600: #7A7A85;      /* fg muted */
  --gray-700: #9A9AA5;      /* fg subtle */
  --gray-800: #C4C4CC;      /* fg secondary */
  --gray-900: #EDEDEE;      /* fg primary */
  --gray-1000: #FFFFFF;

  /* --- Semantic: dark (default) ---------------------------------------- */
  --bg:         var(--gray-50);
  --bg-elev-1:  var(--gray-100);
  --bg-elev-2:  var(--gray-150);
  --bg-card:    var(--gray-200);
  --bg-hover:   var(--gray-250);

  --fg:         var(--gray-900);
  --fg-2:       var(--gray-800);
  --fg-3:       var(--gray-700);
  --fg-muted:   var(--gray-600);
  --fg-on-accent: #0A0A0B;

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

  --accent:     var(--violet-300);
  --accent-hover: var(--violet-200);
  --accent-press: var(--violet-400);
  --accent-bg:  rgba(107,151,245,0.10);
  --accent-border: rgba(107,151,245,0.32);

  --signal:     var(--lime-400);
  --warn:       var(--amber-400);
  --danger:     var(--red-400);
  --info:       var(--teal-400);
  --success:    var(--lime-400);

  /* Focus ring */
  --focus-ring: 0 0 0 2px var(--bg), 0 0 0 4px var(--violet-300);

  /* --- Type ------------------------------------------------------------ */
  --font-sans: 'Geist', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'Geist Mono', ui-monospace, 'SF Mono', 'Menlo', 'Consolas', monospace;
  --font-display: var(--font-sans);

  /* Fluid-ish type scale — technical, tight */
  --text-2xs:  11px;
  --text-xs:   12px;
  --text-sm:   13px;
  --text-base: 14px;
  --text-md:   15px;
  --text-lg:   17px;
  --text-xl:   20px;
  --text-2xl:  24px;
  --text-3xl:  32px;
  --text-4xl:  44px;
  --text-5xl:  60px;
  --text-6xl:  80px;
  --text-7xl:  112px;

  --leading-tight:  1.1;
  --leading-snug:   1.25;
  --leading-normal: 1.45;
  --leading-loose:  1.6;

  --tracking-tightest: -0.04em;
  --tracking-tighter:  -0.025em;
  --tracking-tight:    -0.015em;
  --tracking-normal:    0;
  --tracking-wide:      0.02em;
  --tracking-wider:     0.06em;   /* caps / eyebrows */
  --tracking-widest:    0.14em;

  /* --- Spacing (4px base) ---------------------------------------------- */
  --s-0:  0;
  --s-1:  2px;
  --s-2:  4px;
  --s-3:  8px;
  --s-4:  12px;
  --s-5:  16px;
  --s-6:  20px;
  --s-7:  24px;
  --s-8:  32px;
  --s-9:  40px;
  --s-10: 48px;
  --s-11: 64px;
  --s-12: 80px;
  --s-13: 96px;
  --s-14: 128px;

  /* --- Radii (sharp; Linear/Vercel-adjacent) --------------------------- */
  --r-0: 0;
  --r-1: 2px;
  --r-2: 4px;
  --r-3: 6px;
  --r-4: 8px;
  --r-5: 10px;
  --r-6: 14px;
  --r-full: 9999px;

  /* --- Borders --------------------------------------------------------- */
  --bw-hairline: 1px;
  --bw-1: 1px;
  --bw-2: 2px;

  /* --- Shadows (subtle; dark UIs live on borders, not shadows) --------- */
  --shadow-0: 0 0 0 1px var(--border);
  --shadow-1: 0 1px 2px rgba(0,0,0,0.4), 0 0 0 1px var(--border);
  --shadow-2: 0 4px 16px rgba(0,0,0,0.5), 0 0 0 1px var(--border);
  --shadow-3: 0 12px 32px rgba(0,0,0,0.6), 0 0 0 1px var(--border-strong);
  --shadow-glow-accent: 0 0 0 1px var(--accent-border), 0 0 24px rgba(107,151,245,0.25);
  --shadow-inset: inset 0 1px 0 rgba(255,255,255,0.04);

  /* --- Motion ---------------------------------------------------------- */
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-snap: cubic-bezier(0.4, 0, 0, 1);
  --dur-instant: 80ms;
  --dur-fast:    140ms;
  --dur-base:    200ms;
  --dur-slow:    320ms;

  /* --- Grid / layout --------------------------------------------------- */
  --grid-unit: 4px;
  --content-max: 1200px;
  --content-wide: 1360px;
}

/* --- Light theme override -------------------------------------------- */
[data-theme="light"] {
  --bg:         #FFFFFF;
  --bg-elev-1:  #FAFAFA;
  --bg-elev-2:  #F4F4F5;
  --bg-card:    #FFFFFF;
  --bg-hover:   #F4F4F5;

  --fg:         #0A0A0B;
  --fg-2:       #1F1F23;
  --fg-3:       #3F3F46;
  --fg-muted:   #71717A;
  --fg-on-accent: #FFFFFF;

  --border:     #E4E4E7;
  --border-subtle: #EFEFF1;
  --border-strong: #C9C9CF;
  --divider:    #E4E4E7;

  --accent:       var(--violet-500);
  --accent-hover: var(--violet-400);
  --accent-press: var(--violet-600);
  --accent-bg:  rgba(30,79,194,0.08);
  --accent-border: rgba(30,79,194,0.28);

  --shadow-1: 0 1px 2px rgba(10,10,11,0.06), 0 0 0 1px var(--border);
  --shadow-2: 0 4px 16px rgba(10,10,11,0.06), 0 0 0 1px var(--border);
  --shadow-3: 0 12px 32px rgba(10,10,11,0.08), 0 0 0 1px var(--border);
}

/* =========================================================================
   Semantic element styles
   ========================================================================= */

html, body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  font-feature-settings: "ss01", "cv11";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.h-display {
  font-family: var(--font-display);
  font-size: var(--text-7xl);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tightest);
  font-weight: 500;
}
.h1, h1 {
  font-size: var(--text-5xl);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tighter);
  font-weight: 500;
}
.h2, h2 {
  font-size: var(--text-4xl);
  line-height: 1.15;
  letter-spacing: var(--tracking-tighter);
  font-weight: 500;
}
.h3, h3 {
  font-size: var(--text-2xl);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
  font-weight: 500;
}
.h4, h4 {
  font-size: var(--text-xl);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
  font-weight: 500;
}
.h5, h5 {
  font-size: var(--text-lg);
  font-weight: 500;
  letter-spacing: var(--tracking-tight);
}

.body, p {
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--fg-2);
}
.body-lg {
  font-size: var(--text-md);
  line-height: var(--leading-loose);
}
.body-sm {
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  color: var(--fg-3);
}
.caption {
  font-size: var(--text-xs);
  line-height: var(--leading-snug);
  color: var(--fg-muted);
}

/* Eyebrow / section label — caps, tracked, mono */
.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-widest);
  color: var(--fg-muted);
  font-weight: 500;
}

/* Code / mono */
.mono, code, kbd, pre {
  font-family: var(--font-mono);
  font-size: 0.92em;
  font-feature-settings: "ss01", "zero";
}
code {
  background: var(--bg-elev-2);
  border: 1px solid var(--border-subtle);
  padding: 1px 6px;
  border-radius: var(--r-2);
  color: var(--fg);
}

kbd {
  background: var(--bg-elev-2);
  border: 1px solid var(--border);
  border-bottom-width: 2px;
  padding: 1px 6px;
  border-radius: var(--r-2);
  font-size: var(--text-xs);
  color: var(--fg-2);
}

/* Link */
a {
  color: var(--fg);
  text-decoration: underline;
  text-decoration-color: var(--border-strong);
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  transition: color var(--dur-fast) var(--ease-out), text-decoration-color var(--dur-fast) var(--ease-out);
}
a:hover {
  color: var(--accent);
  text-decoration-color: var(--accent);
}

/* Selection */
::selection {
  background: var(--violet-300);
  color: #0A0A0B;
}

/* Scrollbar (webkit) */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--gray-300); border-radius: var(--r-full); }
::-webkit-scrollbar-thumb:hover { background: var(--gray-400); }

/* Utility: schematic grid background — reusable motif */
.schematic-grid {
  background-image:
    linear-gradient(to right, rgba(255,255,255,0.03) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,0.03) 1px, transparent 1px);
  background-size: 32px 32px;
}
.schematic-grid-dense {
  background-image:
    linear-gradient(to right, rgba(255,255,255,0.025) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,0.025) 1px, transparent 1px);
  background-size: 16px 16px;
}

/* Utility: dotted schematic */
.schematic-dots {
  background-image: radial-gradient(circle at center, rgba(255,255,255,0.07) 1px, transparent 1.5px);
  background-size: 20px 20px;
}

/* Hairline divider motif (schematic tick) */
.hairline-tick {
  position: relative;
}
.hairline-tick::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 1px;
  background: var(--border);
}
.hairline-tick::after {
  content: '';
  position: absolute;
  left: 0; top: 0;
  width: 8px; height: 1px;
  background: var(--accent);
}