/* ============================================================
   Yodal.ai — Design Tokens
   Consolidated from Figma design system
   ============================================================ */

:root {
  /* --- Base neutrals (cool, slightly blue near-black) --- */
  --white: #ffffff;
  --ink-950: #0b0b0f;
  --ink-900: #15151c;
  --ink-800: #20202a;
  --ink-700: #2e2e3a;
  --ink-600: #4a4a57;
  --ink-500: #6b6b78;
  --ink-400: #909099;
  --ink-300: #b8b8c0;
  --ink-200: #d9d9de;
  --ink-100: #ececef;
  --ink-50:  #f6f6f8;

  /* --- Brand: Caribbean blue (PRIMARY) --- */
  --reef-800: #074c59;
  --reef-700: #0a6e80;
  --reef-600: #0a8da3;
  --reef-500: #08a6c0;
  --reef-400: #21c2d6;
  --reef-300: #6fd9e6;
  --reef-200: #a9e8f0;
  --reef-100: #d4f2f6;
  --reef-50:  #eefafc;

  /* --- Accent: Magenta (RARE) --- */
  --magenta-700: #a10e59;
  --magenta-600: #c4116a;
  --magenta-500: #e81a72;
  --magenta-400: #f52e8c;
  --magenta-100: #fcdcea;
  --magenta-50:  #fdf0f5;

  /* --- Accent: warm spark (rare) --- */
  --orange-500: #ff7d1a;
  --orange-100: #ffe6d2;

  /* --- Gradients --- */
  --gradient-brand: linear-gradient(135deg, #21c2d6 0%, #08a6c0 45%, #0a6e80 100%);
  --gradient-reef: linear-gradient(135deg, #21c2d6 0%, #0a6e80 100%);
  --gradient-ink: linear-gradient(180deg, #20202a 0%, #0b0b0f 100%);

  /* --- Semantic status --- */
  --success-500: #16a96b;
  --success-100: #d6f3e6;
  --warning-500: #f79420;
  --warning-100: #fdecd4;
  --danger-500:  #e5342b;
  --danger-100:  #fbdbd9;
  --info-500:    #08a6c0;
  --info-100:    #d4f2f6;

  /* --- Semantic surfaces --- */
  --surface-page:      var(--white);
  --surface-raised:    var(--white);
  --surface-sunken:    var(--ink-50);
  --surface-card:      var(--white);
  --surface-inverse:   var(--ink-950);
  --surface-brand:     var(--reef-500);
  --surface-brand-subtle: var(--reef-50);

  /* --- Semantic text --- */
  --text-strong:  var(--ink-950);
  --text-body:    var(--ink-800);
  --text-muted:   var(--ink-500);
  --text-subtle:  var(--ink-400);
  --text-inverse: var(--white);
  --text-brand:   var(--reef-600);
  --text-link:    var(--reef-600);
  --text-link-hover: var(--reef-700);

  /* --- Semantic borders --- */
  --border-subtle:  var(--ink-100);
  --border-default: var(--ink-200);
  --border-strong:  var(--ink-300);
  --border-brand:   var(--reef-500);
  --border-focus:   var(--reef-400);

  /* --- Interactive states --- */
  --action-brand:        var(--reef-500);
  --action-brand-hover:  var(--reef-600);
  --action-brand-press:  var(--reef-700);
  --action-ghost-hover:  var(--ink-50);

  /* ============================================================
     Typography
     ============================================================ */
  --font-display: "Brigten", "Manrope", system-ui, sans-serif;
  --font-sans:    "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "SFMono-Regular", monospace;

  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semibold: 600;
  --fw-bold:    700;
  --fw-extrabold: 800;

  --text-xs:   0.75rem;
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-md:   1.125rem;
  --text-lg:   1.375rem;
  --text-xl:   1.75rem;
  --text-2xl:  2.25rem;
  --text-3xl:  3rem;
  --text-4xl:  4rem;
  --text-5xl:  5.5rem;

  --leading-tight:  1.05;
  --leading-snug:   1.2;
  --leading-normal: 1.5;
  --leading-relaxed: 1.65;

  --tracking-tight:  -0.03em;
  --tracking-snug:   -0.015em;
  --tracking-normal: 0;
  --tracking-wide:   0.04em;
  --tracking-caps:   0.12em;

  /* ============================================================
     Spacing (4px base grid)
     ============================================================ */
  --space-0:  0;
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-32: 8rem;

  --container-sm: 640px;
  --container-md: 860px;
  --container-lg: 1120px;
  --container-xl: 1320px;
  --gutter: var(--space-6);

  /* ============================================================
     Radius
     ============================================================ */
  --radius-none: 0;
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 20px;
  --radius-2xl: 28px;
  --radius-pill: 999px;

  /* ============================================================
     Shadows
     ============================================================ */
  --shadow-xs: 0 1px 2px rgba(11, 11, 15, 0.06);
  --shadow-sm: 0 1px 3px rgba(11, 11, 15, 0.08), 0 1px 2px rgba(11, 11, 15, 0.04);
  --shadow-md: 0 4px 12px rgba(11, 11, 15, 0.08), 0 2px 4px rgba(11, 11, 15, 0.04);
  --shadow-lg: 0 12px 28px rgba(11, 11, 15, 0.12), 0 4px 8px rgba(11, 11, 15, 0.05);
  --shadow-xl: 0 24px 56px rgba(11, 11, 15, 0.16), 0 8px 16px rgba(11, 11, 15, 0.06);
  --shadow-brand: 0 8px 24px rgba(8, 166, 192, 0.28);
  --shadow-brand-sm: 0 2px 10px rgba(8, 166, 192, 0.22);
  --ring-brand: 0 0 0 3px rgba(8, 166, 192, 0.28);
  --ring-danger: 0 0 0 3px rgba(229, 52, 43, 0.28);

  /* ============================================================
     Motion
     ============================================================ */
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in: cubic-bezier(0.4, 0, 1, 1);
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --dur-slow: 320ms;
  --transition-control: color var(--dur-fast) var(--ease-standard),
                        background-color var(--dur-fast) var(--ease-standard),
                        border-color var(--dur-fast) var(--ease-standard),
                        box-shadow var(--dur-fast) var(--ease-standard),
                        transform var(--dur-fast) var(--ease-standard);
}