/* ============================================================
   Japan Rabbit — Color tokens
   Source of truth: japanrabbit-app frontend/src/design/variables.json
   Brand master values: Japan Rabbit Style Guide (Frontify)
   ============================================================ */

:root {
  /* --- Brand master (Style Guide / marketing) --------------- */
  --brand-red: #da1517; /* "Primary" — master logo red */
  --brand-red-soft: #f64934; /* "Primary Soft" */
  --brand-accent: #0093d9; /* "Accent" (cyan-blue) */
  --brand-gray-soft: #f6f6f6; /* "Gray Soft" */
  --brand-gray: #ebebeb; /* "Gray" */
  --brand-gray-firm: #b3b3b3; /* "Gray Firm" */
  --brand-gray-strong: #55555b; /* "Strong Gray" — body copy */

  /* --- Red (PRIMARY) — product scale ------------------------ */
  --red-50: #fceae9;
  --red-100: #fcdbdc;
  --red-200: #f09693;
  --red-300: #e8625d;
  --red-400: #e54d47;
  --red-500: #e22e27; /* DEFAULT */
  --red-600: #d72c28;
  --red-700: #b32625;
  --red-800: #93201e;
  --red-900: #661713;
  --red-950: #430d0b;

  /* --- Green (SUCCESS) -------------------------------------- */
  --green-50: #e7f4ec;
  --green-100: #d6ecdf;
  --green-200: #9fd5b6;
  --green-300: #60c08b;
  --green-400: #3ab773;
  --green-500: #24ab61; /* DEFAULT */
  --green-600: #1e9d57;
  --green-700: #18693c;
  --green-800: #124f2d;
  --green-900: #103d24;
  --green-950: #102e1e;

  /* --- Blue (INFO / ACCENT) --------------------------------- */
  --blue-50: #e7f2fb;
  --blue-100: #cde5f7;
  --blue-200: #80bbe6;
  --blue-300: #53a0d7;
  --blue-400: #3789c7;
  --blue-500: #0984e3; /* DEFAULT */
  --blue-600: #0c7cd2;
  --blue-700: #1f66ac;
  --blue-800: #0c4a7d;
  --blue-900: #12355a;
  --blue-950: #062744;

  /* --- Orange (WARNING) ------------------------------------- */
  --orange-50: #feefe7;
  --orange-100: #fbd8cb;
  --orange-200: #f9a98c;
  --orange-300: #f68b65;
  --orange-400: #f47e52;
  --orange-500: #f07c51; /* DEFAULT */
  --orange-600: #e7784e;
  --orange-700: #d66e48;
  --orange-800: #b2532d;
  --orange-900: #864023;
  --orange-950: #613221;

  /* --- Gray (NEUTRAL) — full scale -------------------------- */
  --gray-25: #f8f8fc;
  --gray-50: #f4f5fb;
  --gray-75: #e9ebf1;
  --gray-100: #dde1e7;
  --gray-150: #d6dae1;
  --gray-200: #ced3da;
  --gray-300: #b8bfc9;
  --gray-400: #8f98a3;
  --gray-500: #626975;
  --gray-default: #607085;
  --gray-600: #545a66;
  --gray-700: #484f5a;
  --gray-750: #383e4a;
  --gray-800: #272d37;
  --gray-900: #151720;
  --gray-950: #0f1014;

  /* --- Purple (accent / categorical) ------------------------ */
  --purple-50: #f1ebf5;
  --purple-100: #c7b5d7;
  --purple-200: #ab91c2;
  --purple-300: #9372b2;
  --purple-400: #815ca6;
  --purple-500: #73489c; /* DEFAULT */
  --purple-600: #623d84;
  --purple-700: #563675;
  --purple-800: #4b2f65;
  --purple-900: #3d2754;
  --purple-950: #311e40;

  /* --- Pink (accent / categorical) -------------------------- */
  --pink-50: #fceaef;
  --pink-100: #f8d0e0;
  --pink-200: #f1a4c6;
  --pink-300: #e36da6;
  --pink-400: #d33889;
  --pink-500: #c61c76; /* DEFAULT */
  --pink-600: #b01167;
  --pink-700: #9a0f5b;
  --pink-800: #820d4d;
  --pink-900: #6a0a3f;
  --pink-950: #46062a;

  --white: #ffffff;
  --black: #000000;

  /* ==========================================================
     SEMANTIC ALIASES
     ========================================================== */

  /* Primary / brand */
  --color-primary: var(--red-500);
  --color-primary-hover: var(--red-600);
  --color-primary-soft: var(--red-50);

  /* Status */
  --color-success: var(--green-500);
  --color-info: var(--blue-500);
  --color-accent: var(--blue-500);
  --color-warning: var(--orange-500);
  --color-error: var(--red-500);

  /* Text */
  --text-strong: var(--gray-900); /* headings, high-emphasis */
  --text-body: var(--gray-750); /* default body inside cards */
  --text-muted: var(--gray-500); /* subtitles, captions */
  --text-faint: var(--gray-400); /* placeholders, disabled */
  --text-on-brand: var(--white);
  --text-link: var(--red-500);

  /* Surfaces */
  --surface-app: var(--gray-25); /* page background */
  --surface-card: var(--white);
  --surface-sunken: var(--gray-50);
  --surface-muted: var(--gray-100);
  --surface-brand: var(--red-500); /* footer, hero bands */
  --surface-dark: var(--gray-800);

  /* Borders */
  --border-subtle: var(--gray-100);
  --border-default: var(--gray-200);
  --border-strong: var(--gray-300);
  --border-focus: var(--red-500);
}