/* ════════════════════════════════════════════════════════════════
   Flourish Web Co — Design Token Definitions
   Source: reference/themes/flourishweb-co/components/reviewer.html
   Generated: 2026-06-14

   Usage: Load this file globally in the Vertical child theme.
   All component CSS depends on these variables.
   ════════════════════════════════════════════════════════════════ */

:root, .fw-theme-flourish {

  /* ─── Brand Colors ─── */
  --fw-brand: #ff7a3c;
  --fw-brand-hot: #ff5709;
  --fw-brand-dark: #e05a1c;
  --fw-brand-light: rgba(255, 122, 60, 0.12);

  /* ─── Accent Colors ─── */
  --fw-accent: #adbceb;
  --fw-accent-light: rgba(173, 188, 235, 0.15);
  --fw-warm: #f7ca00;
  --fw-emergency: #dc2626;

  /* ─── Text Colors ─── */
  --fw-text: #0c345a;
  --fw-text-mid: #3c434a;
  --fw-text-light: #9e9e9e;
  --fw-text-on-dark: rgba(240, 246, 252, 0.7);
  --fw-text-on-dark-mid: #c3c4c7;
  --fw-text-on-dark-bright: #f0f0f1;

  /* ─── Background Colors ─── */
  --fw-bg: #f6f6f6;
  --fw-bg-alt: #eff3fa;
  --fw-bg-alt-2: #e8edf5;
  --fw-bg-dark: #171528;
  --fw-bg-white: #ffffff;
  --fw-bg-card: #ffffff;
  --fw-bg-card-dark: #2c3338;

  /* ─── Borders ─── */
  --fw-border: rgba(12, 52, 90, 0.08);
  --fw-border-strong: rgba(12, 52, 90, 0.16);
  --fw-border-subtle: rgba(12, 52, 90, 0.06);

  /* ─── Surfaces ─── */
  --fw-surface-white: #ffffff;
  --fw-surface-muted: #e5d6b7;
  --fw-overlay-dark: rgba(23, 21, 40, 0.75);

  /* ─── Glass / Frosted Effects ─── */
  --fw-glass-bg: rgba(255, 255, 255, 0.45);
  --fw-glass-bg-dark: rgba(255, 255, 255, 0.12);
  --fw-glass-border: rgba(255, 255, 255, 0.35);
  --fw-glass-border-dark: rgba(255, 255, 255, 0.18);
  --fw-glass-blur: 18px;
  --fw-glass-saturate: 1.8;
  --fw-glass-shadow: 0 2px 16px rgba(0, 0, 0, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.45);
  --fw-glass-shadow-dark: 0 2px 20px rgba(0, 0, 0, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.12);
  --fw-glass-radius: 12px;

  /* ─── Typography Families ─── */
  --fw-font-display: 'Syne', sans-serif;
  --fw-font-body: 'Poppins', sans-serif;
  --fw-font-accent: 'Syne', sans-serif;
  --fw-font-mono: 'IBM Plex Mono', monospace;

  /* ─── Spacing ─── */
  --fw-space-xs: 4px;
  --fw-space-sm: 8px;
  --fw-space-md: 16px;
  --fw-space-lg: 24px;
  --fw-space-xl: 40px;
  --fw-space-2xl: 64px;

  /* ─── Layout ─── */
  --fw-body-gutter: 0px;
  --fw-section-py: clamp(60px, 8vw, 120px);
  --fw-section-py-sm: clamp(48px, 6vw, 90px);
  --fw-section-gap: 0px;
  --fw-container: 1200px;
  --fw-container-md: 1080px;
  --fw-container-sm: 720px;
  --fw-container-px: clamp(20px, 4vw, 40px);
  --fw-content-max: 72ch;
  --fw-grid-gap: clamp(16px, 2.5vw, 32px);
  --fw-grid-gap-sm: clamp(12px, 1.5vw, 20px);
  --fw-grid-gap-lg: clamp(24px, 3.5vw, 48px);

  /* ─── Border Radius ─── */
  --fw-radius: 16px;
  --fw-radius-sm: 8px;
  --fw-radius-md: 16px;
  --fw-radius-lg: 24px;
  --fw-radius-button: 100px;
  --fw-radius-tag: 100px;
  --fw-radius-input: 8px;

  /* ─── Shadows ─── */
  --fw-shadow: 0 2px 8px rgba(12, 52, 90, 0.06);

  /* ─── Type Scale (font-size) ─── */
  --fw-fs-2xs: 0.55rem;
  --fw-fs-xs: 0.6rem;
  --fw-fs-sm: 0.65rem;
  --fw-fs-caption: 0.72rem;
  --fw-fs-eyebrow: 0.75rem;
  --fw-fs-body-sm: 0.78rem;
  --fw-fs-body: 0.82rem;
  --fw-fs-btn: 0.85rem;
  --fw-fs-body-lg: 0.92rem;
  --fw-fs-subhead: 1.1rem;

  /* ─── Letter Spacing ─── */
  --fw-tracking-tight: -0.02em;
  --fw-tracking-body: 0.02em;
  --fw-tracking-wide: 0.04em;
  --fw-tracking-caps: 0.06em;
  --fw-tracking-widest: 0.08em;

  /* ─── Line Height ─── */
  --fw-leading-none: 1;
  --fw-leading-tight: 1.1;
  --fw-leading-snug: 1.3;
  --fw-leading-normal: 1.5;
  --fw-leading-relaxed: 1.6;
  --fw-leading-loose: 1.7;
}