/* ==========================================================================
   LIGHT HOUSE — Design Tokens
   Three-layer architecture: Primitive -> Semantic -> Component
   ========================================================================== */

:root {
  /* ---------- Primitive: Color ---------- */
  --red-50:  #FDECEC;
  --red-100: #FBD4D3;
  --red-300: #F08B89;
  --red-500: #E2231B;   /* brand red, from logo */
  --red-600: #C81E17;
  --red-700: #A8160F;
  --red-900: #6E0E09;

  --gray-0:   #FFFFFF;
  --gray-50:  #FAFAFA;
  --gray-100: #F2F2F2;
  --gray-200: #E4E4E4;
  --gray-300: #CFCFCF;
  --gray-500: #8A8A8A;
  --gray-700: #4A4A4A;
  --gray-800: #2A2A2A;
  --gray-900: #161616;

  --gold-400: #FFC93C;
  --gold-500: #F4B400;

  --green-500: #1E9E5C;

  /* ---------- Primitive: Typography ---------- */
  --font-display: "Poppins", "Segoe UI", system-ui, sans-serif;
  --font-body: "Inter", "Segoe UI", system-ui, sans-serif;

  --fs-2xs: 0.6875rem;  /* 11px */
  --fs-xs:  0.75rem;    /* 12px */
  --fs-sm:  0.875rem;   /* 14px */
  --fs-base: 1rem;      /* 16px */
  --fs-lg:  1.125rem;   /* 18px */
  --fs-xl:  1.375rem;   /* 22px */
  --fs-2xl: 1.75rem;    /* 28px */
  --fs-3xl: 2.25rem;    /* 36px */
  --fs-4xl: 3rem;       /* 48px */

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-extrabold: 800;

  --lh-tight: 1.15;
  --lh-normal: 1.5;
  --lh-relaxed: 1.7;

  /* ---------- Primitive: Spacing ---------- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;

  /* ---------- Primitive: Radius ---------- */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-full: 999px;

  /* ---------- Primitive: Shadow ---------- */
  --shadow-sm: 0 1px 2px rgba(22, 22, 22, 0.06);
  --shadow-md: 0 6px 16px rgba(22, 22, 22, 0.08);
  --shadow-lg: 0 16px 40px rgba(22, 22, 22, 0.14);
  --shadow-red: 0 10px 30px rgba(226, 35, 27, 0.28);

  /* ---------- Primitive: Motion ---------- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --duration-fast: 150ms;
  --duration-base: 250ms;
  --duration-slow: 400ms;

  /* ---------- Primitive: Z-index ---------- */
  --z-header: 100;
  --z-drawer: 200;
  --z-modal: 300;
  --z-toast: 400;

  /* ======================================================================
     SEMANTIC TOKENS — purpose aliases
     ====================================================================== */
  --color-primary: var(--red-500);
  --color-primary-hover: var(--red-600);
  --color-primary-active: var(--red-700);
  --color-primary-subtle: var(--red-50);
  --color-primary-border: var(--red-300);

  --color-accent: var(--gold-500);
  --color-success: var(--green-500);

  --color-bg: var(--gray-0);
  --color-bg-muted: var(--gray-50);
  --color-bg-inverse: var(--gray-900);
  --color-bg-overlay: rgba(22, 22, 22, 0.55);

  --color-surface: var(--gray-0);
  --color-surface-muted: var(--gray-100);

  --color-border: var(--gray-200);
  --color-border-strong: var(--gray-300);

  --color-text: var(--gray-900);
  --color-text-muted: var(--gray-700);
  --color-text-subtle: var(--gray-500);
  --color-text-inverse: var(--gray-0);
  --color-text-on-primary: var(--gray-0);

  --color-focus-ring: var(--red-500);

  --radius-card: var(--radius-lg);
  --radius-control: var(--radius-md);
  --radius-pill: var(--radius-full);

  --shadow-card: var(--shadow-sm);
  --shadow-card-hover: var(--shadow-md);
  --shadow-elevated: var(--shadow-lg);

  /* ======================================================================
     COMPONENT TOKENS
     ====================================================================== */

  /* Buttons */
  --button-primary-bg: var(--color-primary);
  --button-primary-bg-hover: var(--color-primary-hover);
  --button-primary-bg-active: var(--color-primary-active);
  --button-primary-text: var(--color-text-on-primary);
  --button-primary-shadow: var(--shadow-red);

  --button-secondary-bg: transparent;
  --button-secondary-text: var(--color-text);
  --button-secondary-border: var(--color-border-strong);
  --button-secondary-bg-hover: var(--color-surface-muted);

  --button-ghost-text: var(--color-primary);
  --button-ghost-bg-hover: var(--color-primary-subtle);

  --button-radius: var(--radius-pill);
  --button-padding-y: 0.75rem;
  --button-padding-x: 1.5rem;
  --button-font-weight: var(--fw-semibold);

  /* Cards */
  --card-bg: var(--color-surface);
  --card-border: var(--color-border);
  --card-radius: var(--radius-card);
  --card-shadow: var(--shadow-card);
  --card-shadow-hover: var(--shadow-card-hover);
  --card-padding: var(--space-4);

  /* Inputs */
  --input-bg: var(--color-surface);
  --input-border: var(--color-border-strong);
  --input-border-focus: var(--color-primary);
  --input-radius: var(--radius-control);
  --input-text: var(--color-text);
  --input-placeholder: var(--color-text-subtle);

  /* Header */
  --header-bg: var(--color-bg);
  --header-border: var(--color-border);
  --header-height: 76px;

  /* Badge */
  --badge-bg: var(--color-primary);
  --badge-text: var(--color-text-on-primary);
  --badge-sale-bg: var(--gold-500);
  --badge-sale-text: var(--gray-900);

  /* Cart */
  --cart-drawer-bg: var(--color-surface);
  --cart-drawer-width: min(420px, 100vw);
  --cart-badge-bg: var(--color-primary);

  /* Toast */
  --toast-bg: var(--gray-900);
  --toast-text: var(--color-text-inverse);
}