/*
  Chronic Clicks design tokens.
  Source: Chronic Clicks Brand Foundation guideline (colors + type families).
  Font files are not yet supplied. Fallback stacks keep the site fully
  usable until the licensed brand font files are added to /assets/fonts.
  See docs/assets-needed.md for the exact files still required.
*/

:root {
  /* ---------- Brand colors ---------- */
  --color-ink: #141414;
  --color-gold: #d4a94c;
  --color-terracotta: #b5563c;
  --color-taupe: #706259;
  --color-gray-light: #e9e9e9;
  --color-cream: #f2ede4;

  /* ---------- Semantic color roles ---------- */
  --color-bg: var(--color-cream);
  --color-bg-alt: #ffffff;
  --color-bg-dark: var(--color-ink);
  --color-text: var(--color-ink);
  --color-text-muted: var(--color-taupe);
  --color-text-inverse: var(--color-cream);
  --color-text-inverse-muted: #c9c1b6;
  --color-border: var(--color-gray-light);
  --color-border-dark: #2a2a2a;
  --color-accent: var(--color-gold);
  /*
    Slightly darkened from the brand terracotta (--color-terracotta,
    #B5563C) so small text and button labels using this token meet
    WCAG AA (4.5:1) against cream/white backgrounds. The literal brand
    hex is preserved above for reference and for any non-text use.
  */
  --color-accent-strong: #a34d36;
  --color-accent-strong-hover: #9c4630;
  --color-focus-ring: var(--color-gold);

  /* ---------- Typography families ---------- */
  /* DM Serif Display: primary headlines */
  --font-display: "DM Serif Display", Georgia, "Times New Roman", Times, serif;
  /* Open Sauce: body copy and navigation */
  --font-body: "Open Sauce", -apple-system, BlinkMacSystemFont, "Segoe UI",
    Roboto, Helvetica, Arial, sans-serif;
  /* Archivo Black: short labels and strong display text */
  --font-label: "Archivo Black", "Arial Black", Impact, sans-serif;
  /* Lora: quotations and emotional copy */
  --font-quote: "Lora", Georgia, "Times New Roman", Times, serif;

  /* ---------- Type scale (fluid, mobile-first) ---------- */
  --text-xs: clamp(0.75rem, 0.72rem + 0.15vw, 0.8125rem);
  --text-sm: clamp(0.875rem, 0.84rem + 0.2vw, 0.9375rem);
  --text-base: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
  --text-md: clamp(1.125rem, 1.06rem + 0.3vw, 1.25rem);
  --text-lg: clamp(1.375rem, 1.25rem + 0.6vw, 1.75rem);
  --text-xl: clamp(1.75rem, 1.5rem + 1.2vw, 2.5rem);
  --text-2xl: clamp(2.25rem, 1.85rem + 2vw, 3.5rem);
  --text-3xl: clamp(2.75rem, 2.1rem + 3vw, 4.5rem);

  --leading-tight: 1.15;
  --leading-snug: 1.35;
  --leading-normal: 1.6;

  /* ---------- Spacing scale ---------- */
  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs: 0.75rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2.5rem;
  --space-xl: 4rem;
  --space-2xl: 6rem;
  --space-3xl: 8rem;

  /* ---------- Layout ---------- */
  --content-max-width: 1280px;
  --content-padding-inline: clamp(1.25rem, 4vw, 3rem);
  --radius-sm: 4px;
  --radius-md: 10px;
  --radius-lg: 20px;
  --radius-pill: 999px;

  /* ---------- Elevation ---------- */
  --shadow-sm: 0 1px 2px rgba(20, 20, 20, 0.06), 0 1px 1px rgba(20, 20, 20, 0.04);
  --shadow-md: 0 8px 24px rgba(20, 20, 20, 0.08);
  --shadow-lg: 0 20px 48px rgba(20, 20, 20, 0.14);

  /* ---------- Motion ---------- */
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --duration-fast: 150ms;
  --duration-base: 250ms;
  --duration-slow: 400ms;

  /* ---------- Tap targets ---------- */
  --tap-target-min: 44px;

  /* ---------- Z-index scale ---------- */
  --z-header: 100;
  --z-mobile-nav-backdrop: 190;
  --z-mobile-nav: 200;
  --z-skip-link: 300;
}

/*
  Breakpoints (documented for reference; plain CSS custom properties are
  not usable inside @media conditions, so these are applied as literal
  values in css/responsive.css):
  - mobile:  360px  (priority, this is the default/unprefixed styling)
  - tablet:  768px
  - laptop:  1024px
  - desktop: 1440px
*/

@media (prefers-contrast: more) {
  :root {
    --color-border: #b9b9b9;
    --color-text-muted: #4a423c;
  }
}