/**
 * Famosa Store design tokens.
 * Brand values are intentionally centralized so the approved identity can be
 * refined before the storefront phase without rewriting components.
 */
:root {
  color-scheme: light;

  --color-brand-50: #fff0f6;
  --color-brand-100: #ffd8e8;
  --color-brand-200: #f8b4d0;
  --color-brand-300: #ed81ae;
  --color-brand-400: #dc4b8b;
  --color-brand-500: #c62572;
  --color-brand-600: #a9185e;
  --color-brand-700: #85154c;
  --color-brand-800: #64133b;
  --color-brand-900: #430d29;

  --color-plum-100: #eee2ec;
  --color-plum-300: #caa6c3;
  --color-plum-500: #8d557f;
  --color-plum-700: #5c3454;
  --color-plum-900: #321f30;

  --color-cream-50: #fffcfa;
  --color-cream-100: #fff8f4;
  --color-cream-200: #f8eee8;
  --color-cream-300: #eddcd2;
  --color-cocoa-500: #8b6d60;
  --color-cocoa-700: #5e473f;
  --color-cocoa-900: #2b1d27;

  --color-white: #ffffff;
  --color-black: #171116;
  --color-success: #237a57;
  --color-warning: #9a6411;
  --color-danger: #b4233d;
  --color-info: #276485;

  --surface-page: var(--color-cream-100);
  --surface-raised: var(--color-white);
  --surface-soft: var(--color-brand-50);
  --surface-strong: var(--color-plum-900);
  --surface-scrim: rgb(23 17 22 / 58%);
  --text-primary: var(--color-cocoa-900);
  --text-secondary: var(--color-cocoa-700);
  --text-muted: var(--color-cocoa-500);
  --text-inverse: var(--color-white);
  --border-subtle: var(--color-cream-300);
  --border-strong: var(--color-plum-300);
  --action-primary: var(--color-brand-600);
  --action-primary-hover: var(--color-brand-700);
  --action-primary-active: var(--color-brand-800);
  --action-disabled: #c9bfc4;
  --focus-ring: #176b8f;

  --font-sans: "Avenir Next", Avenir, Montserrat, "Segoe UI", sans-serif;
  --font-display: "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --font-mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  --font-size-xs: 0.75rem;
  --font-size-sm: 0.875rem;
  --font-size-md: 1rem;
  --font-size-lg: 1.125rem;
  --font-size-xl: clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem);
  --font-size-2xl: clamp(1.75rem, 1.45rem + 1.5vw, 2.5rem);
  --font-size-3xl: clamp(2.75rem, 2.1rem + 3.25vw, 5.5rem);
  --line-height-tight: 1.05;
  --line-height-heading: 1.15;
  --line-height-body: 1.6;
  --letter-spacing-tight: -0.035em;
  --letter-spacing-wide: 0.09em;

  --space-0: 0;
  --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;

  --radius-xs: 0.35rem;
  --radius-sm: 0.65rem;
  --radius-md: 1rem;
  --radius-lg: 1.5rem;
  --radius-xl: 2.25rem;
  --radius-pill: 999px;

  --shadow-xs: 0 1px 2px rgb(67 13 41 / 8%);
  --shadow-sm: 0 8px 24px rgb(67 13 41 / 10%);
  --shadow-md: 0 20px 50px rgb(67 13 41 / 14%);
  --shadow-lg: 0 30px 80px rgb(67 13 41 / 20%);

  --duration-fast: 140ms;
  --duration-normal: 240ms;
  --duration-slow: 420ms;
  --ease-standard: cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-emphasized: cubic-bezier(0.16, 1, 0.3, 1);

  --container-width: 75rem;
  --content-width: 44rem;
  --header-height: 4.5rem;
  --control-height: 3rem;
  --control-height-lg: 3.5rem;
  --z-header: 20;
  --z-overlay: 50;
  --z-toast: 70;

  /* Documentation/JS tokens. CSS media queries repeat these values because
     native custom properties cannot currently be used in media conditions. */
  --breakpoint-sm: 36rem;
  --breakpoint-md: 48rem;
  --breakpoint-lg: 64rem;
  --breakpoint-xl: 80rem;
}