/* ============================================================
   Couleurs — Gestion Amarok DS
   Sobre, professionnel. Couleurs fonctionnelles, jamais décoratives.
   Thème clair par défaut ; sombre via [data-theme="dark"].
   ============================================================ */

:root {
  /* --- Neutres (blancs légèrement chauds, chroma ≤ 0.006) --- */
  --bg-app: oklch(0.972 0.004 90);
  --surface: #ffffff;
  --surface-sunken: oklch(0.945 0.004 90);
  --surface-hover: oklch(0.958 0.005 255);
  --border: oklch(0.9 0.005 90);
  --border-strong: oklch(0.79 0.006 90);

  --text-1: oklch(0.25 0.012 260);
  --text-2: oklch(0.49 0.015 260);
  --text-3: oklch(0.64 0.012 260);
  --text-on-accent: #ffffff;

  /* --- Accent : bleu profond, fiable --- */
  --accent: oklch(0.52 0.13 255);
  --accent-hover: oklch(0.46 0.13 255);
  --accent-subtle: oklch(0.94 0.027 255);
  --accent-text: oklch(0.44 0.13 255);

  /* --- Sémantique (même famille chroma/lightness, hue variable) --- */
  --danger: oklch(0.55 0.17 27);
  --danger-subtle: oklch(0.94 0.035 27);
  --warning: oklch(0.58 0.13 70);
  --warning-subtle: oklch(0.95 0.04 85);
  --success: oklch(0.55 0.12 150);
  --success-subtle: oklch(0.94 0.04 150);

  /* --- Priorités (fonctionnelles, alias) --- */
  --prio-urgent: var(--danger);
  --prio-urgent-bg: var(--danger-subtle);
  --prio-high: var(--warning);
  --prio-high-bg: var(--warning-subtle);
  --prio-normal: var(--accent);
  --prio-normal-bg: var(--accent-subtle);
  --prio-low: var(--text-3);
  --prio-low-bg: var(--surface-sunken);

  /* --- Statuts fixes (MVP) : Inbox / À faire / En cours / En attente / Délégué / Terminé --- */
  --status-inbox: oklch(0.55 0.02 260);
  --status-inbox-bg: oklch(0.94 0.005 260);
  --status-todo: oklch(0.55 0.06 255);
  --status-todo-bg: oklch(0.94 0.015 255);
  --status-inprogress: var(--accent);
  --status-inprogress-bg: var(--accent-subtle);
  --status-waiting: var(--warning);
  --status-waiting-bg: var(--warning-subtle);
  --status-delegated: oklch(0.55 0.12 300);
  --status-delegated-bg: oklch(0.94 0.03 300);
  --status-done: var(--success);
  --status-done-bg: var(--success-subtle);

  /* --- Divers --- */
  --focus-ring: oklch(0.52 0.13 255 / 0.45);
  --overlay: oklch(0.2 0.01 260 / 0.45);
}

[data-theme="dark"] {
  --bg-app: oklch(0.21 0.008 260);
  --surface: oklch(0.255 0.009 260);
  --surface-sunken: oklch(0.185 0.008 260);
  --surface-hover: oklch(0.3 0.012 255);
  --border: oklch(0.33 0.01 260);
  --border-strong: oklch(0.42 0.012 260);

  --text-1: oklch(0.92 0.008 260);
  --text-2: oklch(0.72 0.012 260);
  --text-3: oklch(0.66 0.012 260); /* 0.63 (RC1) gave 4.49:1 on --surface; 0.66 gives 5.07:1 (NB-RC1-DARK-REVIEW D3) */
  --text-on-accent: oklch(0.17 0.02 260);

  --accent: oklch(0.66 0.12 255);
  --accent-hover: oklch(0.72 0.12 255);
  --accent-subtle: oklch(0.32 0.05 255);
  --accent-text: oklch(0.74 0.11 255);

  --danger: oklch(0.66 0.16 27);
  --danger-subtle: oklch(0.31 0.06 27);
  --warning: oklch(0.7 0.12 75);
  --warning-subtle: oklch(0.31 0.05 80);
  --success: oklch(0.68 0.11 150);
  --success-subtle: oklch(0.3 0.05 150);

  --status-inbox: oklch(0.66 0.02 260);
  --status-inbox-bg: oklch(0.3 0.008 260);
  --status-todo: oklch(0.68 0.06 255);
  --status-todo-bg: oklch(0.3 0.02 255);
  --status-delegated: oklch(0.7 0.11 300);
  --status-delegated-bg: oklch(0.31 0.05 300);

  --focus-ring: oklch(0.66 0.12 255 / 0.5);
  --overlay: oklch(0.08 0.01 260 / 0.72);
}

/* ============================================================
   Typographie — Gestion Amarok DS
   Polices système : rapides, natives sur Windows / iOS / Android.
   Corps généreux (15px) — lisibilité TDAH avant densité.
   ============================================================ */

:root {
  --font-ui: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", "Cascadia Mono", Consolas, Menlo, monospace;

  /* Échelle */
  --text-display: 600 26px/1.25 var(--font-ui);   /* Titre d'écran */
  --text-title: 600 20px/1.3 var(--font-ui);      /* Titre de section / modal */
  --text-heading: 600 16px/1.4 var(--font-ui);    /* Titre de bloc / carte */
  --text-body: 400 15px/1.5 var(--font-ui);       /* Corps par défaut */
  --text-body-strong: 600 15px/1.5 var(--font-ui);
  --text-small: 400 13px/1.45 var(--font-ui);     /* Métadonnées */
  --text-caption: 500 11.5px/1.35 var(--font-ui); /* Badges, libellés — souvent en majuscules */
  --text-numeric: 500 13px/1.4 var(--font-mono);  /* Dates, montants, compteurs */

  /* Poids */
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;

  --tracking-caption: 0.04em; /* pour --text-caption en majuscules */
}

/* ============================================================
   Espacement, rayons, ombres — Gestion Amarok DS
   Densité aérée : par défaut, généreux. Base 4px.
   ============================================================ */

:root {
  /* Espacement */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 40px;
  --space-8: 56px;

  /* Hauteurs de contrôle (cibles tactiles ≥ 44px sur mobile) */
  --control-sm: 32px;
  --control-md: 40px;
  --control-lg: 48px;

  /* Rayons */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-full: 999px;

  /* Ombres — douces, jamais dramatiques */
  --shadow-card: 0 1px 2px oklch(0.2 0.01 260 / 0.05), 0 1px 3px oklch(0.2 0.01 260 / 0.04);
  --shadow-raised: 0 2px 6px oklch(0.2 0.01 260 / 0.07), 0 4px 16px oklch(0.2 0.01 260 / 0.06);
  --shadow-overlay: 0 8px 32px oklch(0.2 0.01 260 / 0.18);

  /* Transitions — brèves, fonctionnelles (fade/color uniquement, pas de rebond) */
  --transition-fast: 120ms ease;
  --transition-base: 180ms ease;
}

/* Dark overrides must remain outside and after :root for the cascade. */
[data-theme="dark"] {
  --shadow-card: 0 0 0 1px oklch(1 0 0 / 0.03), 0 1px 2px oklch(0 0 0 / 0.4), 0 2px 6px oklch(0 0 0 / 0.28);
  --shadow-raised: 0 0 0 1px oklch(1 0 0 / 0.04), 0 3px 8px oklch(0 0 0 / 0.45), 0 8px 24px oklch(0 0 0 / 0.35);
  --shadow-overlay: 0 0 0 1px oklch(1 0 0 / 0.06), 0 12px 40px oklch(0 0 0 / 0.6), 0 2px 8px oklch(0 0 0 / 0.4);
}