/* =========================================================
   Cudator.ai — Design Tokens
   ---------------------------------------------------------
   Fresh brand. Cool-blue, but distinct from StrategicSyntax:
   indigo-leaning cobalt primary, an electric azure accent,
   and a colder near-black ink. Spacing / radius / shadow /
   motion / type-scale discipline is inherited (4pt grid,
   cool-tinted elevation, confident ease-out).
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Schibsted+Grotesk:wght@500;600;700;800&family=IBM+Plex+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

:root {
  /* -------- Brand colors -------- */
  --cu-cobalt: #2B59E0;   /* primary action — indigo cobalt */
  --cu-azure:  #29A7F0;   /* accent / highlight — electric sky */
  --cu-ink:    #141A33;   /* brand navy / primary text */

  /* -------- Cobalt ramp (primary) -------- */
  --cu-cobalt-050: #EEF2FE;
  --cu-cobalt-100: #D8E1FD;
  --cu-cobalt-200: #B0C2FB;
  --cu-cobalt-300: #7E9BF6;
  --cu-cobalt-400: #4F73EE;
  --cu-cobalt-500: #2B59E0;
  --cu-cobalt-600: #1E45BE;
  --cu-cobalt-700: #1A3A9C;

  /* -------- Azure ramp (accent) -------- */
  --cu-azure-050: #E9F6FE;
  --cu-azure-100: #C9EBFD;
  --cu-azure-200: #97D8FA;
  --cu-azure-300: #5FC1F5;
  --cu-azure-400: #29A7F0;
  --cu-azure-500: #0F8FDC;
  --cu-azure-600: #0A72B3;

  /* -------- Ink / navy ramp (cool neutral-dark) -------- */
  --cu-ink-050: #E8EAF1;
  --cu-ink-100: #C7CBDC;
  --cu-ink-200: #9298B6;
  --cu-ink-300: #5C6486;
  --cu-ink-400: #333A5C;
  --cu-ink-500: #141A33;
  --cu-ink-600: #0E1328;
  --cu-ink-700: #080B1B;

  /* -------- Neutrals (cool, slightly blue) -------- */
  --cu-white:    #FFFFFF;
  --cu-paper:    #F6F8FC;   /* default page bg */
  --cu-fog:      #EEF1F8;   /* subtle container */
  --cu-mist:     #DEE3EF;   /* default hairline */
  --cu-silver:   #BCC4D6;   /* strong border / disabled */
  --cu-slate:    #6A7390;   /* tertiary text */
  --cu-graphite: #39415F;   /* secondary text */
  --cu-obsidian: #0A0E20;

  /* -------- Semantic -------- */
  --cu-success: #15A06B;
  --cu-success-bg: #E3F6EE;
  --cu-warning: #D9961A;
  --cu-warning-bg: #FBF1DD;
  --cu-danger:  #E0483D;
  --cu-danger-bg: #FBE7E5;
  --cu-info:    #29A7F0;
  --cu-info-bg: #E9F6FE;

  /* -------- Foreground / background semantic tokens -------- */
  --fg-1: var(--cu-ink);
  --fg-2: var(--cu-graphite);
  --fg-3: var(--cu-slate);
  --fg-mute: var(--cu-silver);
  --fg-on-dark: var(--cu-white);
  --fg-link: var(--cu-cobalt);
  --fg-link-hover: var(--cu-cobalt-600);

  --bg-1: var(--cu-white);
  --bg-2: var(--cu-paper);
  --bg-3: var(--cu-fog);
  --bg-inverse: var(--cu-ink);
  --bg-inverse-2: var(--cu-obsidian);

  --border-1: var(--cu-mist);
  --border-2: var(--cu-silver);
  --border-focus: var(--cu-cobalt);

  --accent-1: var(--cu-cobalt);
  --accent-2: var(--cu-azure);

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

  /* -------- Radius -------- */
  --r-xs: 4px; --r-sm: 6px; --r-md: 10px; --r-lg: 14px; --r-xl: 22px;
  --r-pill: 999px; --r-circle: 50%;

  /* -------- Shadow (cool-tinted, ink-based) -------- */
  --shadow-xs: 0 1px 2px rgba(20, 26, 51, 0.06);
  --shadow-sm: 0 2px 6px rgba(20, 26, 51, 0.08), 0 1px 2px rgba(20, 26, 51, 0.04);
  --shadow-md: 0 8px 24px rgba(20, 26, 51, 0.10), 0 2px 6px rgba(20, 26, 51, 0.05);
  --shadow-lg: 0 20px 48px rgba(20, 26, 51, 0.16), 0 4px 12px rgba(20, 26, 51, 0.07);
  --shadow-glow: 0 0 0 3px rgba(43, 89, 224, 0.20);
  --shadow-glow-danger: 0 0 0 3px rgba(224, 72, 61, 0.18);

  /* -------- Motion -------- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 120ms; --dur-base: 200ms; --dur-slow: 320ms;

  /* -------- Type families -------- */
  --font-display: 'Schibsted Grotesk', system-ui, -apple-system, sans-serif;
  --font-sans: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* -------- Type scale -------- */
  --fs-11: 0.6875rem; --fs-12: 0.75rem; --fs-13: 0.8125rem; --fs-14: 0.875rem;
  --fs-15: 0.9375rem; --fs-16: 1rem; --fs-18: 1.125rem; --fs-20: 1.25rem;
  --fs-24: 1.5rem; --fs-30: 1.875rem; --fs-36: 2.25rem; --fs-48: 3rem; --fs-60: 3.75rem;

  /* -------- Line heights -------- */
  --lh-tight: 1.05; --lh-snug: 1.2; --lh-base: 1.5; --lh-loose: 1.65;

  /* -------- Letter spacing -------- */
  --ls-tight: -0.02em; --ls-snug: -0.01em; --ls-base: 0;
  --ls-wide: 0.04em; --ls-eyebrow: 0.12em;
}

/* =========================================================
   Base element defaults
   ========================================================= */
* { box-sizing: border-box; }

html { color: var(--fg-1); background: var(--bg-2); }
body {
  margin: 0;
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--fs-14);
  line-height: var(--lh-base);
  color: var(--fg-1);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: 'tnum' 0;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--fg-1);
  margin: 0;
  letter-spacing: var(--ls-tight);
  text-wrap: balance;
}

.eyebrow {
  font-family: var(--font-sans);
  font-size: var(--fs-11);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--ls-eyebrow);
  color: var(--fg-3);
}

code, kbd, samp, pre { font-family: var(--font-mono); }
.mono { font-family: var(--font-mono); font-feature-settings: 'tnum' 1; }
.tnum { font-feature-settings: 'tnum' 1; font-variant-numeric: tabular-nums; }

a { color: var(--fg-link); text-decoration: none; }

::selection { background: var(--cu-cobalt-200); }

*:focus-visible {
  outline: none;
  box-shadow: var(--shadow-glow);
  border-radius: var(--r-xs);
}

/* thin custom scrollbars for the console feel */
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb { background: var(--cu-silver); border-radius: 999px; border: 3px solid transparent; background-clip: content-box; }
*::-webkit-scrollbar-thumb:hover { background: var(--cu-slate); background-clip: content-box; }
*::-webkit-scrollbar-track { background: transparent; }