/* ===========================================
   tokens.css — Unified Design Token System
   Single source of truth for all CSS custom
   properties across public, portal, and admin.
   Import this first on every page.
   =========================================== */

:root {
  /* ── COLORS ─────────────────────────────── */

  /* Brand core */
  --color-cream: #fdf8f3;
  --color-cream-dark: #f5ede4;
  --color-warm-white: #fefcfa;
  --color-burgundy: #722f37;
  --color-burgundy-light: #8b3a44;
  --color-burgundy-dark: #5c252c;

  /* Single canonical gold — resolves BRAND-1.
     Was #c9a962 on public pages, #d4af37 on admin/portal.
     Unified to #d4af37 (higher chroma, used on 2 of 3 surfaces). */
  --color-gold: #d4af37;
  --color-gold-light: #f0e6c8;

  --color-rose: #c4a484;
  --color-sage: #9caf88;
  --color-charcoal: #3d3630;

  /* WCAG AA-safe neutral text (5.45:1 on --color-cream) — fixes A11Y-1.
     Replaces #9e9890 (2.71:1 on cream, used 126× in admin.css).        */
  --color-soft-gray: #6b655d;

  /* Semantic status — for backgrounds, borders, icons */
  --color-success: #4caf50;
  --color-warning: #ff9800;
  --color-danger: #f44336;
  --color-info: #2196f3;

  /* Semantic status — WCAG AA text on light backgrounds (≥4.5:1) — A11Y-3.
     Use these tokens for any colored foreground text.                   */
  --color-success-text: #2e7d32; /* 7.1:1 on white */
  --color-warning-text: #92400e; /* 7.1:1 on white */
  --color-danger-text: #c62828; /* 5.6:1 on white */
  --color-info-text: #1565c0; /* 7.1:1 on white */
  --color-gold-text: #7c5f12; /* 5.7:1 on --color-cream */

  /* ── LEGACY ALIASES ────────────────────────
     Resolves BRAND-2: styles.css references --soft-gray and --gold
     which are undefined in that file. These aliases ensure they resolve
     when tokens.css is imported first on every page.                   */
  --burgundy: var(--color-burgundy);
  --burgundy-light: var(--color-burgundy-light);
  --burgundy-dark: var(--color-burgundy-dark);
  --cream: var(--color-cream);
  --warm-white: var(--color-warm-white);
  --gold: var(--color-gold);
  --gold-light: var(--color-gold-light);
  --charcoal: var(--color-charcoal);
  --soft-gray: var(--color-soft-gray);
  --success: var(--color-success);
  --warning: var(--color-warning);
  --danger: var(--color-danger);
  --info: var(--color-info);

  /* Public-site color aliases (styles.css naming convention) */
  --color-text: var(--color-charcoal);
  --color-text-light: #5d5650;
  --color-white: #ffffff;
  --color-rose-light: #d4b896;
  --color-rose-dark: #a68b6a;

  /* ── TYPOGRAPHY ─────────────────────────────
     BRAND-5: To activate self-hosted fonts, place woff2 files in
     public/fonts/ and uncomment the @font-face blocks below.
     Fraunces (display serif): https://github.com/undercasetype/Fraunces
     Inter (body sans):        https://github.com/rsms/inter              */
  --font-heading:
    "Fraunces", Georgia, "Palatino Linotype", "Book Antiqua", Palatino, serif;
  --font-body:
    "Inter", "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto,
    "Helvetica Neue", Arial, sans-serif;

  /* Fluid type scale — clamp(min-size, preferred, max-size) */
  --text-xs: clamp(0.75rem, 1.5vw, 0.875rem);
  --text-sm: clamp(0.875rem, 1.75vw, 1rem);
  --text-base: clamp(1rem, 2vw, 1.125rem);
  --text-lg: clamp(1.125rem, 2.5vw, 1.375rem);
  --text-xl: clamp(1.375rem, 3vw, 1.75rem);
  --text-2xl: clamp(1.75rem, 4vw, 2.25rem);
  --text-3xl: clamp(2.25rem, 5vw, 3rem);

  /* ── SPACING ─────────────────────────────── */
  --spacing-xs: 0.5rem;
  --spacing-sm: 1rem;
  --spacing-md: 1.5rem;
  --spacing-lg: 2rem;
  --spacing-xl: 3rem;
  --spacing-xxl: 5rem;

  /* ── BORDERS ─────────────────────────────── */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-full: 50%;

  /* ── SHADOWS ─────────────────────────────── */
  --shadow-soft: 0 4px 20px rgba(114, 47, 55, 0.08);
  --shadow-medium: 0 8px 30px rgba(114, 47, 55, 0.12);
  --shadow-strong: 0 12px 40px rgba(114, 47, 55, 0.16);

  /* ── MOTION ──────────────────────────────── */
  --ease-breath: cubic-bezier(0.45, 0.05, 0.55, 0.95);
  --ease-reveal: cubic-bezier(0.4, 0, 0.2, 1);
  --transition-fast: 0.2s ease;
  --transition-medium: 0.3s ease;
  --transition-slow: 0.5s ease;
}

/* Self-hosted variable fonts (OFL-licensed; copied from @fontsource-variable/* by scripts/copy-fonts.mjs) */
@font-face {
  font-family: "Fraunces";
  src: url("fonts/fraunces-variable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("fonts/inter-variable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* ── REDUCED MOTION ──────────────────────────────────────────────────────
   A11Y-2: declared here so every surface picks it up before any
   surface-specific animation or transition is defined.                   */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ── SKIP LINK ────────────────────────────────────────────────────────────
   A11Y-4: shared across all pages; each surface CSS may override.
   Visible only on keyboard focus — positioned above the viewport at rest. */
.skip-link {
  position: absolute;
  top: -100px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--color-burgundy);
  color: #ffffff;
  padding: var(--spacing-sm) var(--spacing-lg);
  border-radius: var(--radius-md);
  z-index: 100000;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: top var(--transition-fast);
}
.skip-link:focus {
  top: 1rem;
  outline: 3px solid var(--color-gold);
  outline-offset: 2px;
}