/*!
 * Oisix Design Tokens
 * Generated from the Figma Design Token file ("Design-Token").
 *
 * Source of truth is Figma. Do NOT hand-edit token values here;
 * regenerate from the Figma tokens instead.
 *
 * Layers:
 *   1. Primitive - raw palette / scale values
 *   2. Semantic  - role-based tokens that reference primitives via var()
 *
 * Color = Color Tokens v2 (settled 2026-07-09).
 * Radius = Radius Variables (Primitive) from Oisix UI Guidelines.
 * Spacing = spacing-primitive (px-based scale) + spacing-semantic.
 *   Semantic spacing (--space-*) is responsive: it resolves to different
 *   values on SP vs PC, so it is NOT defined here. It lives in
 *   design-tokens.sp.css / design-tokens.pc.css, which are loaded per
 *   screenmode right after this file (SP/App -> .sp, PC -> .pc).
 */

:root {
  /* ===== Primitive : Color ===== */
  --primitive-white: #ffffff;  /* base */
  --primitive-gray-50: #f7f7f7;  /* gray */
  --primitive-gray-100: #ebebeb;  /* gray */
  --primitive-gray-200: #dddddd;  /* gray */
  --primitive-gray-300: #c7c7c7;  /* gray */
  --primitive-gray-300-a40: rgba(199, 199, 199, 0.4);  /* gray alpha40 */
  --primitive-gray-500: #888888;  /* gray */
  --primitive-gray-700: #666666;  /* gray */
  --primitive-gray-700-a40: rgba(102, 102, 102, 0.4);  /* gray alpha40 */
  --primitive-gray-900: #333333;  /* gray */
  --primitive-green-100: #f3f6e8;  /* green */
  --primitive-green-700: #76952f;  /* green / brand */
  --primitive-green-800: #5a7325;  /* green */
  --primitive-red-50: #fdecef;  /* red */
  --primitive-red-700: #ce0000;  /* red */
  --primitive-scarlet-500: #c9473d;  /* scarlet */
  --primitive-blue-700: #1963a5;  /* blue / link */

  /* ===== Primitive : Radius ===== */
  --radius-small: 4px;
  --radius-medium: 8px;
  --radius-large: 12px;
  --radius-extra-large: 16px;
  --radius-full: 9999px;

  /* ===== Primitive : Spacing (4px grid) ===== */
  --spacing-4: 4px;
  --spacing-8: 8px;
  --spacing-12: 12px;
  --spacing-16: 16px;
  --spacing-20: 20px;
  --spacing-24: 24px;
  --spacing-32: 32px;
  --spacing-40: 40px;
  --spacing-48: 48px;
  --spacing-56: 56px;
  --spacing-64: 64px;
  --spacing-72: 72px;
  --spacing-80: 80px;

  /* ===== Semantic : Background ===== */
  --background-basic: var(--primitive-white);  /* page base background */

  /* ===== Semantic : Surface ===== */
  --surface-basic: var(--primitive-white);  /* base surface */
  --surface-neutral-subtle: var(--primitive-gray-50);  /* subtle area */
  --surface-neutral: var(--primitive-gray-100);  /* neutral area */
  --surface-neutral-strong: var(--primitive-gray-900);  /* tooltip / toast */
  --surface-accent-subtle: var(--primitive-green-100);  /* soft accent */
  --surface-accent-strong: var(--primitive-green-800);  /* accent / button fill */
  --surface-error-subtle: var(--primitive-red-50);  /* soft error */
  --surface-error-strong: var(--primitive-red-700);  /* strong error */
  --surface-hot: var(--primitive-scarlet-500);  /* sale / badge */
  --surface-disabled: var(--primitive-gray-300-a40);  /* disabled button */

  /* ===== Semantic : Text ===== */
  --text-neutral-primary: var(--primitive-gray-900);  /* primary text */
  --text-neutral-secondary: var(--primitive-gray-700);  /* secondary text */
  --text-neutral-tertiary: var(--primitive-gray-500);  /* caption / placeholder */
  --text-accent: var(--primitive-green-800);  /* accent text */
  --text-error: var(--primitive-red-700);  /* error text */
  --text-hot: var(--primitive-scarlet-500);  /* sale / badge text */
  --text-link: var(--primitive-blue-700);  /* link text */
  --text-disabled: var(--primitive-gray-700-a40);  /* disabled text */
  --text-inverse: var(--primitive-white);  /* on dark background */

  /* ===== Semantic : Object ===== */
  --object-neutral-primary: var(--primitive-gray-900);  /* primary object / icon */
  --object-neutral-secondary: var(--primitive-gray-700);  /* secondary icon */
  --object-neutral-tertiary: var(--primitive-gray-500);  /* decorative icon */
  --object-neutral-quaternary: var(--primitive-gray-200);  /* component outline */
  --object-accent: var(--primitive-green-700);  /* accent object */
  --object-error: var(--primitive-red-700);  /* error object */
  --object-hot: var(--primitive-scarlet-500);  /* sale / badge object */
  --object-disabled: var(--primitive-gray-700-a40);  /* disabled object */
  --object-inverse: var(--primitive-white);  /* on dark background */

  /* ===== Semantic : Border ===== */
  --border-basic: var(--primitive-gray-200);  /* default divider */
  --border-neutral-strong: var(--primitive-gray-500);  /* strong divider */

  /* ===== Semantic : Overlay ===== */
  --overlay-basic: rgba(0, 0, 0, 0.4);  /* modal / dialog scrim */

  /* ===== Semantic : Service ===== */
  --service-reservation: #5b2a50;  /* reservation pages only */
}