/* PLANCK - décors et thèmes.
   Chaque décor définit les mêmes jetons : on change de décor sans toucher au reste.
   html[data-decor="epure|egis"][data-theme="dark|light"] */

@font-face { font-family: 'Urbanist'; font-weight: 400; font-display: swap; src: url('../fonts/urbanist-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Urbanist'; font-weight: 500; font-display: swap; src: url('../fonts/urbanist-latin-500-normal.woff2') format('woff2'); }
@font-face { font-family: 'Urbanist'; font-weight: 600; font-display: swap; src: url('../fonts/urbanist-latin-600-normal.woff2') format('woff2'); }
@font-face { font-family: 'Caveat'; font-weight: 400; font-display: swap; src: url('../fonts/caveat-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Caveat'; font-weight: 700; font-display: swap; src: url('../fonts/caveat-latin-700-normal.woff2') format('woff2'); }
@font-face { font-family: 'Special Elite'; font-weight: 400; font-display: swap; src: url('../fonts/special-elite-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Lora'; font-weight: 400; font-display: swap; src: url('../fonts/lora-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Lora'; font-weight: 700; font-display: swap; src: url('../fonts/lora-latin-700-normal.woff2') format('woff2'); }
@font-face { font-family: 'Lora'; font-weight: 400; font-style: italic; font-display: swap; src: url('../fonts/lora-latin-400-italic.woff2') format('woff2'); }
@font-face { font-family: 'Lora'; font-weight: 700; font-style: italic; font-display: swap; src: url('../fonts/lora-latin-700-italic.woff2') format('woff2'); }
@font-face { font-family: 'Urbanist'; font-weight: 700; font-display: swap; src: url('../fonts/urbanist-latin-700-normal.woff2') format('woff2'); }

:root {
  --font-ui: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI Variable Text", "Segoe UI", Roboto, sans-serif;
  --r-s: 10px; --r-m: 15px; --r-l: 20px; --r-xl: 30px;
  --blur: 24px;
  --ease: cubic-bezier(.2, .8, .2, 1);
}

/* ---------- Épuré · sombre (défaut de Ludo : sombre avec touches de blanc) ---------- */
html[data-decor="epure"][data-theme="dark"] {
  --room-top: #07090c; --room-bottom: #0d1117; --bokeh-1: rgba(255,190,120,.55); --bokeh-2: rgba(120,170,255,.42); --bokeh-3: rgba(255,255,255,.22);
  --glass-tint: rgba(200,220,240,.045); --glass-tint-top: rgba(220,235,250,.09); --glass-glare: rgba(255,255,255,.07); --glass-glare-soft: rgba(255,255,255,.035);
  --glass-edge: rgba(255,255,255,.16); --glass-edge-hi: rgba(255,255,255,.30); --glass-frame: rgba(255,255,255,.025);

  --pane-bg: rgba(255,255,255,.035); --pane-top: rgba(255,255,255,.07); --pane-line: rgba(255,255,255,.11); --pane-shine: rgba(255,255,255,.18); --pane-shine-soft: rgba(255,255,255,.035);

  --grid-dot: rgba(255,255,255,.07); --urgent: #e0463a; --perso: #6aa9ff; --pro: #e2c25b;

  --note-1: #e9ecef; --note-2: #f4e7a1; --note-3: #c9d3dc; --note-4: #b9c7b5; --note-ink: #1a1d22;

  --bg: #0a0c0f;
  --bg-glow-1: rgba(120, 140, 170, .16);
  --bg-glow-2: rgba(255, 255, 255, .05);
  --surface: #15181d;
  --surface-2: #1d2128;
  --line: rgba(255, 255, 255, .08);
  --line-strong: rgba(255, 255, 255, .16);
  --text: #f3f5f7;
  --text-2: #a3abb5;
  --title: #ffffff;
  --accent: #f3f5f7;           /* bouton principal : blanc */
  --on-accent: #0a0c0f;
  --link: #ffffff;
  --glass: rgba(26, 30, 37, .58);
  --glass-line: rgba(255, 255, 255, .10);
  --focus: rgba(255, 255, 255, .55);
  --danger: #ff6b5e;
  --ok: #5fd38d;
  --tile-hover: #1f242b;
  --shadow: 0 10px 30px rgba(0, 0, 0, .45);
  --stroke: #f3f5f7;           /* trait de Constance */
}

/* ---------- Épuré · clair ---------- */
html[data-decor="epure"][data-theme="light"] {
  --room-top: #dfe5ea; --room-bottom: #eef1f4; --bokeh-1: rgba(255,214,160,.55); --bokeh-2: rgba(170,200,255,.45); --bokeh-3: rgba(255,255,255,.8);
  --glass-tint: rgba(255,255,255,.30); --glass-tint-top: rgba(255,255,255,.55); --glass-glare: rgba(255,255,255,.55); --glass-glare-soft: rgba(255,255,255,.3);
  --glass-edge: rgba(255,255,255,.9); --glass-edge-hi: #ffffff; --glass-frame: rgba(255,255,255,.25);

  --pane-bg: rgba(255,255,255,.42); --pane-top: rgba(255,255,255,.7); --pane-line: rgba(255,255,255,.95); --pane-shine: #ffffff; --pane-shine-soft: rgba(255,255,255,.35);

  --grid-dot: rgba(10,20,30,.10); --urgent: #c62828; --perso: #2f6fd6; --pro: #b8901e;

  --note-1: #ffffff; --note-2: #f7e9a0; --note-3: #dfe6ec; --note-4: #d6e2d2; --note-ink: #1a1d22;

  --bg: #e9edf1;
  --bg-glow-1: rgba(255, 255, 255, .9);
  --bg-glow-2: rgba(160, 175, 195, .25);
  --surface: #ffffff;
  --surface-2: #f3f5f8;
  --line: rgba(10, 20, 30, .08);
  --line-strong: rgba(10, 20, 30, .16);
  --text: #12161b;
  --text-2: #5b6570;
  --title: #0a0c0f;
  --accent: #12161b;
  --on-accent: #ffffff;
  --link: #12161b;
  --glass: rgba(255, 255, 255, .62);
  --glass-line: rgba(255, 255, 255, .8);
  --focus: rgba(18, 22, 27, .5);
  --danger: #c62f22;
  --ok: #19864a;
  --tile-hover: #fafbfc;
  --shadow: 0 10px 30px rgba(20, 30, 45, .12);
  --stroke: #12161b;
}

/* ---------- Egis · sombre : vert Egis sur bleu nuit ---------- */
html[data-decor="egis"][data-theme="dark"] {
  --room-top: #051820; --room-bottom: #0a2531; --bokeh-1: rgba(171,192,34,.5); --bokeh-2: rgba(0,153,165,.45); --bokeh-3: rgba(231,238,179,.2);
  --glass-tint: rgba(171,192,34,.04); --glass-tint-top: rgba(231,238,179,.08); --glass-glare: rgba(231,238,179,.07); --glass-glare-soft: rgba(231,238,179,.035);
  --glass-edge: rgba(171,192,34,.25); --glass-edge-hi: rgba(231,238,179,.35); --glass-frame: rgba(171,192,34,.03);

  --pane-bg: rgba(171,192,34,.045); --pane-top: rgba(231,238,179,.08); --pane-line: rgba(171,192,34,.2); --pane-shine: rgba(231,238,179,.22); --pane-shine-soft: rgba(231,238,179,.035);

  --grid-dot: rgba(171,192,34,.10); --urgent: #D23839; --perso: #2EABB5; --pro: #ABC022;

  --note-1: #EFF4F5; --note-2: #E7EEB3; --note-3: #B8E2E4; --note-4: #D8E28F; --note-ink: #08212C;

  --font-ui: 'Urbanist', "Segoe UI", sans-serif;
  --bg: #08212C;
  --bg-glow-1: rgba(171, 192, 34, .13);
  --bg-glow-2: rgba(0, 153, 165, .14);
  --surface: #0f2e3a;
  --surface-2: #143846;
  --line: rgba(239, 244, 245, .09);
  --line-strong: rgba(239, 244, 245, .18);
  --text: #EFF4F5;
  --text-2: #8D9DA4;
  --title: #5CBDC5;            /* bleu azur 300 : titres */
  --accent: #ABC022;           /* vert Egis 500 : le clic */
  --on-accent: #08212C;
  --link: #ABC022;
  --glass: rgba(171, 192, 34, .09);
  --glass-line: rgba(171, 192, 34, .22);
  --focus: #E7EEB3;
  --danger: #D23839;
  --ok: #00A656;
  --tile-hover: #133744;
  --shadow: 0 3px 9px rgba(0, 0, 0, .3);
  --stroke: #EFF4F5;
}

/* ---------- Egis · clair : verts durcis (700 à 900), le vert vif se lit mal sur blanc ---------- */
html[data-decor="egis"][data-theme="light"] {
  --room-top: #e3ecee; --room-bottom: #f3f7f7; --bokeh-1: rgba(216,226,143,.6); --bokeh-2: rgba(138,208,212,.5); --bokeh-3: rgba(255,255,255,.8);
  --glass-tint: rgba(255,255,255,.32); --glass-tint-top: rgba(246,249,215,.55); --glass-glare: rgba(255,255,255,.55); --glass-glare-soft: rgba(255,255,255,.3);
  --glass-edge: rgba(171,192,34,.45); --glass-edge-hi: #ffffff; --glass-frame: rgba(255,255,255,.25);

  --pane-bg: rgba(255,255,255,.5); --pane-top: rgba(246,249,215,.75); --pane-line: rgba(171,192,34,.38); --pane-shine: #ffffff; --pane-shine-soft: rgba(255,255,255,.4);

  --grid-dot: rgba(8,33,44,.10); --urgent: #C90D0D; --perso: #00858E; --pro: #788811;

  --note-1: #ffffff; --note-2: #F6F9D7; --note-3: #E6F4F4; --note-4: #E7EEB3; --note-ink: #08212C;

  --font-ui: 'Urbanist', "Segoe UI", sans-serif;
  --bg: #EFF4F5;
  --bg-glow-1: rgba(255, 255, 255, .95);
  --bg-glow-2: rgba(171, 192, 34, .16);
  --surface: #ffffff;
  --surface-2: #F6F9F9;
  --line: rgba(8, 33, 44, .09);
  --line-strong: rgba(8, 33, 44, .18);
  --text: #08212C;
  --text-2: #61747C;
  --title: #017177;            /* bleu azur 700 */
  --accent: #5E6B09;           /* vert Egis 800 */
  --on-accent: #ffffff;
  --link: #5E6B09;
  --glass: rgba(231, 238, 179, .45);
  --glass-line: rgba(120, 136, 17, .25);
  --focus: #788811;
  --danger: #C90D0D;
  --ok: #00914C;
  --tile-hover: #fbfdf3;
  --shadow: 0 3px 9px rgba(0, 0, 0, .15);
  --stroke: #08212C;
}

/* Réduire la transparence : tout devient opaque */
html[data-glass="off"][data-decor][data-theme] {
  --glass: var(--surface-2);
  --blur: 0px;
}