/* ========================================
   DESIGN TOKENS
   LLTF.Store — Pure CSS Variables
   ======================================== */

:root {
  /* ── Colors: Primary (60/30/9/1 system) ── */
  --color-charcoal: #2D2D2D;
  --color-charcoal-light: #3D3D3D;
  --color-cream: #F5F0E8;
  --color-cream-dark: #E8E2D8;
  --color-dusty-rose: #D4A5A5;
  --color-dusty-rose-light: #E2BFBF;
  /* Text-safe brand variants for light (cream/white) surfaces: the base
     dusty-rose / terracotta stay for dark-surface accents and decorative fills. */
  --color-dusty-rose-strong: #8A5555;
  --color-terracotta: #C1725B;
  --color-terracotta-dark: #A85F4A;
  --color-terracotta-strong: #A8503A;

  /* ── Colors: Neutrals ── */
  --color-white: #FEFEFE;
  --color-gray-100: #F8F7F5;
  --color-gray-200: #E5E3DF;
  --color-gray-300: #D0CCC5;
  --color-gray-600: #6B6B6B;
  --color-gray-800: #404040;

  /* ── Colors: Status ── */
  --color-success: #6B8E6B;
  /* The green of a good thing, written dark enough to read as words on cream or white. The base
     #6B8E6B is the calm half of the pair and stays for dots, tints and marks — a shape only needs
     three to one against its background, a line of text needs four and a half. */
  --color-success-strong: #47704B;
  --color-warning: #D4A55A;
  --color-info: #6B8E9F;
  --color-error: #A8503A;

  /* ── Typography ── */
  --font-display: 'Cormorant Garamond', Georgia, serif;
  --font-body: 'Outfit', -apple-system, sans-serif;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --line-height-tight: 1.2;
  --line-height-normal: 1.6;
  --line-height-relaxed: 1.7;
  --line-height-loose: 1.8;

  /* ── Spacing ── */
  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2.5rem;
  --space-xl: 4rem;
  --space-2xl: 6rem;

  /* ── Transitions ── */
  --transition-fast: 0.2s ease;
  --transition-smooth: 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --transition-slow: 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);

  /* ── Layout ── */
  /* --header-height is re-measured by navigation.js (HeaderMetrics) on load,
     resize and announcement dismissal; this default only covers the first
     paint to avoid a layout jump. */
  --header-height: 156px;
  --container-max: 1400px;
  --content-max: 800px;

  /* ── Border Radius ── */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-2xl: 20px;
  --radius-pill: 100px;

  /* ── Shadows ── */
  --shadow-light: 0 2px 8px rgba(0, 0, 0, 0.05);
  --shadow-sm: 0 4px 20px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 15px 40px rgba(0, 0, 0, 0.06);
  --shadow-card: 0 20px 40px rgba(0, 0, 0, 0.08);
  --shadow-float: 0 20px 60px rgba(0, 0, 0, 0.15);
  --shadow-modal: 0 20px 60px rgba(0, 0, 0, 0.3);
  --shadow-dropdown: 0 10px 40px rgba(0, 0, 0, 0.15);
  --shadow-btn: 0 4px 15px rgba(0, 0, 0, 0.1);
  --shadow-btn-hover: 0 6px 20px rgba(0, 0, 0, 0.15);
  --shadow-hover: 0 10px 30px rgba(0, 0, 0, 0.05);
  --shadow-card-hover: 0 4px 12px rgba(0, 0, 0, 0.06);

  /* ── Z-Index ── */
  --z-header: 1000;
  --z-mobile-nav: 2000;
  --z-modal: 3000;

  /* ── Border ── */
  --border-width: 1px;
  --border-width-focus: 2px;

  /* ── Aspect Ratios ── */
  --aspect-square: 1;
  --aspect-portrait: 4 / 3;
  --aspect-hero: 4 / 5;
  --aspect-team: 3 / 4;

  /* ── Opacity ── */
  --opacity-pattern: 0.04;
  --opacity-bg-subtle: 0.05;
  --opacity-bg-soft: 0.1;
  --opacity-bg-ghost: 0.15;
  --opacity-bg-overlay: 0.7;
  --opacity-text-muted: 0.8;
  --opacity-text-dim: 0.85;
  --opacity-icon: 0.3;
  --opacity-icon-soft: 0.4;
  --opacity-icon-muted: 0.5;
  --opacity-icon-faint: 0.6;
  --opacity-disabled: 0.4;
  --opacity-disabled-strong: 0.5;
  --opacity-button-disabled: 0.7;

  /* ── Line Heights ── */
  --line-height-tight-label: 1.4;

  /* ── Letter Spacing ── */
  --letter-spacing-xs: 0.05em;
  --letter-spacing-sm: 0.1em;
  --letter-spacing-md: 0.12em;
  --letter-spacing-lg: 0.15em;
  --letter-spacing-badge: 0.5px;

  /* ── Gradients ── */
  /* A bed for a product photograph: lighter than the cream the page is written on and warmer than
     white, so a photo sits on a surface instead of bleeding into the card behind it. */
  --color-canvas: #FBFAF8;
  --color-canvas-deep: #F1EDE7;
  --gradient-canvas: linear-gradient(160deg, var(--color-canvas) 0%, var(--color-canvas-deep) 100%);
  --gradient-cream: linear-gradient(135deg, var(--color-cream) 0%, var(--color-cream-dark) 100%);
  --gradient-charcoal: linear-gradient(135deg, var(--color-charcoal-light) 0%, var(--color-gray-800) 100%);
  --gradient-hero-bg:
    radial-gradient(ellipse 80% 50% at 20% 40%, var(--color-dusty-rose) 0%, transparent 50%),
    radial-gradient(ellipse 60% 40% at 80% 60%, var(--color-terracotta) 0%, transparent 50%);
  --gradient-category-bg:
    radial-gradient(ellipse 70% 70% at 70% 50%, var(--color-dusty-rose) 0%, transparent 60%);
  --gradient-story-bg:
    radial-gradient(ellipse 60% 60% at 80% 50%, var(--color-dusty-rose) 0%, transparent 60%);
  --gradient-about-bg:
    radial-gradient(ellipse 60% 60% at 30% 50%, var(--color-dusty-rose) 0%, transparent 60%);

  /* ── Focus Ring ── */
  --focus-ring: 0 0 0 3px rgba(212, 165, 165, 0.15);
  --focus-ring-strong: 0 0 0 4px rgba(212, 165, 165, 0.1);
  --focus-ring-outline: 0 0 0 3px rgba(212, 165, 165, 0.3);

  /* ── Breakpoints (CSS variables for non-media-query use) ──
     NOTE: CSS var() cannot be used inside @media rules.
     Media queries in component files use hardcoded values. */
  --bp-tablet: 1024px;
  --bp-mobile: 768px;
  --bp-small: 480px;
}