/* variables.css — Design Tokens */

:root {
  /* Colors — 4 only */
  --color-primary: #115E59;
  /* Deep Cyan */
  --color-accent: #9E9E9E;
  /* Cool Gray */
  --color-bg-main: #FFFFFF;
  /* White */
  --color-bg-alt: #F0EBE3;
  /* Empire Beige */

  /* Additional permitted utility colors */
  --color-line: #06C755;
  /* LINE Green */
  --color-white: #FFFFFF;
  --color-star: #F59E0B;
  /* Reviews star color */

  /* Typography — Kanit only */
  --font-family: 'Kanit', system-ui, -apple-system, sans-serif;
  --font-light: 300;
  --font-regular: 400;
  --font-medium: 500;
  --font-semibold: 600;
  /* MAX weight — never use 700 */

  /* Typography scale map to old vars */
  --font-heading: var(--font-family);
  --font-body-th: var(--font-family);
  --font-body-en: var(--font-family);

  --font-size-base: 18px;
  --line-height-body: 1.6;
  --line-height-heading: 1.3;

  /* Spacing (8px base grid) */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 48px;
  --space-3xl: 64px;
  --space-4xl: 96px;

  /* Layout */
  --container-max: 1200px;
  --container-padding: 16px;
  --section-padding-y: var(--space-3xl);

  /* Radius — new v2 system */
  --radius-card: 12px;
  --radius-card-lg: 16px;
  --radius-cta: 24px;
  /* pill buttons 20–28px */

  /* Legacy radius mappings removed due to cyclic reference */

  /* Shadows — minimal only */
  --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.08);

  /* Transitions */
  --transition-base: 200ms ease;
  --transition-slow: 600ms ease-out;

  /* Z-index scale */
  --z-base: 1;
  --z-nav: 100;
  --z-line-button: 150;
  --z-hamburger-overlay: 200;
  --z-cookie-banner: 300;

  /* ── Mockup v2 Aliases ──────────────────── */
  --primary: var(--color-primary);
  --accent: var(--color-accent);
  --bg-main: var(--color-bg-main);
  --bg-alt: var(--color-bg-alt);
  --line-green: var(--color-line);
  --font: var(--font-family);
  --light: var(--font-light);
  --regular: var(--font-regular);
  --medium: var(--font-medium);
  --semibold: var(--font-semibold);
  --shadow: var(--shadow-card);
  --radius: var(--radius-card);
  --radius-lg: var(--radius-card-lg);
  --radius-pill: var(--radius-cta);
}

/* Tablet breakpoint */
@media (min-width: 768px) {
  :root {
    --container-padding: 24px;
    --section-padding-y: var(--space-4xl);
  }
}

/* Desktop breakpoint */
@media (min-width: 1024px) {
  :root {
    --container-padding: 32px;
  }
}