/*
  Design tokens for the AI Collaborator prototype.
  Extracted from app/assets/tailwind/theme.css — keep in sync if the palette changes.
*/

@font-face {
  font-family: 'KlarheitGrotesk';
  src: url('./fonts/KlarheitGrotesk-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
}

:root {
  /* ── Typography ── */
  --font: 'KlarheitGrotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;

  /* ── Neutral ── */
  --neutral-50:  #fffcf7;
  --neutral-75:  #f7f5f0;
  --neutral-100: #f2efeb;
  --neutral-200: #ebe8e4;
  --neutral-300: #d4d1cd;
  --neutral-400: #bab8b5;
  --neutral-500: #757472;
  --neutral-600: #61605e;
  --neutral-700: #403f3e;
  --neutral-800: #2e2d2d;
  --neutral-900: #1a1919;
  --neutral-950: #070707;

  /* ── Semantic (layout) ── */
  --surface: var(--neutral-50);

  /* ── Base ── */
  --white: #ffffff;
  --black: #000000;

  /* ── Eclipse Alpha ── */
  --eclipse-alpha-04: #0707070a;
  --eclipse-alpha-08: #07070714;
  --eclipse-alpha-20: #07070733;
  --eclipse-alpha-60: #07070799;

  /* ── Sea (Blue) ── */
  --sea-75:  #f2f7ff;
  --sea-100: #ebf3ff;
  --sea-200: #cce0ff;
  --sea-300: #9dc4fe;
  --sea-400: #4c94ff;
  --sea-500: #0066ff;
  --sea-600: #005ce5;
  --sea-700: #004ec2;
  --sea-800: #0043a8;
  --sea-900: #002f75;
  --sea-950: #001a42;

  /* ── Jade (Green) ── */
  --jade-75:  #e3fff1;
  --jade-100: #d0fae5;
  --jade-200: #94f7cc;
  --jade-300: #59dea4;
  --jade-400: #27c480;
  --jade-500: #00ab61;
  --jade-600: #009152;
  --jade-700: #007844;
  --jade-800: #005e35;
  --jade-900: #004527;
  --jade-950: #002b19;

  /* ── Playa (Orange) ── */
  --playa-75:  #fff5e3;
  --playa-100: #ffebcc;
  --playa-200: #ffd899;
  --playa-300: #ffba66;
  --playa-400: #ffba66;
  --playa-500: #f76700;
  --playa-600: #d95a00;
  --playa-700: #bf5000;
  --playa-800: #994000;
  --playa-900: #592500;
  --playa-950: #401b00;

  /* ── Lava (Red) ── */
  --lava-75:  #ffebeb;
  --lava-100: #ffe2e2;
  --lava-200: #ffc9c9;
  --lava-300: #ffa2a2;
  --lava-400: #ff6467;
  --lava-500: #fb2c36;
  --lava-600: #e7000b;
  --lava-700: #c10006;
  --lava-800: #9f0712;
  --lava-900: #82181a;
  --lava-950: #460809;

  /* ── Shadows ── */
  --shadow-float: 0 2px 12px rgba(7,7,7,0.10), 0 1px 3px rgba(7,7,7,0.06);
  --shadow-raised: 0 4px 16px rgba(7,7,7,0.14), 0 1px 4px rgba(7,7,7,0.08);
}