/*
  MY FLY AIRPORT — Design Tokens
  Architecture 3 couches : Primitive -> Sémantique -> Composant
  Palette imposée : blanc dominant, noir #111111, gris clair #F5F5F5,
  or champagne #C8A96A (accent rare, jamais dominant).
*/

:root {
  /* ====== 1. PRIMITIFS ====== */

  /* Couleurs brutes */
  --p-white: #FFFFFF;
  --p-mist: #F5F5F5;
  --p-mist-2: #EDEDEC;
  --p-ink: #111111;
  --p-ink-80: rgba(17, 17, 17, 0.80);
  --p-ink-60: rgba(17, 17, 17, 0.60);
  --p-ink-40: rgba(17, 17, 17, 0.40);
  --p-ink-16: rgba(17, 17, 17, 0.16);
  --p-ink-08: rgba(17, 17, 17, 0.08);
  --p-ink-05: rgba(17, 17, 17, 0.05);
  --p-champagne: #B8853A;
  --p-champagne-dark: #8A611F;
  --p-champagne-light: #D9A968;
  --p-champagne-12: rgba(184, 133, 58, 0.12);
  --p-champagne-24: rgba(184, 133, 58, 0.24);
  --p-white-70: rgba(255, 255, 255, 0.70);
  --p-white-14: rgba(255, 255, 255, 0.14);
  --p-success: #2E7D5B;
  --p-error: #B3392C;

  /* Marine — fonds sombres (footer, panneaux de cartes) */
  --p-navy: #0E1B2E;
  --p-navy-2: #16283F;
  --p-navy-text: #0B1F38;
  --p-navy-border: rgba(255, 255, 255, 0.10);

  /* Typo brute */
  --p-font-display: 'Fraunces', 'Iowan Old Style', 'Palatino Linotype', serif;
  --p-font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Échelle d'espacement (base 8px) */
  --p-space-1: 4px;
  --p-space-2: 8px;
  --p-space-3: 12px;
  --p-space-4: 16px;
  --p-space-5: 24px;
  --p-space-6: 32px;
  --p-space-7: 48px;
  --p-space-8: 64px;
  --p-space-9: 96px;
  --p-space-10: 128px;
  --p-space-11: 160px;

  /* Rayons */
  --p-radius-sm: 8px;
  --p-radius-md: 14px;
  --p-radius-lg: 20px;
  --p-radius-xl: 28px;
  --p-radius-full: 999px;

  /* Ombres */
  --p-shadow-sm: 0 1px 2px rgba(17, 17, 17, 0.04), 0 1px 1px rgba(17, 17, 17, 0.03);
  --p-shadow-md: 0 12px 32px rgba(17, 17, 17, 0.08);
  --p-shadow-lg: 0 32px 80px rgba(17, 17, 17, 0.14);
  --p-shadow-focus: 0 0 0 3px rgba(200, 169, 106, 0.45);

  /* Mouvement */
  --p-ease: cubic-bezier(0.4, 0, 0.2, 1);
  --p-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --p-dur-fast: 160ms;
  --p-dur-base: 280ms;
  --p-dur-slow: 520ms;

  /* ====== 2. SÉMANTIQUE ====== */

  --color-bg: var(--p-white);
  --color-bg-alt: var(--p-mist);
  --color-bg-inverse: var(--p-navy);
  --color-surface: var(--p-white);
  --color-surface-inverse: var(--p-navy-2);

  --color-text: var(--p-ink);
  --color-heading: var(--p-navy-text);
  --color-text-muted: var(--p-ink-60);
  --color-text-faint: var(--p-ink-40);
  --color-text-inverse: var(--p-white);
  --color-text-inverse-muted: var(--p-white-70);

  --color-border: var(--p-ink-08);
  --color-border-strong: var(--p-ink-16);
  --color-border-inverse: var(--p-white-14);

  --color-accent: var(--p-champagne);
  --color-accent-strong: var(--p-champagne-dark);
  --color-accent-tint: var(--p-champagne-12);
  --color-accent-tint-strong: var(--p-champagne-24);

  --color-focus-ring: var(--p-shadow-focus);
  --color-success: var(--p-success);
  --color-error: var(--p-error);

  --font-display: var(--p-font-display);
  --font-body: var(--p-font-body);

  --space-xs: var(--p-space-2);
  --space-sm: var(--p-space-3);
  --space-md: var(--p-space-4);
  --space-lg: var(--p-space-5);
  --space-xl: var(--p-space-6);
  --space-2xl: var(--p-space-7);
  --space-3xl: var(--p-space-8);
  --space-4xl: var(--p-space-9);
  --space-5xl: var(--p-space-10);

  --radius-control: var(--p-radius-sm);
  --radius-field: var(--p-radius-md);
  --radius-card: var(--p-radius-lg);
  --radius-panel: var(--p-radius-xl);
  --radius-pill: var(--p-radius-full);

  --shadow-rest: var(--p-shadow-sm);
  --shadow-raised: var(--p-shadow-md);
  --shadow-floating: var(--p-shadow-lg);

  --ease-standard: var(--p-ease);
  --ease-entrance: var(--p-ease-out);
  --dur-fast: var(--p-dur-fast);
  --dur-base: var(--p-dur-base);
  --dur-slow: var(--p-dur-slow);

  --container-max: 1280px;
  --container-pad: clamp(20px, 5vw, 64px);

  /* ====== 3. COMPOSANT ====== */

  --button-primary-bg: var(--color-text);
  --button-primary-fg: var(--color-text-inverse);
  --button-primary-bg-hover: #000000;

  --button-ghost-border: var(--color-border-strong);
  --button-ghost-fg: var(--color-text);

  --card-bg: var(--color-surface);
  --card-border: var(--color-border);
  --card-radius: var(--radius-card);
  --card-shadow: var(--shadow-rest);
  --card-shadow-hover: var(--shadow-raised);

  --field-bg: var(--p-white);
  --field-border: var(--color-border-strong);
  --field-border-focus: var(--p-champagne);
  --field-radius: var(--radius-field);

  --header-height: 84px;
  --header-bg: rgba(255, 255, 255, 0.78);
  --header-border: var(--p-ink-08);

  --panel-bg: var(--p-white);
  --panel-radius: var(--radius-panel);
  --panel-shadow: var(--shadow-floating);
}