/* ==========================================================================
   Design Tokens — "Spidey élégant" × Apple HIG
   Bleu profond en accent, rouge réservé aux alertes, fond noir premium.
   ========================================================================== */

:root {
  /* ---- Typographie (police système = San Francisco sur Apple) ---- */
  --font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display",
               "Segoe UI", Roboto, Helvetica, Arial, sans-serif,
               "Apple Color Emoji", "Segoe UI Emoji";

  --text-caption:   0.75rem;   /* 12px  – légendes, unités */
  --text-footnote:  0.8125rem; /* 13px  – méta secondaire */
  --text-body:      1.0625rem; /* 17px  – corps iOS standard */
  --text-title:     1.375rem;  /* 22px  – titres de section */
  --text-large:     2rem;      /* 32px  – montants */
  --text-hero:      2.75rem;   /* 44px  – le "Reste à vivre" */

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

  --tracking-tight: -0.02em;   /* titres/montants serrés, façon SF Display */

  /* ---- Espacements (échelle 4pt) ---- */
  --space-xs:  4px;
  --space-sm:  8px;
  --space-md:  16px;
  --space-lg:  24px;
  --space-xl:  32px;
  --space-2xl: 48px;

  /* ---- Rayons ---- */
  --radius-sm:   10px;
  --radius-md:   16px;   /* cartes / boutons */
  --radius-lg:   22px;   /* grandes cartes / modales */
  --radius-full: 999px;  /* pills, boutons ronds */

  /* ---- Couleurs d'accent (Spidey élégant) ---- */
  --accent:        #0A84FF;  /* bleu iOS profond — accent principal */
  --accent-strong: #0060DF;
  --accent-green:  #34C759;  /* positif / reste à vivre sain */
  --accent-red:    #FF3B30;  /* dépassement / alerte (réservé) */
  --accent-orange: #FF9F0A;  /* seuil d'attention */

  /* ---- Mode CLAIR ---- */
  --bg:             #F2F2F7;  /* fond grisé iOS (systemGroupedBackground) */
  --bg-elevated:    #FFFFFF;
  --surface:        #FFFFFF;  /* cartes blanches */
  --surface-2:      #F7F7FA;  /* champs / zones internes */
  --surface-hover:  #F0F0F5;
  --text-primary:   #1C1C1E;
  --text-secondary: #8A8A8E;  /* labels secondaires */
  --text-tertiary:  #B0B0B5;
  --separator:      rgba(60, 60, 67, 0.12);
  --fill-quaternary:rgba(120, 120, 128, 0.08);

  /* Glassmorphism (barre de nav / modales) */
  --glass-bg:   rgba(255, 255, 255, 0.72);
  --glass-brdr: rgba(255, 255, 255, 0.5);
  --glass-blur: 20px;

  /* Ombres douces et diffuses */
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.03);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.06), 0 1px 4px rgba(0, 0, 0, 0.04);
  --shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.10), 0 4px 12px rgba(0, 0, 0, 0.06);

  /* Dégradé "hero" Spidey (bleu → soupçon de rouge) */
  --hero-gradient: linear-gradient(135deg, #0A84FF 0%, #0060DF 60%, #C4122F 140%);

  /* Animations iOS (courbes spring / ease) */
  --ease-ios:    cubic-bezier(0.32, 0.72, 0, 1);      /* le fameux "iOS ease" */
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);   /* léger rebond */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 0.2s;
  --dur-base: 0.35s;
  --dur-slow: 0.5s;

  color-scheme: light;
}

/* ---- Mode SOMBRE (noir profond bleuté iOS) ---- */
:root[data-theme="dark"] {
  --bg:             #0A0A0F;  /* noir profond légèrement bleuté */
  --bg-elevated:    #16161C;
  --surface:        #16161C;  /* cartes gris très foncé */
  --surface-2:      #1F1F27;  /* champs / zones internes */
  --surface-hover:  #26262F;
  --text-primary:   #FFFFFF;
  --text-secondary: #98989F;
  --text-tertiary:  #6A6A72;
  --separator:      rgba(120, 120, 128, 0.28);
  --fill-quaternary:rgba(120, 120, 128, 0.16);

  --accent:        #0A84FF;
  --accent-strong: #409CFF;

  --glass-bg:   rgba(22, 22, 28, 0.68);
  --glass-brdr: rgba(255, 255, 255, 0.08);

  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.35);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.45);
  --shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.55);

  --hero-gradient: linear-gradient(135deg, #0A84FF 0%, #0050C0 55%, #A11026 145%);

  color-scheme: dark;
}

/* Suit le réglage système quand aucun choix explicite n'est fait */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:             #0A0A0F;
    --bg-elevated:    #16161C;
    --surface:        #16161C;
    --surface-2:      #1F1F27;
    --surface-hover:  #26262F;
    --text-primary:   #FFFFFF;
    --text-secondary: #98989F;
    --text-tertiary:  #6A6A72;
    --separator:      rgba(120, 120, 128, 0.28);
    --fill-quaternary:rgba(120, 120, 128, 0.16);
    --accent:        #0A84FF;
    --accent-strong: #409CFF;
    --glass-bg:   rgba(22, 22, 28, 0.68);
    --glass-brdr: rgba(255, 255, 255, 0.08);
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.35);
    --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.45);
    --shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.55);
    --hero-gradient: linear-gradient(135deg, #0A84FF 0%, #0050C0 55%, #A11026 145%);
    color-scheme: dark;
  }
}