/* =====================================================================
   Faithful Ties — Design System Tokens
   ---------------------------------------------------------------------
   Block 1 is the Faithful Ties Design System, copied verbatim from
   `Faithfulties.com website/tokens/*.css` (colors, typography, spacing,
   effects). That kit is the source of truth — if it changes, re-copy it.

   Block 2 maps those tokens onto the `--ft-*` names this site's stylesheet
   uses. Always author against the design-system names where you can; the
   --ft-* layer exists so one rename in the kit doesn't ripple through
   every rule in main.css.

   Never hardcode a hex value outside this file.
   ===================================================================== */

/* =====================================================================
   1. DESIGN SYSTEM — verbatim from the kit
   ===================================================================== */

:root{
/* base palette — plum/purple */
--plum-950:#170729;
--plum-900:#1f0a35;
--plum-800:#2a0f45;
--plum-700:#3a1a5c;
--plum-600:#4d2777;
--plum-500:#653a94;
--plum-100:#efe6f7;
--plum-050:#f8f4fc;
/* base palette — gold */
--gold-700:#9c7a1f;
--gold-600:#b8912e;
--gold-500:#cca545;
--gold-400:#ddc074;
--gold-300:#ecd9a3;
--gold-100:#f8eecb;
/* base palette — ivory/white */
--ivory-200:#efe6d4;
--ivory-100:#f7f1e5;
--ivory-050:#fbf8f0;
--white:#ffffff;
/* accents */
--rose-600:#c22e46;
--rose-500:#e0384f;
--forest-500:#4c8768;
--forest-100:#e4f0e8;
--garnet-500:#a83246;

/* semantic — surfaces */
--surface-dark:var(--plum-900);
--surface-dark-elevated:var(--plum-800);
--surface-dark-border:var(--plum-600);
--surface-light:var(--white);
--surface-light-alt:var(--ivory-050);
--surface-card:var(--white);
--surface-card-dark:var(--plum-800);

/* semantic — text */
--text-on-dark-primary:var(--ivory-050);
--text-on-dark-secondary:#d8c9e8;
--text-on-light-primary:var(--plum-900);
--text-on-light-secondary:#5d4a75;
--text-muted:#8a7a9c;

/* semantic — accent / brand */
--accent-gold:var(--gold-500);
--accent-gold-strong:var(--gold-600);
--accent-gold-hover:var(--gold-400);
--accent-gold-soft:var(--gold-100);
--brand-purple:var(--plum-800);
--brand-purple-strong:var(--plum-900);

/* semantic — borders / dividers */
--border-gold:var(--gold-400);
--border-subtle:var(--plum-100);
--border-dark:var(--plum-600);

/* semantic — links */
--link:var(--plum-700);
--link-hover:var(--gold-600);
--link-on-dark:var(--gold-400);
--link-on-dark-hover:var(--gold-300);

/* semantic — status */
--success:var(--forest-500);
--success-bg:var(--forest-100);
--danger:var(--garnet-500);
--danger-bg:#f7e3e6;
--love:var(--rose-500);

/* verification / trust badge */
--verified:var(--gold-600);
--verified-bg:var(--gold-100);

/* typography */
--font-display:'Playfair Display',Georgia,serif;
--font-script:'Allura',cursive;
--font-heading:'Baloo 2','Nunito Sans',sans-serif;
--font-body:'Nunito Sans',-apple-system,sans-serif;

--text-display-xl:clamp(2.75rem,4.5vw,4.5rem);
--text-display-lg:clamp(2.25rem,3.5vw,3.25rem);
--text-display-md:clamp(1.75rem,2.5vw,2.375rem);
--text-script-lg:clamp(2.5rem,4vw,4rem);
--text-h1:2.5rem;
--text-h2:2rem;
--text-h3:1.5rem;
--text-h4:1.25rem;
--text-body-lg:1.125rem;
--text-body:1rem;
--text-body-sm:0.9375rem;
--text-caption:0.8125rem;
--text-eyebrow:0.8125rem;

--leading-tight:1.15;
--leading-snug:1.3;
--leading-normal:1.55;
--leading-relaxed:1.7;

--tracking-tight:-0.01em;
--tracking-normal:0;
--tracking-wide:0.04em;
--tracking-eyebrow:0.18em;

--weight-regular:400;
--weight-medium:500;
--weight-semibold:600;
--weight-bold:700;
--weight-extrabold:800;

/* spacing */
--space-1:4px;
--space-2:8px;
--space-3:12px;
--space-4:16px;
--space-5:20px;
--space-6:24px;
--space-8:32px;
--space-10:40px;
--space-12:48px;
--space-16:64px;
--space-20:80px;
--space-24:96px;
--space-32:128px;

--container-max:1280px;
--container-padding:clamp(20px,5vw,80px);
--section-padding-y:clamp(64px,8vw,120px);

/* effects */
--radius-sm:8px;
--radius-md:14px;
--radius-lg:20px;
--radius-pill:999px;
--radius-badge:999px;

--shadow-card:0 8px 24px -8px rgba(31,10,53,0.18),0 2px 6px -2px rgba(31,10,53,0.12);
--shadow-card-hover:0 16px 36px -10px rgba(31,10,53,0.26),0 4px 10px -2px rgba(31,10,53,0.14);
--shadow-gold-glow:0 0 0 1px rgba(204,165,69,0.35),0 8px 30px -6px rgba(204,165,69,0.35);
--shadow-elevated-dark:0 20px 60px -12px rgba(0,0,0,0.55);

--gradient-hero-dark:linear-gradient(160deg,var(--plum-950) 0%,var(--plum-900) 45%,var(--plum-800) 100%);
--gradient-gold:linear-gradient(90deg,var(--gold-600) 0%,var(--gold-400) 50%,var(--gold-600) 100%);
--gradient-gold-soft:linear-gradient(180deg,var(--gold-300) 0%,var(--gold-500) 100%);
--gradient-card-sheen:linear-gradient(135deg,rgba(255,255,255,0.06) 0%,rgba(255,255,255,0) 60%);

--ease-standard:cubic-bezier(0.4,0,0.2,1);
--duration-fast:150ms;
--duration-standard:220ms;
--duration-slow:400ms;

--border-width-hairline:1px;
--border-width-emphasis:1.5px;
}

/* =====================================================================
   2. SITE MAPPING — --ft-* names used by main.css
   ===================================================================== */

:root {
  /* Brand */
  --ft-purple: var(--plum-800);
  --ft-purple-deep: var(--plum-900);
  --ft-purple-darker: var(--plum-950);
  --ft-purple-light: var(--plum-600);
  --ft-gold: var(--gold-500);
  --ft-gold-light: var(--gold-400);
  --ft-gold-dark: var(--gold-700);
  --ft-magenta: var(--rose-500);

  /* Neutrals */
  --ft-ivory: var(--ivory-050);
  --ft-ivory-warm: var(--ivory-100);
  --ft-white: var(--white);
  --ft-ink: var(--text-on-light-primary);
  --ft-ink-soft: var(--text-on-light-secondary);
  --ft-ink-faint: var(--text-muted);
  --ft-line: var(--border-subtle);

  /* On-purple surfaces */
  --ft-glass: rgba(255, 255, 255, 0.06);
  --ft-glass-strong: rgba(255, 255, 255, 0.12);
  --ft-glass-border: rgba(255, 255, 255, 0.16);
  --ft-on-purple: var(--text-on-dark-primary);
  --ft-on-purple-soft: var(--text-on-dark-secondary);
  --ft-on-purple-faint: rgba(255, 255, 255, 0.55);

  /* Status */
  --ft-success: var(--success);
  --ft-error: var(--danger);
  --ft-warning: var(--gold-700);

  /* Typography — DS families */
  --ft-font-display: var(--font-heading);  /* Baloo 2 — headings & UI */
  --ft-font-body: var(--font-body);        /* Nunito Sans */
  --ft-font-serif: var(--font-display);    /* Playfair Display */
  --ft-font-script: var(--font-script);    /* Allura — accent line only */

  --ft-text-xs: var(--text-caption);
  --ft-text-sm: var(--text-body-sm);
  --ft-text-base: var(--text-body);
  --ft-text-lg: var(--text-body-lg);
  --ft-text-xl: var(--text-h4);
  --ft-text-2xl: var(--text-display-md);
  --ft-text-3xl: var(--text-display-lg);
  --ft-text-4xl: var(--text-display-xl);

  /* Spacing */
  --ft-space-1: var(--space-1);
  --ft-space-2: var(--space-2);
  --ft-space-3: var(--space-3);
  --ft-space-4: var(--space-4);
  --ft-space-5: var(--space-5);
  --ft-space-6: var(--space-8);
  --ft-space-7: var(--space-12);
  --ft-space-8: var(--space-16);
  --ft-space-9: var(--space-24);

  /* Radii — DS: cards are rounded, NOT pill. Pill is buttons/badges only. */
  --ft-radius-sm: var(--radius-sm);
  --ft-radius-md: var(--radius-md);
  --ft-radius-lg: var(--radius-lg);
  --ft-radius-xl: var(--radius-lg);
  --ft-radius-2xl: var(--radius-lg);
  --ft-radius-pill: var(--radius-pill);

  /* Elevation */
  --ft-shadow-sm: var(--shadow-card);
  --ft-shadow-md: var(--shadow-card);
  --ft-shadow-lg: var(--shadow-card-hover);
  --ft-shadow-gold: var(--shadow-gold-glow);

  /* Layout */
  --ft-container: var(--container-max);
  --ft-container-narrow: 780px;
  --ft-nav-height: 84px;

  /* ---------------------------------------------------------------
     Hero headline gold — #D4AF37, requested explicitly.
     This is the Android app's gold (subscription_widget.dart), NOT the
     design kit's --gold-500 (#cca545) or --gold-600 (#b8912e).
     Kept as its own token so the kit's palette stays untouched.

     ⚠️ Contrast on --ivory-050 (#fbf8f0) is 1.99:1. WCAG asks 3:1 for
     large text. --gold-600 measures 2.79:1 and --gold-700 (#9c7a1f)
     measures 4.505:1 — swap this one value to change it everywhere.
     --------------------------------------------------------------- */
  --ft-hero-gold: #d4af37;

  /* ---------------------------------------------------------------
     Active-subscription green — #4CAF50, copied from the app's
     Premium Plans screen (subscription_widget.dart:287). Deliberately
     NOT the design kit's --forest-500 (#4c8768): this button must look
     identical in the app and on the website, since a member sees both.
     --------------------------------------------------------------- */
  --ft-active-green: #4caf50;
}