/* ==========================================================================
   Redeeming Love Outreach Ministries — Design Tokens
   Phase One engineering handoff. Framework-independent CSS custom properties.

   These are the single source of truth for brand color, type, radius,
   shadow and motion. In Oqtane, load this file from the theme so every
   module inherits the same values. Never hardcode hex or px values in
   component markup.
   ========================================================================== */

:root {
  /* ---- Brand palette ---- */
  --color-plum: #1e0b26;         /* deepest brand tone: headers, dark sections */
  --color-purple: #5b2a8c;       /* primary action color */
  --color-purple-soft: #7a3f9d;  /* hover / focus ring */
  --color-lilac: #f7f4f9;        /* light section background */
  --color-gold: #d4af37;         /* accent, focus outline, dividers */
  --color-gold-light: #f5eac8;   /* accent surface / notice background */
  --color-cream: #fff9ef;        /* warm alternate section background */
  --color-ink: #1e1a22;          /* body text */

  /* ---- Semantic surface roles ---- */
  --background: #ffffff;
  --foreground: #1e1a22;
  --card: #ffffff;
  --card-foreground: #1e1a22;
  --primary: #5b2a8c;
  --primary-foreground: #ffffff;
  --secondary: #f7f4f9;
  --secondary-foreground: #1e0b26;
  --muted: #f7f4f9;
  --muted-foreground: #5f5668;
  --accent: #d4af37;
  --accent-foreground: #1e0b26;
  --border: #e9e3ee;
  --input: #ded6e5;
  --ring: #7a3f9d;

  /* ---- Typography families (Google Fonts) ---- */
  --font-display: "DM Sans", ui-sans-serif, system-ui, sans-serif;
  --font-serif: "Fraunces", ui-serif, Georgia, serif;
  --font-body: "Source Sans 3", ui-sans-serif, system-ui, sans-serif;

  /* ---- Fluid type scale (clamp: min, preferred, max) ---- */
  --text-hero: clamp(2.75rem, 1.6rem + 5.2vw, 6rem);
  --text-hero-line-height: 0.98;
  --text-hero-letter-spacing: -0.03em;
  --text-display: clamp(2rem, 1.2rem + 3.2vw, 3.75rem);
  --text-display-line-height: 1.05;
  --text-display-letter-spacing: -0.025em;
  --text-title: clamp(1.5rem, 1.1rem + 1.4vw, 2.25rem);
  --text-title-line-height: 1.15;
  --text-title-letter-spacing: -0.015em;
  --text-lead: clamp(1.05rem, 0.98rem + 0.4vw, 1.3rem);
  --text-lead-line-height: 1.6;

  /* Body defaults */
  --body-font-size: 1.0625rem;
  --body-line-height: 1.65;

  /* ---- Radius hierarchy ---- */
  --radius-input: 11px;
  --radius-card: 18px;
  --radius-feature: 28px;
  --radius-photo: 32px;
  --radius-photo-lg: 40px;
  --radius-pill: 999px;

  /* ---- Shadows (used sparingly) ---- */
  --shadow-soft: 0 8px 30px -12px rgb(30 11 38 / 0.16);
  --shadow-lift: 0 18px 50px -18px rgb(30 11 38 / 0.28);

  /* ---- Motion ---- */
  --ease-brand: cubic-bezier(0.22, 1, 0.36, 1);
  --duration-fast: 180ms;
  --duration-base: 320ms;
  --duration-reveal: 700ms;

  /* ---- Layout ---- */
  --container-max: 1200px;
  --gutter-mobile: 20px;
  --gutter-desktop: 32px;
  --section-space-mobile: 64px;
  --section-space-desktop: 112px;
}

/* Reduced motion: honor the OS setting everywhere. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-fast: 0ms;
    --duration-base: 0ms;
    --duration-reveal: 0ms;
  }
}