/* ==========================================================================
   Bemoria — Design Tokens
   Design language: confident regular-weight grotesk, pill controls, flat
   surfaces, rounded section seams, no shadows. Re-interpreted with the
   Bemoria palette: Navy #000A3A · Gold #C59F5D · Cream #FBF5E6 (dominant).
   ========================================================================== */

:root {
  /* Brand colors */
  --color-navy: #000a3a;          /* primary ink, filled CTAs, dark bands */
  --color-gold: #c59f5d;          /* accent: badges, dots, small emphasis */
  --color-cream: #fbf5e6;         /* page canvas — the dominant surface */

  /* Derived tints (stay inside the palette) */
  --color-cream-deep: #f4ead3;    /* secondary surface / panels */
  --color-sand: #e8dbbd;          /* image placeholders, muted panels */
  --color-gold-soft: #ecdcb9;     /* soft gold wash behind small elements */
  --color-gold-ink: #8a6a2f;      /* gold text on cream (AA contrast) */
  --color-navy-raised: #0c1749;   /* cards on navy bands */
  --color-navy-80: rgba(0, 10, 58, 0.8);
  --color-navy-64: rgba(0, 10, 58, 0.66);
  --color-navy-40: rgba(0, 10, 58, 0.4);
  --color-navy-14: rgba(0, 10, 58, 0.14);
  --color-navy-06: rgba(0, 10, 58, 0.06);
  --color-cream-72: rgba(251, 245, 230, 0.74);
  --color-cream-48: rgba(251, 245, 230, 0.5);
  --color-cream-20: rgba(251, 245, 230, 0.2);
  --color-cream-12: rgba(251, 245, 230, 0.12);

  /* Semantic roles */
  --text-primary: var(--color-navy);
  --text-secondary: var(--color-navy-64);
  --text-inverse: var(--color-cream);
  --text-inverse-secondary: var(--color-cream-72);
  --surface-canvas: var(--color-cream);
  --surface-raised: var(--color-cream-deep);
  --surface-dark: var(--color-navy);
  --border-subtle: var(--color-navy-14);

  /* Typography */
  --font-sans: "Inter Tight", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  --text-label: 12px;
  --text-caption: 14px;
  --text-body-sm: 16px;
  --text-body: 18px;
  --text-subheading: clamp(20px, 1.8vw, 24px);
  --text-heading: clamp(26px, 2.6vw, 34px);
  --text-display: clamp(32px, 3.5vw, 48px);
  --text-hero: clamp(40px, 4.4vw, 62px);

  --tracking-tight: -0.022em;
  --tracking-display: -0.016em;
  --tracking-body: 0em;
  --tracking-label: 0.06em;

  --weight-regular: 400;
  --weight-medium: 500;

  /* Spacing (8px base) */
  --space-4: 4px;
  --space-8: 8px;
  --space-12: 12px;
  --space-16: 16px;
  --space-24: 24px;
  --space-32: 32px;
  --space-40: 40px;
  --space-48: 48px;
  --space-64: 64px;
  --space-80: 80px;
  --space-96: 96px;
  --space-128: 128px;

  /* Layout */
  --page-max-width: 1200px;
  --page-gutter: 24px;
  --hero-gutter: clamp(24px, 7vw, 120px);
  --section-pad: clamp(72px, 9vw, 120px);
  --nav-height: 72px;

  /* Radii */
  --radius-input: 8px;
  --radius-card: 16px;
  --radius-card-lg: 32px;
  --radius-seam: clamp(20px, 3vw, 40px);  /* rounded section joins */
  --radius-pill: 1000px;

  /* Motion */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --duration-fast: 180ms;
  --duration: 360ms;
  --duration-slow: 900ms;

  --border-width: 1.5px;
}

@media (max-width: 720px) {
  :root {
    --page-gutter: 16px;
    --nav-height: 64px;
  }
}