/*
 * Design tokens. Warm graphite, cognac leather, no neon and no remote fonts.
 * Breakpoint custom properties are a reference list. @media cannot read them;
 * responsive.css repeats the same widths.
 */

:root {
  --color-bg: #11100f;
  --color-bg-soft: #171513;
  --color-surface: #1d1a17;
  --color-surface-light: #25211d;
  --color-text: #f5f2ed;
  /* 7.6:1 on --color-bg, 6.9:1 on --color-surface. Body AA holds. */
  --color-text-muted: #aaa39b;
  --color-leather: #a96f45;
  --color-leather-light: #c58a5d;
  --color-leather-dark: #74472c;
  --color-border: rgba(255, 255, 255, 0.09);
  /* Slightly lighter leather, not neon gold. */
  --color-border-hover: rgba(197, 138, 93, 0.5);
  --color-focus: var(--color-leather-light);
  /* Flat veil. The photograph stays readable. */
  --color-overlay: rgba(17, 16, 15, 0.34);
  /* #f5f2ed on #a96f45 is 3.73:1. These two stay in the cognac family and clear 4.5:1. */
  --color-btn-primary: #8c5c39;
  --color-btn-primary-hover: #94623e;
  --color-ua-blue: #0057b7;
  --color-ua-yellow: #ffd700;

  --font-primary: Manrope, Inter, "Segoe UI", system-ui, sans-serif;
  --font-display: Manrope, Inter, "Segoe UI", system-ui, sans-serif;

  --fs-xs: 0.75rem;
  --fs-sm: 0.875rem;
  --fs-base: 1rem;
  --fs-lg: 1.125rem;
  --fs-xl: clamp(1.125rem, 1.02rem + 0.3vw, 1.5rem);
  --fs-2xl: clamp(1.375rem, 1.15rem + 0.5vw, 1.875rem);
  --fs-3xl: clamp(1.5rem, 1.05rem + 1vw, 2.25rem);
  --fs-4xl: clamp(1.75rem, 1.15rem + 1.5vw, 3rem);
  /* Floor 32px. About 56px at 1280. Caps at 72px from roughly 1860px through 3840. */
  --fs-hero: clamp(2rem, 1.25rem + 2.8vw, 4.5rem);
  --h1-size: var(--fs-hero);

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-heading: 600;

  --lh-body: 1.65;
  --lh-heading: 1.2;
  --lh-hero: 1.12;

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 2.5rem;
  --space-8: 3rem;
  --space-9: 4rem;
  --space-10: 5rem;
  --space-11: 6.5rem;
  --space-12: 8rem;

  --radius-sm: 8px;
  --radius-md: 10px;
  --radius-lg: 12px;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35);
  --shadow-md: 0 8px 20px rgba(0, 0, 0, 0.28);
  --shadow-lg: 0 14px 32px rgba(0, 0, 0, 0.34);

  --duration-fast: 200ms;
  --duration: 250ms;
  --duration-slow: 300ms;
  --ease: cubic-bezier(0.2, 0, 0, 1);
  --lift: -2px;
  --lift-card: -3px;

  --outline-width: 2px;
  --outline-offset: 3px;

  --container-max: 1280px;
  --container-wide-max: 1560px;
  --container-padding: 1rem;

  --section-y: clamp(2.5rem, 1.75rem + 2vw, 4.5rem);
  --section-y-sm: clamp(1.5rem, 1rem + 1.2vw, 2.75rem);
  --section-y-lg: clamp(3.25rem, 2rem + 2.8vw, 6rem);

  --bp-360: 360px;
  --bp-390: 390px;
  --bp-430: 430px;
  --bp-768: 768px;
  --bp-1024: 1024px;
  --bp-1366: 1366px;
  --bp-1440: 1440px;
  --bp-1920: 1920px;
  --bp-2560: 2560px;
  --bp-3840: 3840px;
}