/*
 * Festime design tokens — single source of truth (charte UX/UI §27 « Design tokens et nommage »).
 * Loaded FIRST by every platform page (app/platform.php, app/preview.php); every other stylesheet
 * consumes these custom properties instead of hard-coded values.  Documentation: docs/DESIGN-SYSTEM.md.
 * Live library: /?page=app&screen=design-system.  Naming = charte tokens with dots replaced by dashes
 * (color.navy.950 -> --color-navy-950, space.4 -> --space-4, shadow.card -> --shadow-card).
 *
 * Two layers:
 *  1. Charte reference palette (exact HEX of the charte, Sept. 2026).
 *  2. Applied UI tokens: the values currently rendered by the product.  Some differ from the charte
 *     on purpose (contrast-tuned purple #681cff instead of #7c3aed for links on white, AA text shades).
 *     Changing a value here changes every component that consumes it.
 */
:root {
  /* ---- 1. Charte reference palette ---- */
  --color-navy-950: #0b1537;
  --color-navy-850: #121e49;
  --color-navy-700: #1a295c;
  --color-purple-500: #7c3aed;
  --color-purple-400: #9b5cf6;
  --color-lilac-50: #f2ecff;
  --color-gold-500: #d4a72c;
  --color-surface: #f7f8fc;
  --color-text: #18213d;
  --color-muted: #667085;
  --color-border: #e5e7ef;
  --color-success-500: #12a277;
  --color-danger-500: #d64545;
  --color-warning-500: #f59e0b;
  --color-info-500: #2f80ed;
  --color-teal-500: #0ea5a8;

  /* ---- 2. Applied UI tokens ---- */
  --color-white: #fff;
  --color-black: #000;
  --color-page: #f8faff;              /* application background */
  --color-ink: var(--color-navy-950); /* default text on light surfaces */
  --color-brand: #681cff;             /* links, active states (AA on white) */
  --color-brand-strong: #641aff;      /* avatars, emphasised brand text */
  --color-brand-deep: #7024db;        /* purple text on lilac surfaces */
  --color-brand-accent: #a04cff;      /* active underline in the dark header */
  --color-brand-soft: #f0ecff;        /* soft buttons, selected chips */
  --color-brand-tint: #eee7ff;        /* icon tiles, highlighted rows */
  --color-brand-tint-2: #eee8ff;
  --color-brand-tint-3: #f0eaff;
  --color-brand-on-dark: #d8bbff;     /* purple text on navy */
  --color-text-muted-ui: #50639f;     /* secondary text (legacy --muted) */
  --color-text-secondary: #52628e;    /* metadata */
  --color-text-subtle: #5e6a85;
  --color-text-muted-aa: #55617f;     /* smallest metadata, 4.5:1 on white */
  --color-line: #e2e8fa;              /* card and input borders (legacy --line) */
  --color-line-soft: #edf0f7;         /* table separators */
  --color-line-muted: #e6e6f3;
  --color-on-dark: #eef2ff;           /* header navigation links */
  --color-focus: #5b1fd6;             /* focus ring on light surfaces */
  --color-focus-on-dark: #ffd166;     /* focus ring on navy surfaces */
  --color-success-text: #006746;      /* AA status text */
  --color-danger-text: #b5002a;
  --color-warning-text: #8a4b00;
  --color-info-text: #174a8f;
  --color-success-bg: #ddfaee;
  --color-danger-bg: #ffe6ec;
  --color-warning-bg: #fff6e6;
  --color-info-bg: #f2f7ff;
  --color-success-border: #b8ecd4;
  --color-danger-border: #f3b9c6;
  --color-warning-border: #f6d8a4;
  --color-info-border: #b9d3fa;

  /* Gradients (charte §03: one strong gradient per zone) */
  --gradient-primary: linear-gradient(130deg, #963dff, #5c12ff);
  --color-primary-border: #863eff;
  --gradient-header: linear-gradient(115deg, #07102d, #10193d);
  --gradient-premium-dark: linear-gradient(135deg, var(--color-navy-950), #15124d);

  /* ---- Typography ---- */
  --font-sans: Inter, Arial, sans-serif;
  --font-arabic: Arial, Tahoma, sans-serif;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;
  --font-size-2xs: 11px;
  --font-size-xs: 12px;               /* type.label */
  --font-size-sm: 13px;               /* body small */
  --font-size-base: 14px;             /* type.body (app) */
  --font-size-md: 15px;               /* type.body (reading) / button */
  --font-size-lg: 16px;               /* type.h3 (cards) */
  --font-size-xl: 18px;
  --font-size-2xl: 21px;              /* type.h2 (panels) */
  --font-size-3xl: 24px;
  --font-size-4xl: 32px;              /* type.h1 */
  --font-size-display: 48px;          /* type.display */
  --line-height-tight: 1.2;
  --line-height-heading: 1.3;
  --line-height-body: 1.5;
  --line-height-relaxed: 1.6;

  /* ---- Spacing (charte §05, 8 px rule) ---- */
  --space-0: 0;
  --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;

  /* ---- Radius (charte §06) ---- */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-pill: 999px;
  --radius-round: 50%;

  /* ---- Elevation ---- */
  --shadow-card: 0 3px 9px #24438a06;
  --shadow-card-hover: 0 4px 14px #324cb304;
  --shadow-dropdown: 0 14px 24px #02091842;
  --shadow-modal: 0 5px 30px #0003;
  --shadow-focus-halo: 0 0 0 5px #fff;

  /* ---- Motion (charte §24) ---- */
  --duration-fast: 150ms;             /* hover, tooltip */
  --duration-base: 180ms;             /* focus, colour changes */
  --duration-medium: 200ms;           /* dropdown, transforms */
  --duration-overlay: 220ms;          /* drawer / mobile navigation */
  --duration-slow: 300ms;             /* modal */
  --ease-standard: ease;

  /* ---- Layout & sizing ---- */
  --layout-header-height: 80px;
  --layout-content-narrow: 1060px;
  --layout-content-wide: 1236px;
  --layout-content-max: 1500px;
  --layout-sidebar-width: 232px;
  --control-height: 44px;             /* inputs & touch targets (charte §11, §21) */
  --control-height-sm: 36px;
  --target-min: 44px;
  --target-min-aa: 24px;              /* WCAG 2.2 SC 2.5.8 */

  /* ---- Z-index scale ---- */
  --z-sticky: 50;
  --z-header: 70;
  --z-dropdown: 80;
  --z-overlay: 100;
  --z-toast: 900;
  --z-skip-link: 1000;
}