/* Fortune — Color foundations + semantic tokens
   Source: app/_styles/colors.css (Tailwind @theme + @utility) translated to plain CSS custom properties. */

:root {
  /* ---- Foundation ramps (do not use directly; prefer semantic tokens below) ---- */
  /* Red */
  --color-red-50: #fff4f4;
  --color-red-100: #fcd9db;
  --color-red-200: #ffa7a7;
  --color-red-300: #f87578;
  --color-red-400: #ed3c42;
  --color-red-500: #cf1417;
  --color-red-600: #b21215;
  --color-red-700: #951011;
  --color-red-800: #780d0f;
  --color-red-900: #5a0a0b;

  /* Blue */
  --color-blue-50: #f4fafb;
  --color-blue-100: #d2eff4;
  --color-blue-200: #9dd4e0;
  --color-blue-300: #61bed0;
  --color-blue-400: #1990ae;
  --color-blue-500: #007b9d;
  --color-blue-600: #006885;
  --color-blue-700: #00566f;
  --color-blue-800: #004459;
  --color-blue-900: #003344;

  /* Green */
  --color-green-50: #f4fbf8;
  --color-green-100: #ceefe3;
  --color-green-200: #8dd5bb;
  --color-green-300: #55c09d;
  --color-green-400: #289e7d;
  --color-green-500: #008462;
  --color-green-600: #007255;
  --color-green-700: #005f49;
  --color-green-800: #004d3c;
  --color-green-900: #013329;

  /* Yellow */
  --color-yellow-50: #fffcf2;
  --color-yellow-100: #fff4d4;
  --color-yellow-200: #ffe8ad;
  --color-yellow-300: #ffd97a;
  --color-yellow-400: #ffc94b;
  --color-yellow-500: #f1af17;
  --color-yellow-600: #c9981d;
  --color-yellow-700: #a88524;
  --color-yellow-800: #8e660e;
  --color-yellow-900: #382905;

  /* Gold */
  --color-gold-50: #faf9f5;
  --color-gold-100: #f3f0e5;
  --color-gold-200: #e8e1c5;
  --color-gold-300: #e4d491;
  --color-gold-400: #ddc679;
  --color-gold-500: #c9ac5c;
  --color-gold-600: #b2953c;
  --color-gold-700: #9c873c;
  --color-gold-800: #716122;
  --color-gold-900: #302a15;

  /* Neutrals */
  --color-neutral-50: #fefefe;
  --color-neutral-100: #f8f8f8;
  --color-neutral-200: #ededed;
  --color-neutral-300: #e0e0e0;
  --color-neutral-400: #d3d3d3;
  --color-neutral-500: #9c9c9c;
  --color-neutral-600: #626262;
  --color-neutral-700: #333333;
  --color-neutral-800: #242424;
  --color-neutral-900: #111111;

  /* Indigo (Electric Blue ramp; 700 == Special/Blue-1) */
  --color-indigo-50: #f1f2ff;
  --color-indigo-100: #cdd0ff;
  --color-indigo-200: #c7ccff;
  --color-indigo-300: #a5acff;
  --color-indigo-400: #8c95ff;
  --color-indigo-500: #5662ff;
  --color-indigo-600: #4f5cff;
  --color-indigo-700: #2e3dff;
  --color-indigo-800: #1d27a3;
  --color-indigo-900: #151c75;
  --color-indigo-950: #0d1147;

  /* Special */
  --color-blue-1: #2e3dff;
  --color-blue-2: #00aeef;
  --color-blue-3: #151d7c;
  --color-green-1: #2ed6ab;
  --color-green-2: #008a8c;
  --color-white: #ffffff;
  --color-black: #000000;

  /* ---- Semantic tokens (light theme) ---- */
  /* Backgrounds */
  --bg-pure: var(--color-white);
  --bg-primary: var(--color-neutral-50);
  --bg-secondary: var(--color-neutral-100);
  --bg-helper: var(--color-neutral-200);
  --bg-accent: var(--color-blue-500);
  --bg-accent-inverse: var(--color-blue-50);
  --bg-gold: var(--color-gold-50);
  --bg-gold-accent: var(--color-gold-700);
  --bg-inverse: var(--color-neutral-900);

  /* Text */
  --text-primary: var(--color-neutral-900);
  --text-primary-inverse: var(--color-neutral-50);
  --text-white: var(--color-neutral-50);
  --text-accent: var(--color-blue-500);
  --text-red: var(--color-red-500);
  --text-gold: var(--color-gold-800);
  --text-secondary: var(--color-neutral-600);
  --text-helper: var(--color-neutral-500);
  --text-link: var(--color-blue-500);
  --text-link-hover: var(--color-blue-600);
  --text-link-visited: var(--color-blue-300);

  /* Icons */
  --icon-primary: var(--color-neutral-900);
  --icon-secondary: var(--color-neutral-600);
  --icon-helper: var(--color-neutral-500);
  --icon-accent: var(--color-blue-500);
  --icon-red: var(--color-red-500);
  --icon-white: var(--color-neutral-50);

  /* Borders / strokes */
  --stroke-primary: var(--color-neutral-100);
  --stroke-secondary: var(--color-neutral-200);
  --stroke-helper: var(--color-neutral-300);
  --stroke-helper-2: var(--color-neutral-600);
  --stroke-inverse: var(--color-neutral-900);
  --stroke-accent: var(--color-blue-500);
  --stroke-red: var(--color-red-500);

  /* Buttons */
  --button-primary: var(--color-blue-600);
  --button-primary-hover: var(--color-blue-800);
  --button-primary-disabled: var(--color-blue-200);
  --button-text-primary: var(--color-white);
  --button-secondary: var(--color-neutral-200);
  --button-secondary-hover: var(--color-neutral-300);
  --button-secondary-disabled: var(--color-neutral-100);
  --button-text-secondary: var(--color-neutral-900);
  --button-accent: var(--color-red-500);
  --button-accent-hover: var(--color-red-600);
  --button-accent-disabled: var(--color-red-200);
  --button-text-accent: var(--color-white);
  --button-special-blue: var(--color-blue-1);
  --button-special-blue-hover: #2733d9;
  --button-special-blue-disabled: #aeb6ff;
  --button-text-special-blue: var(--color-white);
  --button-black: var(--color-black);
  --button-black-hover: var(--color-neutral-800);
  --button-focus-ring: var(--color-blue-200);

  /* Status */
  --info-surface: var(--color-blue-50);
  --info-text: var(--color-blue-700);
  --info-border: var(--color-blue-500);
  --success-surface: var(--color-green-50);
  --success-text: var(--color-green-700);
  --success-border: var(--color-green-500);
  --warning-surface: var(--color-yellow-50);
  --warning-text: var(--color-yellow-800);
  --warning-border: var(--color-yellow-500);
  --critical-surface: var(--color-red-50);
  --critical-text: var(--color-red-700);
  --critical-border: var(--color-red-500);
}

/* ---- Dark theme overrides ---- */
[data-theme="dark"] {
  --bg-pure: var(--color-black);
  --bg-primary: var(--color-neutral-900);
  --bg-secondary: var(--color-neutral-800);
  --bg-helper: var(--color-neutral-700);
  --bg-accent: var(--color-blue-400);
  --bg-accent-inverse: var(--color-blue-900);
  --bg-gold: var(--color-gold-900);
  --bg-gold-accent: var(--color-gold-500);
  --bg-inverse: var(--color-neutral-800);

  --text-primary: var(--color-neutral-50);
  --text-primary-inverse: var(--color-neutral-900);
  --text-accent: var(--color-blue-300);
  --text-red: var(--color-red-400);
  --text-gold: var(--color-gold-600);
  --text-secondary: var(--color-neutral-100);
  --text-helper: var(--color-neutral-600);
  --text-link: var(--color-blue-300);
  --text-link-hover: var(--color-blue-400);

  --icon-primary: var(--color-neutral-50);
  --icon-secondary: var(--color-neutral-100);
  --icon-helper: var(--color-neutral-600);
  --icon-accent: var(--color-blue-300);
  --icon-red: var(--color-red-400);

  --stroke-primary: var(--color-neutral-800);
  --stroke-secondary: var(--color-neutral-700);
  --stroke-helper: var(--color-neutral-600);
  --stroke-helper-2: var(--color-neutral-700);
  --stroke-inverse: var(--color-neutral-50);
  --stroke-accent: var(--color-blue-300);
  --stroke-red: var(--color-red-400);

  --button-primary-hover: var(--color-blue-500);
  --button-secondary: var(--color-neutral-800);
  --button-text-secondary: var(--color-white);
  --button-accent: var(--color-red-600);
  --button-accent-hover: var(--color-red-500);

  --info-surface: var(--color-blue-700);
  --info-text: var(--color-blue-50);
  --success-surface: var(--color-green-900);
  --success-text: var(--color-green-300);
  --warning-surface: var(--color-yellow-600);
  --warning-text: var(--color-yellow-50);
  --critical-surface: var(--color-red-700);
  --critical-text: var(--color-red-50);
}