/**
 * @author Gilles Capelluto - MOLDEREZ-CONSULT
 * @purpose-fr Jetons de design (typographie Geist Sans, couleurs, espacements, ombres, rayons) avec variante sombre, inclus dans marketing.css.php.
 * @purpose-en Design tokens (Geist Sans typography, colours, spacing, shadows, radii) with a dark variant, included in marketing.css.php.
 * @audit-scope asset
 * @inputs-fr Aucune ; les polices sont chargées depuis /assets/fonts et le thème sombre vient de data-theme ou prefers-color-scheme.
 * @inputs-en None; fonts are loaded from /assets/fonts and the dark theme comes from data-theme or prefers-color-scheme.
 * @effects-fr Déclare les @font-face et les propriétés personnalisées :root consommées par les autres feuilles.
 * @effects-en Declares the @font-face rules and the :root custom properties consumed by the other stylesheets.
 *
 * UFoundMe! Design Tokens — Refonte 2026-10
 * Single source of truth for typography, colors, spacing, shadows, radii.
 * Inspired by tempods.com: warm, airy, confident.
 *
 * This file is included in marketing.css.php inside @layer tokens {}.
 * Do NOT wrap declarations in @layer here — the bundler handles it.
 */

/* Raleway was declared here, but its font files were never published: every page fell back to Geist Sans
   and logged a 404. The declarations and the family name are removed; the rendering is unchanged. */

/* Geist Sans — backup typeface */
@font-face {
  font-family: "Geist Sans";
  src: url("/ufoundme/assets/fonts/GeistSans-Variable.woff2") format("woff2");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}

:root {
    /* ── Typography ─────────────────────────────────── */
    --ufm-font-primary: "Geist Sans", system-ui, -apple-system, sans-serif;
    --ufm-font-mono: ui-monospace, "SF Mono", "Cascadia Code", monospace;

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

    --ufm-text-xs: 0.75rem;     /* 12px */
    --ufm-text-sm: 0.875rem;    /* 14px */
    --ufm-text-base: 1rem;      /* 16px */
    --ufm-text-lg: 1.125rem;    /* 18px */
    --ufm-text-xl: 1.25rem;     /* 20px */
    --ufm-text-2xl: 1.5rem;     /* 24px */
    --ufm-text-3xl: 1.875rem;   /* 30px */
    --ufm-text-4xl: 2.25rem;    /* 36px */

    --ufm-heading-xl: clamp(2.25rem, 1.5rem + 3.6vw, 4rem);
    --ufm-heading-lg: clamp(1.875rem, 1.2rem + 2.4vw, 3rem);
    --ufm-heading-md: clamp(1.5rem, 1rem + 1.6vw, 2.25rem);
    --ufm-heading-sm: clamp(1.25rem, 1rem + 0.8vw, 1.75rem);

    --ufm-leading-tight: 1.1;
    --ufm-leading-snug: 1.3;
    --ufm-leading-normal: 1.5;
    --ufm-leading-relaxed: 1.65;

    --ufm-tracking-tight: -0.02em;
    --ufm-tracking-normal: 0;
    --ufm-tracking-wide: 0.04em;
    --ufm-tracking-caps: 0.1em;

    /* ── Colors — Light theme ───────────────────────── */
    --ufm-bg: #F8F7F5;
    --ufm-surface: #FFFFFF;
    --ufm-surface-raised: #FFFFFF;
    --ufm-surface-subtle: #F3F1EE;

    --ufm-text: #251A3D;
    --ufm-text-secondary: #625D6B;
    --ufm-text-muted: #8A8490;
    --ufm-text-inverse: #FFFFFF;

    --ufm-primary: #342050;
    --ufm-primary-hover: #4B3575;
    --ufm-primary-soft: #EDE8F4;

    --ufm-accent: #0D7480;
    --ufm-accent-hover: #0A5F68;
    --ufm-accent-soft: #E6F5F6;

    --ufm-coral: #FF704D;
    --ufm-coral-soft: #FFF0EC;

    --ufm-success: #087250;
    --ufm-success-soft: #E8F5F0;
    --ufm-warning: #B45309;
    --ufm-warning-soft: #FEF3E2;
    --ufm-error: #B91C1C;
    --ufm-error-soft: #FEE2E2;

    --ufm-border: #DDD9E2;
    --ufm-border-subtle: #ECEAEF;
    --ufm-border-strong: #C4BFD0;

    --ufm-icon: #625D6B;

    /* ── Brand legacy aliases (backward compat) ────── */
    --ufm-brand-primary: var(--ufm-primary);
    --ufm-brand-secondary: #251A3D;
    --ufm-brand-coral: var(--ufm-coral);
    --ufm-brand-apricot: #FFB36B;
    --ufm-ink: var(--ufm-text);
    --ufm-cream: var(--ufm-bg);
    --ufm-brand-gradient: linear-gradient(135deg, #5B4388, #251A3D);

    --theme-a: var(--ufm-coral);
    --theme-b: var(--ufm-brand-secondary);
    --coral: var(--ufm-coral);
    --orange: var(--ufm-brand-apricot);
    --brand-primary: var(--ufm-primary);
    --earth-action: var(--ufm-brand-secondary);

    --ink: var(--ufm-text);
    --muted: var(--ufm-text-muted);
    --line: var(--ufm-border);
    --paper: var(--ufm-surface);
    --purple: var(--ufm-primary);
    --icon: var(--ufm-icon);
    --white: #FFFFFF;
    --forest: var(--ufm-success);
    --guide: var(--ufm-border-subtle);

    /* ── Spacing ─────────────────────────────────────── */
    --ufm-space-1: 0.25rem;   /* 4px */
    --ufm-space-2: 0.5rem;    /* 8px */
    --ufm-space-3: 0.75rem;   /* 12px */
    --ufm-space-4: 1rem;      /* 16px */
    --ufm-space-6: 1.5rem;    /* 24px */
    --ufm-space-8: 2rem;      /* 32px */
    --ufm-space-12: 3rem;     /* 48px */
    --ufm-space-16: 4rem;     /* 64px */
    --ufm-space-24: 6rem;     /* 96px */

    --ufm-section-gap: clamp(3rem, 2rem + 4vw, 6rem);
    --ufm-gutter: clamp(1rem, 0.6rem + 1.8vw, 2.5rem);

    /* ── Layout ──────────────────────────────────────── */
    --ufm-content-max: 1280px;
    --ufm-content-narrow: 720px;
    --ufm-content-wide: 1440px;

    /* ── Radii ───────────────────────────────────────── */
    --ufm-radius-sm: 8px;
    --ufm-radius-md: 12px;
    --ufm-radius-lg: 16px;
    --ufm-radius-xl: 24px;
    --ufm-radius-full: 999px;

    /* ── Shadows ──────────────────────────────────────── */
    --ufm-shadow-sm: 0 1px 3px rgba(37, 26, 61, 0.06);
    --ufm-shadow-md: 0 4px 12px rgba(37, 26, 61, 0.08);
    --ufm-shadow-lg: 0 12px 32px rgba(37, 26, 61, 0.1);
    --ufm-shadow-xl: 0 24px 64px rgba(37, 26, 61, 0.14);

    /* Legacy shadow aliases */
    --ufm-shadow-raised: var(--ufm-shadow-md);
    --ufm-shadow-overlay: var(--ufm-shadow-xl);

    /* ── Transitions ─────────────────────────────────── */
    --ufm-ease: cubic-bezier(0.25, 0.1, 0.25, 1);
    --ufm-duration-fast: 150ms;
    --ufm-duration-normal: 250ms;
    --ufm-duration-slow: 400ms;

    /* ── Touch targets (WCAG 2.2 AA) ─────────────────── */
    --ufm-touch-target: 44px;
    --ufm-touch-target-coarse: 48px;

    /* ── Header ───────────────────────────────────────── */
    --ufm-header-h: 64px;

    /* ── Z-index scale ────────────────────────────────── */
    --ufm-z-header: 100;
    --ufm-z-overlay: 200;
    --ufm-z-modal: 300;
    --ufm-z-toast: 400;
}

/* ── Dark theme ──────────────────────────────────── */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
      --ufm-bg: #1A1625;
      --ufm-surface: #241F30;
      --ufm-surface-raised: #2E2840;
      --ufm-surface-subtle: #1F1A2B;

      --ufm-text: #F0EDF5;
      --ufm-text-secondary: #A8A2B2;
      --ufm-text-muted: #78717F;
      --ufm-text-inverse: #1A1625;

      --ufm-primary: #B39FD8;
      --ufm-primary-hover: #C7B8E4;
      --ufm-primary-soft: #2E2444;

      --ufm-accent: #2CC5D2;
      --ufm-accent-hover: #4DD5E0;
      --ufm-accent-soft: #0F2E30;

      --ufm-coral: #FF8F73;
      --ufm-coral-soft: #3A1F18;

      --ufm-success: #34D399;
      --ufm-success-soft: #0D2D22;
      --ufm-warning: #F59E0B;
      --ufm-warning-soft: #2D1F06;
      --ufm-error: #F87171;
      --ufm-error-soft: #2D1111;

      --ufm-border: #3D3650;
      --ufm-border-subtle: #2E2840;
      --ufm-border-strong: #524A68;

      --ufm-icon: #A8A2B2;

      --ufm-brand-gradient: linear-gradient(135deg, #7B6AA0, #3A2D55);

      --ufm-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.2);
      --ufm-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.25);
      --ufm-shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.3);
      --ufm-shadow-xl: 0 24px 64px rgba(0, 0, 0, 0.4);
  }
}

:root[data-theme="dark"] {
    --ufm-bg: #1A1625;
    --ufm-surface: #241F30;
    --ufm-surface-raised: #2E2840;
    --ufm-surface-subtle: #1F1A2B;

    --ufm-text: #F0EDF5;
    --ufm-text-secondary: #A8A2B2;
    --ufm-text-muted: #78717F;
    --ufm-text-inverse: #1A1625;

    --ufm-primary: #B39FD8;
    --ufm-primary-hover: #C7B8E4;
    --ufm-primary-soft: #2E2444;

    --ufm-accent: #2CC5D2;
    --ufm-accent-hover: #4DD5E0;
    --ufm-accent-soft: #0F2E30;

    --ufm-coral: #FF8F73;
    --ufm-coral-soft: #3A1F18;

    --ufm-success: #34D399;
    --ufm-success-soft: #0D2D22;
    --ufm-warning: #F59E0B;
    --ufm-warning-soft: #2D1F06;
    --ufm-error: #F87171;
    --ufm-error-soft: #2D1111;

    --ufm-border: #3D3650;
    --ufm-border-subtle: #2E2840;
    --ufm-border-strong: #524A68;

    --ufm-icon: #A8A2B2;

    --ufm-brand-gradient: linear-gradient(135deg, #7B6AA0, #3A2D55);

    --ufm-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.2);
    --ufm-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.25);
    --ufm-shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.3);
    --ufm-shadow-xl: 0 24px 64px rgba(0, 0, 0, 0.4);
}