/* ============================================================
   Poliiish Design System — CSS Variables
   Transposé depuis poliiish_system (Dart/Flutter)
   ============================================================ */

:root {
  /* ── Typography ───────────────────────────────────────────── */
  --font-main: 'Urbanist', sans-serif;
  --font-secondary: 'Source Sans 3', sans-serif;

  --text-display-lg: 57px;
  --text-display-md: 45px;
  --text-display-sm: 36px;
  --text-headline-lg: 32px;
  --text-headline-md: 28px;
  --text-headline-sm: 24px;
  --text-title-lg: 22px;
  --text-title-md: 16px;
  --text-title-sm: 14px;
  --text-body-lg: 16px;
  --text-body-md: 14px;
  --text-body-sm: 12px;
  --text-label-lg: 14px;
  --text-label-md: 12px;
  --text-label-sm: 11px;

  --fw-thin: 100;
  --fw-extralight: 200;
  --fw-light: 300;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-extrabold: 800;
  --fw-black: 900;

  /* ── Spacing ──────────────────────────────────────────────── */
  --spacing-0: 0px;
  --spacing-xxs: 4px;
  --spacing-xs: 8px;
  --spacing-sm: 12px;
  --spacing-md: 16px;
  --spacing-lg: 20px;
  --spacing-xl: 24px;
  --spacing-2xl: 28px;
  --spacing-3xl: 32px;
  --spacing-4xl: 40px;
  --spacing-5xl: 48px;

  /* ── Radius ───────────────────────────────────────────────── */
  --radius-none: 0px;
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-2xl: 20px;
  --radius-3xl: 24px;
  --radius-full: 9999px;
  --radius-card: 12px;
  --radius-button: 8px;
  --radius-chip: 8px;

  /* ── Background / Surface ─────────────────────────────────── */
  --color-background: #ffffff;
  --color-surface: #ffffff;
  --color-surface-variant: #e3e3e3;
  --color-surface-disabled: #e3e3e3;
  --color-on-background: #232527;
  --color-on-surface: #232527;
  --color-on-surface-variant: #232527;
  --color-on-surface-disabled: #939393;

  /* ── Text ─────────────────────────────────────────────────── */
  --color-text-primary: #232527;
  --color-text-secondary: #3a3d3d;
  --color-text-tertiary: #269ce4;
  --color-text-disabled: #939393;

  /* ── Borders / Dividers ───────────────────────────────────── */
  --color-border: #cdcdcd;
  --color-border-strong: #232527;

  /* ── Actions — Filled (CTA principal) ────────────────────── */
  --color-action-filled: #232527;
  --color-action-filled-hover: #002f6c;
  --color-action-filled-pressed: #269ce4;
  --color-action-filled-disabled: #e3e3e3;
  --color-on-action-filled: #f0f0f0;
  --color-on-action-filled-disabled: #939393;

  /* ── Actions — Emphasis / Citrus (CTA accent) ────────────── */
  --color-action-emphasis: #d8ea73;
  --color-action-emphasis-hover: #999b45;
  --color-action-emphasis-pressed: #64721d;
  --color-action-emphasis-disabled: #e3e3e3;
  --color-on-action-emphasis: #232527;
  --color-on-action-emphasis-disabled: #939393;

  /* ── Actions — Outlined ───────────────────────────────────── */
  --color-action-outlined: #ffffff;
  --color-action-outlined-hover: #e8f2ff;
  --color-action-outlined-border: #cdcdcd;
  --color-on-action-outlined: #232527;
  --color-on-action-outlined-disabled: #939393;

  /* ── Decoratives ──────────────────────────────────────────── */
  /* Aqua */
  --color-aqua: #95defe;
  --color-aqua-light: #d1e7ff;
  --color-aqua-extra-light: #e8f2ff;
  --color-on-aqua: #004a8d;
  --color-on-aqua-light: #002f6c;

  /* Citrus */
  --color-citrus: #effe95;
  --color-citrus-light: #f4ffe0;
  --color-citrus-extra-light: #f2ffc6;
  --color-on-citrus: #64721d;
  --color-on-citrus-light: #4a5d10;

  /* Mint */
  --color-mint: #00bfae;
  --color-mint-light: #d0fdf2;
  --color-mint-extra-light: #e5fdf6;
  --color-on-mint: #00796b;
  --color-on-mint-light: #004d40;

  /* Pink */
  --color-pink: #fe95e6;
  --color-pink-light: #fee0f6;
  --color-pink-extra-light: #fdf4fb;
  --color-on-pink: #8f2368;
  --color-on-pink-light: #6c0f4f;

  /* Purple */
  --color-purple: #d87fee;
  --color-purple-light: #f1ccfe;
  --color-purple-extra-light: #fbefff;
  --color-on-purple: #5b1d8b;
  --color-on-purple-light: #3a0f60;

  /* ── States ───────────────────────────────────────────────── */
  /* Error */
  --color-error: #ff8080;
  --color-error-light: #ffe0e0;
  --color-error-dark: #9c1f1f;

  /* Success */
  --color-success: #aafe95;
  --color-success-light: #d5ffd1;
  --color-success-dark: #1c8d00;

  /* Warning */
  --color-warning: #f5b65a;
  --color-warning-light: #ffe5c5;
  --color-warning-dark: #9c4400;

  /* Info */
  --color-info: #95defe;
  --color-info-light: #d1e7ff;
  --color-info-dark: #004a8d;
}