/* ============================================================
   Atara AI — Colors & Type
   Black-and-white, futuristic, distributed-intelligence brand.
   Black is the canonical canvas; white is the canonical ink.
   ============================================================ */

/* ---------- Web fonts ----------
   Brand font: Satoshi (local OTF files in fonts/) — used for display AND body.
   Mono: JetBrains Mono (Google Fonts) for code, ids, status pills.
*/
@import url("https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600&display=swap");

@font-face {
  font-family: "Satoshi";
  src: url("fonts/Satoshi-Light.otf") format("opentype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Satoshi";
  src: url("fonts/Satoshi-LightItalic.otf") format("opentype");
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Satoshi";
  src: url("fonts/Satoshi-Regular.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Satoshi";
  src: url("fonts/Satoshi-Italic.otf") format("opentype");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Satoshi";
  src: url("fonts/Satoshi-Medium.otf") format("opentype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Satoshi";
  src: url("fonts/Satoshi-MediumItalic.otf") format("opentype");
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Satoshi";
  src: url("fonts/Satoshi-Bold.otf") format("opentype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Satoshi";
  src: url("fonts/Satoshi-BoldItalic.otf") format("opentype");
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Satoshi";
  src: url("fonts/Satoshi-Black.otf") format("opentype");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Satoshi";
  src: url("fonts/Satoshi-BlackItalic.otf") format("opentype");
  font-weight: 900;
  font-style: italic;
  font-display: swap;
}

:root {
  /* ---------- Core palette ---------- */
  --black:        #000000;
  --ink:          #0A0A0A;
  --ink-2:        #111111;
  --ink-3:        #1A1A1A;
  --ink-4:        #242424;
  --line:         #2A2A2A;
  --line-2:       #3A3A3A;

  --white:        #FFFFFF;
  --paper:        #FAFAFA;
  --paper-2:      #F2F2F2;
  --paper-3:      #E8E8E8;
  --paper-4:      #DCDCDC;
  --line-light:   #E5E5E5;
  --line-light-2: #CFCFCF;

  /* Neutral scale */
  --n-0:   #FFFFFF;
  --n-50:  #F5F5F5;
  --n-100: #E8E8E8;
  --n-200: #CFCFCF;
  --n-300: #A8A8A8;
  --n-400: #7A7A7A;
  --n-500: #5C5C5C;
  --n-600: #3D3D3D;
  --n-700: #2A2A2A;
  --n-800: #1A1A1A;
  --n-900: #0A0A0A;
  --n-1000:#000000;

  /* ---------- Semantic foreground (on black canvas) ---------- */
  --fg-1: #FFFFFF;
  --fg-2: rgba(255,255,255,.72);
  --fg-3: rgba(255,255,255,.52);
  --fg-4: rgba(255,255,255,.32);
  --fg-inverse: #0A0A0A;

  /* ---------- Semantic background (on black canvas) ---------- */
  --bg-canvas:  #000000;
  --bg-surface: #0A0A0A;
  --bg-raised:  #111111;
  --bg-hover:   #1A1A1A;
  --bg-active:  #242424;

  /* ---------- Borders ---------- */
  --border-subtle: rgba(255,255,255,.08);
  --border:        rgba(255,255,255,.14);
  --border-strong: rgba(255,255,255,.24);
  --border-focus:  rgba(255,255,255,.85);

  /* ---------- State / accent ---------- */
  --accent:        #FFFFFF;
  --accent-hover:  #E8E8E8;
  --accent-press:  #CFCFCF;

  --success: #6EE7B7;
  --warning: #FACC15;
  --danger:  #F87171;
  --info:    #93C5FD;

  /* ---------- Brand signal ---------- */
  --signal-glow: rgba(255,255,255,.12);

  /* ---------- Type stack ---------- */
  --font-display: "Satoshi", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body:    "Satoshi", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* ---------- Type scale ---------- */
  --fs-12: 0.75rem;
  --fs-13: 0.8125rem;
  --fs-14: 0.875rem;
  --fs-16: 1rem;
  --fs-18: 1.125rem;
  --fs-20: 1.25rem;
  --fs-24: 1.5rem;
  --fs-32: 2rem;
  --fs-44: 2.75rem;
  --fs-60: 3.75rem;
  --fs-84: 5.25rem;
  --fs-120: 7.5rem;

  --lh-tight:   1.04;
  --lh-snug:    1.18;
  --lh-base:    1.5;
  --lh-relaxed: 1.65;

  --ls-tight:    -0.04em;
  --ls-snug:     -0.02em;
  --ls-base:      0em;
  --ls-wide:      0.04em;
  --ls-caps:      0.18em;

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

  /* ---------- Radii ---------- */
  --r-0:    0;
  --r-xs:   4px;
  --r-sm:   8px;
  --r-md:   12px;
  --r-lg:   16px;
  --r-xl:   24px;
  --r-2xl:  32px;
  --r-pill: 999px;

  /* ---------- Shadows / glows ---------- */
  --shadow-1: 0 1px 0 rgba(255,255,255,0.04) inset;
  --shadow-2: 0 1px 0 rgba(255,255,255,0.06) inset, 0 8px 24px rgba(0,0,0,0.5);
  --shadow-3: 0 1px 0 rgba(255,255,255,0.08) inset, 0 24px 60px rgba(0,0,0,0.6);
  --glow-soft:   0 0 0 1px rgba(255,255,255,.08), 0 0 40px rgba(255,255,255,.06);
  --glow-strong: 0 0 0 1px rgba(255,255,255,.18), 0 0 80px rgba(255,255,255,.12);

  /* ---------- Motion ---------- */
  --ease-out: cubic-bezier(.2,.7,.2,1);
  --ease-in-out: cubic-bezier(.65,0,.35,1);
  --dur-1: 120ms;
  --dur-2: 220ms;
  --dur-3: 360ms;
  --dur-4: 600ms;

  /* ---------- Grid ---------- */
  --grid-max: 1280px;
  --grid-gutter: 24px;
}