/*
 * aiaiai Design System — Primitive Tokens (base.css)
 *
 * Raw values with no semantic meaning.
 * These are building blocks — never use directly in components.
 * Semantic tokens (semantic.css) reference these.
 *
 * Naming: --raw-{category}-{name}
 */

:root {
  /* ─── Color: Neutrals (warm undertone, hue ~55 OKLCH) ─── */
  --raw-color-white: #faf9f7;
  --raw-color-neutral-50: #f7f5f3;
  --raw-color-neutral-100: #f0ece8;
  --raw-color-neutral-200: #e8e2dc;
  --raw-color-neutral-300: #e0d9d1;
  --raw-color-neutral-400: #c4bbb0;
  --raw-color-neutral-500: #a8a29e;
  --raw-color-neutral-600: #78716c;
  --raw-color-neutral-700: #57534e;
  --raw-color-neutral-800: #3d3835;
  --raw-color-neutral-900: #2c2825;
  --raw-color-neutral-950: #1c1917;

  /* ─── Color: Orange (accent — creation, focus) ─── */
  --raw-color-orange-50: #fff7ed;
  --raw-color-orange-100: #fff0e8;
  --raw-color-orange-200: #fed7aa;
  --raw-color-orange-300: #fdba74;
  --raw-color-orange-400: #fb923c;
  --raw-color-orange-500: #ff6b35;
  --raw-color-orange-600: #e85a28;
  --raw-color-orange-700: #c2410c;
  --raw-color-orange-800: #9a3412;
  --raw-color-orange-900: #7c2d12;

  /* ─── Color: Red (destructive — warm-shifted, hue ~30 OKLCH) ─── */
  --raw-color-red-50: #fef3f0;
  --raw-color-red-100: #fde3dc;
  --raw-color-red-200: #fcc9bc;
  --raw-color-red-300: #f9a393;
  --raw-color-red-400: #f47264;
  --raw-color-red-500: #e84e3e;
  --raw-color-red-600: #d03526;
  --raw-color-red-700: #ae2a1e;
  --raw-color-red-800: #8f251c;
  --raw-color-red-900: #76211a;

  /* ─── Color: Green (success — warm-shifted, hue ~145 OKLCH) ─── */
  --raw-color-green-50: #f2faf0;
  --raw-color-green-100: #dff5d9;
  --raw-color-green-200: #bfebb5;
  --raw-color-green-300: #8fdb82;
  --raw-color-green-400: #5ec452;
  --raw-color-green-500: #3daa33;
  --raw-color-green-600: #2d8c26;
  --raw-color-green-700: #256f20;
  --raw-color-green-800: #21581e;
  --raw-color-green-900: #1c4a1a;

  /* ─── Color: Amber (warning — already warm, hue ~80 OKLCH) ─── */
  --raw-color-amber-50: #fefaed;
  --raw-color-amber-100: #fdf1c8;
  --raw-color-amber-200: #fbe38e;
  --raw-color-amber-300: #f8d054;
  --raw-color-amber-400: #f5bc28;
  --raw-color-amber-500: #e8a008;
  --raw-color-amber-600: #c58204;
  --raw-color-amber-700: #9e6308;
  --raw-color-amber-800: #824e0f;
  --raw-color-amber-900: #6e4012;

  /* ─── Color: Blue (info — warm-shifted to teal-blue, hue ~240 OKLCH) ─── */
  --raw-color-blue-50: #f0f5fa;
  --raw-color-blue-100: #dce9f5;
  --raw-color-blue-200: #bed6ed;
  --raw-color-blue-300: #92bbe0;
  --raw-color-blue-400: #5f9ad0;
  --raw-color-blue-500: #3f7dbe;
  --raw-color-blue-600: #2e63a3;
  --raw-color-blue-700: #274f85;
  --raw-color-blue-800: #24416e;
  --raw-color-blue-900: #22375c;

  /* ─── Typography: Font Families ─── */
  --raw-font-sans: "Instrument Sans", sans-serif;
  --raw-font-mono: "Berkeley Mono", "JetBrains Mono", ui-monospace, monospace;

  /* ─── Typography: Font Sizes ─── */
  --raw-font-size-11: 0.6875rem;
  --raw-font-size-12: 0.75rem;
  --raw-font-size-13: 0.8125rem;
  --raw-font-size-14: 0.875rem;
  --raw-font-size-15: 0.9375rem;
  --raw-font-size-18: 1.125rem;
  --raw-font-size-24: 1.5rem;
  --raw-font-size-36: 2.25rem;
  /* Marketing steps. Application surfaces stop at 36; these exist for public
     pages where the headline is the message, not a page title. */
  --raw-font-size-48: 3rem;
  --raw-font-size-64: 4rem;

  /* ─── Typography: Font Weights ─── */
  --raw-font-weight-regular: 400;
  --raw-font-weight-medium: 500;
  --raw-font-weight-semibold: 600;

  /* ─── Typography: Line Heights ─── */
  --raw-line-height-tight: 1.1;
  --raw-line-height-snug: 1.2;
  --raw-line-height-heading: 1.3;
  --raw-line-height-relaxed: 1.4;
  --raw-line-height-body: 1.5;

  /* ─── Typography: Letter Spacing ─── */
  --raw-tracking-tight: -0.02em;
  --raw-tracking-snug: -0.01em;
  --raw-tracking-heading: -0.005em;
  --raw-tracking-normal: 0;
  --raw-tracking-wide: 0.02em;
  --raw-tracking-wider: 0.04em;
  --raw-tracking-micro: 0.005em;
  --raw-tracking-loose: 0.01em;

  /* ─── Icon Sizes ─── */
  --raw-icon-12: 0.75rem;
  --raw-icon-16: 1rem;
  --raw-icon-20: 1.25rem;
  --raw-icon-24: 1.5rem;
  --raw-icon-32: 2rem;
  --raw-icon-48: 3rem;

  /* ─── Spacing ─── */
  --raw-space-2: 0.125rem;
  --raw-space-4: 0.25rem;
  --raw-space-8: 0.5rem;
  --raw-space-16: 1rem;
  --raw-space-24: 1.5rem;
  --raw-space-32: 2rem;
  --raw-space-48: 3rem;
  --raw-space-64: 4rem;
  --raw-space-96: 6rem;

  /* ─── Border Width ─── */
  --raw-border-width-1: 1px;
  --raw-border-width-2: 2px;

  /* ─── Radius ─── */
  --raw-radius-2: 2px;
  --raw-radius-4: 4px;
  --raw-radius-8: 8px;
  --raw-radius-999: 999px;
  --raw-radius-circle: 50%;

  /* ─── Shadows (warm — rgba(44,40,37,...)) ─── */
  --raw-shadow-sm:
    0 1px 3px rgba(44, 40, 37, 0.08), 0 1px 2px rgba(44, 40, 37, 0.06);
  --raw-shadow-md:
    0 4px 16px rgba(44, 40, 37, 0.12), 0 2px 4px rgba(44, 40, 37, 0.08);

  /* ─── Motion: Durations ─── */
  --raw-duration-100: 100ms;
  --raw-duration-150: 150ms;
  --raw-duration-250: 250ms;
  --raw-duration-400: 400ms;
  --raw-duration-600: 600ms;

  /* ─── Motion: Easings ─── */
  --raw-easing-default: cubic-bezier(0.2, 0, 0, 1);
  --raw-easing-enter: cubic-bezier(0, 0, 0.2, 1);
  --raw-easing-exit: cubic-bezier(0.4, 0, 1, 1);
  --raw-easing-linear: linear;

  /* ─── Grid ─── */
  --raw-grid-columns: 12;
  --raw-content-640: 640px;
  --raw-content-960: 960px;
  --raw-content-1200: 1200px;
  --raw-content-1440: 1440px;

  /* ─── Breakpoints (for reference — use in @media queries) ─── */
  --raw-breakpoint-sm: 640px;
  --raw-breakpoint-md: 768px;
  --raw-breakpoint-lg: 1024px;
  --raw-breakpoint-xl: 1280px;
}