/* =========================================================================
   Pronotempo — design tokens (Liquid Glass)
   Couleurs Tempo en accents, neutres froids, verre translucide en couches.
   ========================================================================= */

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/Inter-Variable.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/Inter-Variable-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329,
    U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  color-scheme: light;

  /* Couleurs Tempo */
  --tempo-blue: #2453d8;
  --tempo-blue-strong: #1a3fb0;
  --tempo-blue-soft: rgba(36, 83, 216, 0.13);
  --tempo-white: #ffffff;
  --tempo-white-edge: #b9c3d9;          /* contour du blanc pour rester lisible sur fond clair */
  --tempo-white-pearl: linear-gradient(135deg, #ffffff 0%, #eef1f8 45%, #ffffff 70%, #e3e8f3 100%);
  --tempo-red: #d92638;
  --tempo-red-strong: #b01828;
  --tempo-red-soft: rgba(217, 38, 56, 0.12);
  --on-blue: #ffffff;
  --on-red: #ffffff;
  --on-white: #13203a;

  /* Sphères de couleur (dégradé radial + volume) */
  --orb-blue: radial-gradient(circle at 32% 26%, #a9c0ff 0%, #2f5fe6 42%, #13308a 100%);
  --orb-white: radial-gradient(circle at 32% 26%, #ffffff 0%, #f1f4fa 45%, #c7d0e4 100%);
  --orb-red: radial-gradient(circle at 32% 26%, #ffa3ad 0%, #e1323f 42%, #8a0f1c 100%);
  --orb-blue-shadow: inset 0 -4px 8px rgba(5, 15, 60, 0.35), inset 0 2px 4px rgba(255, 255, 255, 0.5);
  --orb-white-shadow: inset 0 -3px 6px rgba(60, 80, 130, 0.2), 0 0 0 1px rgba(150, 165, 200, 0.6);
  --orb-red-shadow: inset 0 -4px 8px rgba(60, 0, 10, 0.35), inset 0 2px 4px rgba(255, 255, 255, 0.45);

  /* Boutons pleins (dégradé, texte blanc dans les deux thèmes) */
  --fill-blue: linear-gradient(180deg, #3a69f0 0%, #1f48c6 100%);
  --fill-red: linear-gradient(180deg, #d92638 0%, #b01828 100%);
  --fill-blue-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55), inset 0 -2px 6px rgba(0, 20, 90, 0.25), 0 10px 24px rgba(36, 83, 216, 0.38);
  --fill-red-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), inset 0 -2px 6px rgba(80, 0, 10, 0.25), 0 10px 22px rgba(217, 38, 56, 0.36);

  /* Neutres */
  --bg: #e6ecf8;
  --bg-elevated: #f6f8fd;
  --text: #13203a;
  --text-muted: #46526e;               /* AA sur verre clair, même au-dessus du halo bleu */
  --text-on-bg: #343f5a;               /* texte posé directement sur le fond animé */
  --text-subtle: #5d6884;
  --border: rgba(255, 255, 255, 0.7);
  --border-strong: rgba(19, 32, 58, 0.14);
  --line: rgba(19, 32, 58, 0.08);      /* séparateurs fins */
  --track: rgba(19, 32, 58, 0.14);     /* rail des interrupteurs */
  --field: rgba(255, 255, 255, 0.62);  /* fond des champs */
  --focus: #1a3fb0;
  --success: #0f7041;
  --success-soft: rgba(18, 128, 74, 0.12);
  --switch-on: #2fae64;
  --warning: #8a5100;
  --warning-soft: rgba(219, 145, 0, 0.17);
  --todo: #6b3fd4;                     /* « à faire » : violet, hors des couleurs Tempo et des états */
  --todo-soft: rgba(107, 63, 212, 0.1); /* fond des lignes « à faire » */
  --danger: var(--tempo-red-strong);
  --danger-soft: var(--tempo-red-soft);
  --gold: #a86b00;

  /* Verre — le flou se règle avec une seule variable : --blur */
  --blur: 26px;
  --glass-blur: var(--blur);
  --glass-saturate: 185%;
  --glass-bg: rgba(255, 255, 255, 0.5);
  --glass-bg-strong: rgba(255, 255, 255, 0.76);   /* voile renforcé sous le texte */
  --glass-bg-subtle: rgba(255, 255, 255, 0.36);
  --glass-border: rgba(255, 255, 255, 0.8);
  --glass-hi: rgba(255, 255, 255, 0.95);
  --glass-highlight: linear-gradient(180deg, rgba(255, 255, 255, 0.75) 0%, rgba(255, 255, 255, 0) 46%);
  --glass-rim: linear-gradient(135deg, rgba(255, 255, 255, 0.75), rgba(255, 255, 255, 0) 32%, rgba(255, 255, 255, 0) 68%, rgba(255, 255, 255, 0.35));
  --glass-opaque: #f8faff;            /* repli sans backdrop-filter */
  --shadow-1: 0 1px 3px rgba(19, 32, 58, 0.06), 0 4px 12px rgba(19, 32, 58, 0.08);
  --shadow-2: 0 2px 6px rgba(19, 32, 58, 0.06), 0 18px 44px rgba(19, 32, 58, 0.12);
  --shadow-3: 0 6px 16px rgba(19, 32, 58, 0.10), 0 30px 70px rgba(19, 32, 58, 0.16);
  --inner-light: inset 0 1px 0 var(--glass-hi), inset 0 -1px 0 var(--line);

  /* Arrière-plan vivant */
  --blob-blue: rgba(36, 83, 216, 0.42);
  --blob-red: rgba(217, 38, 56, 0.38);
  --blob-pearl: #ffffff;
  --white-swatch-opacity: 0.8;

  /* Typographie */
  --font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --fs-xs: 0.75rem;
  --fs-sm: 0.875rem;
  --fs-md: 1rem;
  --fs-lg: 1.125rem;
  --fs-xl: 1.375rem;
  --fs-2xl: clamp(1.75rem, 1.4rem + 1.4vw, 2.5rem);
  --fs-3xl: clamp(2rem, 1.4rem + 2.6vw, 3rem);

  /* Formes et espacements */
  --radius-sm: 14px;
  --radius-md: 22px;
  --radius-lg: 28px;
  --radius-xl: 32px;
  --radius-pill: 999px;
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --gutter: 20px;

  /* Mouvement */
  --spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast: 140ms;
  --dur: 260ms;

  --tabbar-h: 64px;
  --tabbar-gap: 22px;
  --sidebar-w: 264px;
}
@media (min-width: 960px) {
  :root { --blur: 28px; --gutter: 24px; }
}

/* --- Mode sombre : système, sauf choix explicite « clair » --- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --tempo-blue: #5b84ff;
    --tempo-blue-strong: #9db7ff;
    --tempo-blue-soft: rgba(91, 132, 255, 0.2);
    --tempo-white-edge: #8b97b3;
    --tempo-white-pearl: linear-gradient(135deg, #ffffff 0%, #e3e8f3 50%, #f7f9fd 100%);
    --tempo-red: #ff5464;
    --tempo-red-strong: #ff8591;
    --tempo-red-soft: rgba(255, 84, 100, 0.16);
    --bg: #070c1a;
    --bg-elevated: #0f172c;
    --text: #edf1fb;
    --text-muted: #b4bed6;
  --text-on-bg: #c3cbe0;
    --text-on-bg: #c3cbe0;
    --text-subtle: #97a3c0;
    --border: rgba(255, 255, 255, 0.12);
    --border-strong: rgba(255, 255, 255, 0.18);
    --line: rgba(255, 255, 255, 0.1);
    --track: rgba(255, 255, 255, 0.16);
    --field: rgba(10, 16, 34, 0.55);
    --focus: #9db7ff;
    --success: #5ad796;
    --success-soft: rgba(90, 215, 150, 0.15);
    --switch-on: #24a05a;
    --warning: #ffc062;
    --warning-soft: rgba(255, 192, 98, 0.15);
    --todo: #b9a2ff;
    --todo-soft: rgba(185, 162, 255, 0.14);
    --gold: #ffcf6a;
    --glass-bg: rgba(26, 36, 66, 0.5);
    --glass-bg-strong: rgba(16, 24, 45, 0.8);
    --glass-bg-subtle: rgba(30, 41, 72, 0.35);
    --glass-border: rgba(255, 255, 255, 0.14);
    --glass-hi: rgba(255, 255, 255, 0.18);
    --glass-highlight: linear-gradient(180deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0) 46%);
    --glass-rim: linear-gradient(135deg, rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0) 32%, rgba(255, 255, 255, 0) 68%, rgba(255, 255, 255, 0.18));
    --glass-opaque: #121a31;
    --shadow-1: 0 1px 3px rgba(0, 0, 0, 0.3), 0 4px 12px rgba(0, 0, 0, 0.3);
    --shadow-2: 0 2px 6px rgba(0, 0, 0, 0.35), 0 18px 44px rgba(0, 0, 0, 0.45);
    --shadow-3: 0 6px 16px rgba(0, 0, 0, 0.4), 0 30px 70px rgba(0, 0, 0, 0.5);
    --blob-blue: rgba(52, 96, 255, 0.55);
    --blob-red: rgba(255, 60, 80, 0.34);
    --blob-pearl: rgba(140, 165, 230, 0.25);
    --white-swatch-opacity: 0.18;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --tempo-blue: #5b84ff;
  --tempo-blue-strong: #9db7ff;
  --tempo-blue-soft: rgba(91, 132, 255, 0.2);
  --tempo-white-edge: #8b97b3;
  --tempo-white-pearl: linear-gradient(135deg, #ffffff 0%, #e3e8f3 50%, #f7f9fd 100%);
  --tempo-red: #ff5464;
  --tempo-red-strong: #ff8591;
  --tempo-red-soft: rgba(255, 84, 100, 0.16);
  --bg: #070c1a;
  --bg-elevated: #0f172c;
  --text: #edf1fb;
  --text-muted: #b4bed6;
  --text-on-bg: #c3cbe0;
  --text-subtle: #97a3c0;
  --border: rgba(255, 255, 255, 0.12);
  --border-strong: rgba(255, 255, 255, 0.18);
  --line: rgba(255, 255, 255, 0.1);
  --track: rgba(255, 255, 255, 0.16);
  --field: rgba(10, 16, 34, 0.55);
  --focus: #9db7ff;
  --success: #5ad796;
  --success-soft: rgba(90, 215, 150, 0.15);
  --switch-on: #24a05a;
  --warning: #ffc062;
  --warning-soft: rgba(255, 192, 98, 0.15);
  --todo: #b9a2ff;
  --todo-soft: rgba(185, 162, 255, 0.14);
  --gold: #ffcf6a;
  --glass-bg: rgba(26, 36, 66, 0.5);
  --glass-bg-strong: rgba(16, 24, 45, 0.8);
  --glass-bg-subtle: rgba(30, 41, 72, 0.35);
  --glass-border: rgba(255, 255, 255, 0.14);
  --glass-hi: rgba(255, 255, 255, 0.18);
  --glass-highlight: linear-gradient(180deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0) 46%);
  --glass-rim: linear-gradient(135deg, rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0) 32%, rgba(255, 255, 255, 0) 68%, rgba(255, 255, 255, 0.18));
  --glass-opaque: #121a31;
  --shadow-1: 0 1px 3px rgba(0, 0, 0, 0.3), 0 4px 12px rgba(0, 0, 0, 0.3);
  --shadow-2: 0 2px 6px rgba(0, 0, 0, 0.35), 0 18px 44px rgba(0, 0, 0, 0.45);
  --shadow-3: 0 6px 16px rgba(0, 0, 0, 0.4), 0 30px 70px rgba(0, 0, 0, 0.5);
  --blob-blue: rgba(52, 96, 255, 0.55);
  --blob-red: rgba(255, 60, 80, 0.34);
  --blob-pearl: rgba(140, 165, 230, 0.25);
  --white-swatch-opacity: 0.18;
}