/* Far Fetched — Color tokens
   Dark-mode-first, ocean-blue accent system. Base ramps + semantic aliases. */

:root {
  /* ---- Base neutrals (deep sea → foam) ---- */
  --ink-950: #05070c;
  --ink-900: #0a0f1a;
  --ink-850: #0d1420;
  --ink-800: #121b2b;
  --ink-700: #1b2740;
  --ink-600: #2a3a58;
  --ink-500: #445872;
  --ink-400: #6c8098;
  --ink-300: #9aabbe;
  --ink-200: #c4cfdb;
  --ink-100: #e4eaf1;
  --ink-50:  #f4f7fa;

  /* ---- Ocean blue accent ramp ---- */
  --blue-900: #0b234f;
  --blue-800: #123368;
  --blue-700: #17458c;
  --blue-600: #1c56ac;
  --blue-500: #2563eb;
  --blue-400: #3b82f6;
  --blue-300: #60a5fa;
  --blue-200: #93c5fd;
  --blue-100: #bfdcfe;

  /* ---- Foam / cyan highlight (whitewater accent, used sparingly) ---- */
  --foam-500: #38bdf8;
  --foam-400: #7dd3fc;
  --foam-300: #a5e9fd;

  /* ---- Semantic status ---- */
  --success-500: #22c55e;
  --success-300: #86efac;
  --warning-500: #f5b942;
  --warning-300: #fbd67f;
  --danger-500: #f2564b;
  --danger-300: #f8a29b;

  /* ---- Semantic aliases: surfaces ---- */
  --surface-app: var(--ink-950);
  --surface-canvas: var(--ink-900);
  --surface-card: var(--ink-850);
  --surface-card-raised: var(--ink-800);
  --surface-sunken: var(--ink-950);
  --surface-overlay: rgba(5, 7, 12, 0.72);
  --surface-hairline: rgba(148, 175, 205, 0.14);
  --surface-hairline-strong: rgba(148, 175, 205, 0.24);

  /* ---- Semantic aliases: text ---- */
  --text-primary: var(--ink-50);
  --text-secondary: var(--ink-300);
  --text-tertiary: var(--ink-500);
  --text-on-accent: #f4f9ff;
  --text-link: var(--blue-300);
  --text-link-hover: var(--foam-400);

  /* ---- Semantic aliases: accent / interactive ---- */
  --accent: var(--blue-500);
  --accent-hover: var(--blue-400);
  --accent-active: var(--blue-600);
  --accent-subtle: rgba(37, 99, 235, 0.14);
  --accent-subtle-hover: rgba(37, 99, 235, 0.22);
  --focus-ring: var(--foam-500);

  /* ---- Semantic aliases: borders ---- */
  --border-subtle: var(--surface-hairline);
  --border-default: var(--surface-hairline-strong);
  --border-accent: rgba(59, 130, 246, 0.45);
}