/**
 * Canevi UI — Design Tokens (single source of truth)
 * Scope: .canevi-ui / .canevi-home
 *
 * Rule: one role = one token. Components never hardcode colors, spaces, radii, or type sizes.
 * Hex/rgba appear ONLY in this file.
 */

.canevi-ui,
.canevi-home {
  /* —— Colors (official palette) —— */
  --brand: #c1608d;
  --brand-dark: #8e3d66;
  --brand-soft: #f3e0ea;

  --bg: #ffffff;
  --bg-soft: #f4f2f0;
  --surface: #ffffff;
  --surface-elevated: #ffffff;
  --nude: #efe6e0;

  --border: #e4ded9;
  --divider: var(--border);

  --text: #171717;
  --text-muted: #6d6865;
  --text-inverse: #ffffff;
  --placeholder: #9a948f;

  --success: #2e7d32;
  --warning: #b8860b;
  --danger: #c62828;
  --info: #1565c0;

  --overlay: rgba(23, 23, 23, 0.45);
  --overlay-soft: rgba(23, 23, 23, 0.3);
  --header-glass: rgba(255, 255, 255, 0.96);
  /*
   * Chrome surfaces:
   * --header-bg → fixed top/bottom safe-area + header + footer (stable on iOS 26)
   * --announce-bg → announcement bar only
   */
  --announce-bg: var(--brand-soft);
  --header-bg: var(--bg);
  --campaign-scrim-dark: linear-gradient(90deg, rgba(23, 23, 23, 0.62) 0%, rgba(23, 23, 23, 0.28) 48%, rgba(23, 23, 23, 0.08) 100%);
  --campaign-scrim-light: linear-gradient(90deg, rgba(255, 255, 255, 0.82) 0%, rgba(255, 255, 255, 0.45) 50%, rgba(255, 255, 255, 0.12) 100%);
  --campaign-text-on-dark: rgba(255, 255, 255, 0.9);
  --campaign-ghost-border: rgba(255, 255, 255, 0.45);
  --campaign-h-mobile: clamp(460px, 92vw, 620px);
  --campaign-h-tablet: clamp(500px, 58vw, 640px);
  --campaign-h-desk: clamp(560px, 58vw, 760px);
  --lift-sm: 2px;
  --campaign-commerce-overlap: var(--space-2xl);
  --campaign-control-inset: var(--space-2xl);
  --font-display-family: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --campaign-spring-a: #f7f2ea;
  --campaign-spring-b: #e8f0e6;
  --campaign-summer-a: #d9ecf5;
  --campaign-bf-a: #111111;
  --campaign-bf-b: #2a2a2a;
  --campaign-xmas-a: #14351f;
  --campaign-xmas-b: #1f4d2e;
  --campaign-neutral-a: #1a1a1a;
  --campaign-neutral-b: #333333;
  --opacity-overlay-strong: 1;
  --opacity-overlay-medium: 0.85;
  --opacity-overlay-soft: 0.55;

  --live: var(--brand);
  --promotion: var(--text);
  --stock: #9e9e9e;

  /* —— Typography family —— */
  --font-family: "Manrope", "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;

  /* —— Type scale —— */
  --font-display-xl: clamp(2.15rem, 5vw, 3.5rem);
  --font-display-l: clamp(1.75rem, 3.5vw, 2.5rem);
  --font-heading-xl: 1.45rem;
  --font-heading-l: 1.15rem;
  --font-heading-m: 1rem;
  --font-heading-s: 0.95rem;
  --font-body-l: 1.05rem;
  --font-body: 1rem;
  --font-body-small: 0.875rem;
  --font-caption: 0.8125rem;
  --font-overline: 0.7rem;
  --font-button: 0.72rem;
  --font-badge: 0.62rem;
  --font-micro: 0.65rem;
  --font-announce: 0.75rem;
  --font-nav: 0.75rem;
  --font-cat: 0.9rem;
  --font-price: var(--font-heading-s);
  --font-compact-title: var(--font-announce);
  --font-footer-note: 0.85rem;
  --font-live-title: clamp(1.15rem, 2.5vw, var(--font-heading-xl));
  --font-price-was: 0.8em;

  --line-tight: 1.2;
  --line-snug: 1.3;
  --line-body: 1.45;
  --line-relaxed: 1.55;

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  --tracking-tight: -0.01em;
  --tracking-normal: 0;
  --tracking-cta: 0.04em;
  --tracking-wide: 0.06em;
  --tracking-wider: 0.1em;
  --tracking-widest: 0.12em;

  /* —— Spacing scale (official) —— */
  --space-xs: 0.25rem;   /* 4px */
  --space-sm: 0.5rem;    /* 8px */
  --space-md: 0.75rem;   /* 12px */
  --space-lg: 1rem;      /* 16px */
  --space-xl: 1.25rem;   /* 20px */
  --space-2xl: 1.75rem;  /* 28px */
  --space-3xl: 2.5rem;   /* 40px */

  /* Micro steps used by dense commerce UI (still tokens — never literal in components) */
  --space-2xs: 0.1rem;
  --space-3xs: 0.15rem;
  --space-xs-plus: 0.22rem;
  --space-sm-minus: 0.3rem;
  --space-sm-plus: 0.35rem;
  --space-md-minus: 0.4rem;
  --space-md-tight: 0.45rem;
  --space-md-plus: 0.55rem;
  --space-lg-minus: 0.65rem;
  --space-lg-tight: 0.7rem;
  --space-lg-plus: 0.8rem;
  --space-xl-minus: 0.85rem;
  --space-xl-tight: 0.9rem;
  --space-xl-plus: 1.1rem;
  --space-2xl-tight: 1.2rem;
  --space-btn-x: 1.25rem;

  /* Legacy numeric aliases */
  --space-1: var(--space-xs);
  --space-2: var(--space-sm);
  --space-3: var(--space-md);
  --space-4: var(--space-lg);
  --space-5: var(--space-xl);
  --space-6: var(--space-2xl);
  --space-7: var(--space-3xl);

  /* —— Borders —— */
  --border-width: 1px;
  --border-width-strong: 2px;

  /* —— Radius —— */
  --radius-sm: 4px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-pill: 999px;
  --radius-circle: 50%;

  /* —— Shadows —— */
  --shadow-none: none;
  --shadow-focus: 0 0 0 1px var(--brand-dark);
  --shadow-elevated: 0 8px 24px rgba(23, 23, 23, 0.08);

  /* —— Opacity —— */
  --opacity-disabled: 0.45;
  --opacity-placeholder: 0.35;
  --opacity-pulse: 0.4;
  --opacity-muted: 0.8;
  --opacity-hover: 0.92;

  /* —— Z-index —— */
  --z-base: 1;
  --z-sticky: 40;
  --z-drawer-backdrop: 60;
  --z-drawer: 70;
  --z-overlay: 80;
  --z-toast: 90;

  /* —— Breakpoints (document literals in @media; keep in sync) —— */
  --bp-sm: 520px;
  --bp-md: 700px;
  --bp-lg: 900px;
  --bp-xl: 1100px;
  --bp-admin-bar: 782px;

  /* —— Motion —— */
  --motion-fast: 120ms;
  --motion-normal: 160ms;
  --motion-slow: 280ms;
  --motion-live: 1.8s;
  --ease-standard: ease;
  --ease-out: ease-out;
  --transition: var(--motion-normal) var(--ease-standard);
  --transition-fast: var(--motion-fast) var(--ease-standard);
  --transition-slow: var(--motion-slow) var(--ease-standard);
  --transition-hover: var(--transition);
  --transition-focus: var(--transition);
  --transition-overlay: var(--transition);
  --transition-drawer: var(--transition-slow);

  /* —— Layout —— */
  --container: 1440px;
  --container-pad: var(--space-xl);
  --container-pad-lg: var(--space-2xl);
  --header-h: 64px;
  --icon-btn-size: 42px;
  --control-h: 44px;
  --control-h-lg: 52px;
  --control-h-sm: 40px;
  --logo-h: 38.4px; /* 80% of 48px */
  --logo-h-lg: 44.8px; /* 80% of 56px */
  --logo-h-footer: 24px; /* 60% of 40px */
  --logo-max-w: 160px; /* 80% of 200px */
  --logo-max-w-lg: 176px; /* 80% of 220px */
  --cat-min-h: 72px;
  --cat-col-min: 132px;
  --cat-col-vw: 42vw;
  --collection-min-h: 88px;
  --announce-h: 36px;
  --cart-badge-size: 18px;
  --cart-badge-offset-y: 4px;
  --cart-badge-offset-x: 2px;
  --live-dot: 6px;
  --focus-ring: 2px;
  --scrollbar-h: 4px;
  --drawer-w: min(86vw, 320px);
  --overlay-slide-y: 8px;
  --header-blur: 8px;
  --admin-bar-h: 32px;
  --admin-bar-h-mobile: 46px;
  --card-title-min-h: calc(1em * var(--line-snug) * 2);
  --card-aspect: 3 / 4;
  --sr-clip: 1px;

  /* —— Semantic badge tokens —— */
  --badge-live-bg: var(--live);
  --badge-live-fg: var(--text-inverse);
  --badge-novo-bg: var(--brand-soft);
  --badge-novo-fg: var(--brand-dark);
  --badge-promo-bg: var(--brand);
  --badge-promo-fg: var(--text-inverse);
  --badge-soldout-bg: #d4d0cd;
  --badge-soldout-fg: #5c5855;
  --badge-lowstock-bg: var(--warning);
  --badge-lowstock-fg: var(--text-inverse);

  /* —— Icons —— */
  --icon-stroke: 1.5;
  --icon-size-sm: 18px;
  --icon-size-md: 20px;
  --icon-size-lg: 22px;
}