/* Asgard — charte « Glacier · Cobalt », version sobre (sans version sobre, sans grille — décision du 2026-10-16).
   Couleurs, typographie, espacements, coins et ombres du bouton : repris tels quels de la charte.
   La matière « verre » est remplacée par des surfaces pleines (trois niveaux) et le fond est uni.
   Les noms --glass-* sont gardés comme alias des surfaces pour ne pas toucher aux feuilles des apps.
   Thème : data-theme="dark" sur <html> pour le sombre, clair sinon. */

:root {
  /* Brand — Cobalt */
  --cobalt-500: oklch(0.47 0.16 262);
  --cobalt-300: oklch(0.74 0.12 258);
  --cobalt-ink: #0a1230;
  --info-500: oklch(0.60 0.07 210);
  --info-300: oklch(0.76 0.06 205);

  /* Neutrals (cool) */
  --gray-50: #eef0f3;
  --gray-600: #4a5263;
  --gray-950: #0f1420;
  --night-950: #0a0d13;
  --night-50: #eef2f8;
  --night-400: #9aa3b5;

  /* Status (light) */
  --ok-500: oklch(0.55 0.13 150);
  --warn-500: oklch(0.62 0.14 65);
  --crit-500: oklch(0.55 0.18 25);
  --idle-500: oklch(0.55 0.02 250);
  /* Status (dark) */
  --ok-300: oklch(0.78 0.14 150);
  --warn-300: oklch(0.82 0.13 80);
  --crit-300: oklch(0.72 0.16 25);
  --idle-300: oklch(0.70 0.02 250);

  /* App family badges (fixed in both themes) */
  --app-argos: #E5484D;
  --app-fit: #3E8E5A;
  --app-forge: #E8833A;
  --app-hub: #2DD4BF;
  --app-notes: #F2C230;
  --app-remote: #9B8CFF;
  --app-badge-ink: #0A0C11;

  /* Semantic — light theme */
  --bg: var(--gray-50);
  --text: var(--gray-950);
  --text-2: var(--gray-600);
  --accent: var(--cobalt-500);
  --on-accent: #ffffff;
  --accent-soft: color-mix(in oklch, var(--accent) 14%, transparent);
  --info: var(--info-500);
  --ok: var(--ok-500);
  --warn: var(--warn-500);
  --crit: var(--crit-500);
  --idle: var(--idle-500);
  --ok-soft: color-mix(in oklch, var(--ok) 13%, transparent);
  --warn-soft: color-mix(in oklch, var(--warn) 13%, transparent);
  --crit-soft: color-mix(in oklch, var(--crit) 13%, transparent);
  --idle-soft: color-mix(in oklch, var(--idle) 13%, transparent);
  --line: rgba(0, 0, 0, .06);
  --control-off: rgba(0, 0, 0, .10);
  --terminal-bg: rgba(14, 18, 28, .90);
  --terminal-text: #dde4ee;
  --terminal-dim: #8b95a7;
  --terminal-prompt: #9cc3f0;
  --terminal-ok: #7fd8a0;
  --terminal-warn: #f1c56a;
  --terminal-crit: #ff8f80;
}

[data-theme="dark"] {
  --bg: var(--night-950);
  --text: var(--night-50);
  --text-2: var(--night-400);
  --accent: var(--cobalt-300);
  --on-accent: var(--cobalt-ink);
  --accent-soft: color-mix(in oklch, var(--accent) 20%, transparent);
  --info: var(--info-300);
  --ok: var(--ok-300);
  --warn: var(--warn-300);
  --crit: var(--crit-300);
  --idle: var(--idle-300);
  --ok-soft: color-mix(in oklch, var(--ok) 20%, transparent);
  --warn-soft: color-mix(in oklch, var(--warn) 20%, transparent);
  --crit-soft: color-mix(in oklch, var(--crit) 20%, transparent);
  --idle-soft: color-mix(in oklch, var(--idle) 20%, transparent);
  --line: rgba(255, 255, 255, .08);
  --control-off: rgba(255, 255, 255, .16);
  --terminal-bg: rgba(0, 0, 0, .42);
}

:root {
  --font-sans: "Neue Haas Grotesk Display Pro", "neue-haas-grotesk-display", "Neue Haas Grotesk Text Pro", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-text: "Neue Haas Grotesk Text Pro", "neue-haas-grotesk-text", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-logo: "Archivo", "Archivo Variable", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;

  /* Logotype: Archivo Expanded Black, lowercase */
  --logo-stretch: 125%;
  --logo-weight: 900;
  --logo-tracking: -0.04em;

  /* Scale (desktop reference) */
  --type-display-size: 44px;  --type-display-weight: 700; --type-display-tracking: -0.03em;
  --type-title1-size: 28px;   --type-title1-weight: 600;  --type-title1-tracking: -0.02em;
  --type-title2-size: 20px;   --type-title2-weight: 600;  --type-title2-tracking: -0.01em;
  --type-body-size: 16px;     --type-body-weight: 400;
  --type-caption-size: 13px;  --type-caption-weight: 500; --type-caption-tracking: 0.01em;
  --type-mono-size: 13px;
  --type-label-size: 11px;    --type-label-tracking: 0.1em; /* mono uppercase labels */

  /* Device sizes */
  --ios-display: 34px; --ios-title1: 24px; --ios-body: 17px; --ios-caption: 13px;
  --desk-display: 40px; --desk-title1: 26px; --desk-body: 14px; --desk-caption: 12px;

  --leading-tight: 1.15;
  --leading-body: 1.45;
}

:root {
  --space-1: 4px;
  --space-2: 6px;
  --space-3: 8px;
  --space-4: 10px;
  --space-5: 12px;
  --space-6: 14px;
  --space-7: 16px;
  --space-8: 18px;
  --space-9: 20px;
  --space-10: 24px;
  --space-11: 28px;

  --radius-card: 24px;
  --radius-control: 16px;
  --radius-button: 16px;
  --radius-icon: 20px;   /* app icon tile at 76px */
  --radius-mark: 15px;   /* logo mark at 54px */
  --radius-pill: 999px;  /* search fields, tab bars, badges, switches */

  --control-h: 44px;
  --control-h-sm: 36px;
  --field-h: 46px;
}

/* ---------- Surfaces pleines (remplacent les trois épaisseurs de verre) ----------
   1 : barres et contrôles · 2 : cartes et champs · 3 : barres latérales et feuilles. */
:root {
  --surface-1: #ffffff;
  --surface-2: #ffffff;
  --surface-3: #f7f8fa;
  --border-1: rgba(15, 20, 32, 0.10);
  --elev-1: 0 1px 2px rgba(15, 20, 32, 0.06);
  --elev-2: 0 1px 3px rgba(15, 20, 32, 0.06), 0 1px 2px rgba(15, 20, 32, 0.04);
  --elev-3: 0 12px 32px rgba(15, 20, 32, 0.12), 0 2px 6px rgba(15, 20, 32, 0.06);
  --thumb-shadow: 0 0 0 .5px rgba(0,0,0,.06), 0 3px 8px rgba(0,0,0,.16), 0 1px 1px rgba(0,0,0,.08);
  --button-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 6px 16px rgba(0,0,0,.12);
}
[data-theme="dark"] {
  --surface-1: #171c27;
  --surface-2: #131823;
  --surface-3: #10141d;
  --border-1: rgba(255, 255, 255, 0.08);
  --elev-1: 0 0 0 0 transparent;
  --elev-2: 0 1px 2px rgba(0, 0, 0, 0.3);
  --elev-3: 0 16px 40px rgba(0, 0, 0, 0.5);
}
/* Alias : anciens noms de la matière verre, désormais des surfaces pleines, sans flou. */
:root, [data-theme="dark"] {
  --glass-bg-1: var(--surface-1);
  --glass-bg-2: var(--surface-2);
  --glass-bg-3: var(--surface-3);
  --glass-filter-1: none;
  --glass-filter-2: none;
  --glass-filter-3: none;
  --glass-border: 1px solid var(--border-1);
  --glass-rim: 0 0 0 0 transparent;
  --glass-shadow-1: var(--elev-1);
  --glass-shadow-2: var(--elev-2);
  --glass-shadow-3: var(--elev-3);
  --lens-shadow: var(--thumb-shadow);
  --lens-highlight: linear-gradient(#fff, #fff);
  /* Fond uni : plus de halos ni de grille. */
  --wallpaper: var(--bg);
}

/* Surfaces (classes historiques .ag-glass-*). */
.ag-glass-1, .ag-glass-2, .ag-glass-3 { border: var(--glass-border); color: var(--text); }
.ag-glass-1 { background: var(--surface-1); box-shadow: var(--elev-1); }
.ag-glass-2 { background: var(--surface-2); box-shadow: var(--elev-2); }
.ag-glass-3 { background: var(--surface-3); box-shadow: var(--elev-3); }

/* Aucun flou d'arrière-plan nulle part (ni verre, ni voile flouté derrière les fenêtres). */
*, *::before, *::after { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }

/* Logo : symbole « a » cerné à ombre décalée + logotype Archivo Expanded Black, minuscules. */
.ag-logo { display: inline-flex; align-items: center; gap: 10px; color: var(--text); text-decoration: none; }
.ag-mark {
  width: 30px; height: 30px; box-sizing: border-box; border-radius: 9px; border: 2px solid var(--text);
  background: var(--bg); box-shadow: 2.5px 2.5px 0 var(--text); display: inline-flex; align-items: center;
  justify-content: center; flex-shrink: 0; color: var(--text);
}
.ag-mark > span, .ag-word {
  font-family: var(--font-logo); font-stretch: var(--logo-stretch); font-weight: var(--logo-weight);
  letter-spacing: var(--logo-tracking); line-height: 1;
}
.ag-mark > span { font-size: 18px; padding-bottom: 2px; }
.ag-word { font-size: 19px; padding-bottom: 2px; white-space: nowrap; color: var(--text); }
.ag-word > span { color: var(--accent); }
.ag-mark.ag-md { width: 54px; height: 54px; border-width: 3px; border-radius: 15px; box-shadow: 4px 4px 0 var(--text); }
.ag-mark.ag-md > span { font-size: 34px; padding-bottom: 4px; }
.ag-logo.ag-md { gap: 14px; }
.ag-logo.ag-md .ag-word { font-size: 44px; padding-bottom: 4px; }

/* ---------- Couleur de l'app (2026-10-16) ----------
   Chaque app prend la couleur de sa pastille pour ses éléments interactifs.
   --accent       : textes, liens, icônes actives, focus (lisible sur le fond du thème) ;
   --accent-fill  : aplats (bouton principal, interrupteur activé) ; --on-accent-fill : texte posé dessus.
   Activé par <html data-app="…">. Argos garde le Cobalt : son rouge est la couleur des alertes critiques. */
:root {
  --accent-fill: var(--accent);
  --on-accent-fill: var(--on-accent);
}
:root[data-app="notes"] { --accent: #8a6700; --on-accent: #ffffff; --accent-fill: #f2c230; --on-accent-fill: #0a0c11; }
:root[data-app="notes"][data-theme="dark"] { --accent: #f2c230; --on-accent: #0a0c11; --accent-fill: #f2c230; --on-accent-fill: #0a0c11; }
:root[data-app="remote"] { --accent: #5b47d6; --on-accent: #ffffff; --accent-fill: #6a55e8; --on-accent-fill: #ffffff; }
:root[data-app="remote"][data-theme="dark"] { --accent: #9b8cff; --on-accent: #0a0c11; --accent-fill: #9b8cff; --on-accent-fill: #0a0c11; }
:root[data-app="forge"] { --accent: #a8500f; --on-accent: #ffffff; --accent-fill: #e8833a; --on-accent-fill: #0a0c11; }
:root[data-app="forge"][data-theme="dark"] { --accent: #f0954f; --on-accent: #0a0c11; --accent-fill: #f0954f; --on-accent-fill: #0a0c11; }
:root[data-app="hub"] { --accent: #0f766e; --on-accent: #ffffff; --accent-fill: #2dd4bf; --on-accent-fill: #0a0c11; }
:root[data-app="hub"][data-theme="dark"] { --accent: #2dd4bf; --on-accent: #0a0c11; --accent-fill: #2dd4bf; --on-accent-fill: #0a0c11; }
:root[data-app="fit"] { --accent: #2e7a49; --on-accent: #ffffff; --accent-fill: #2e7a49; --on-accent-fill: #ffffff; }
:root[data-app="fit"][data-theme="dark"] { --accent: #6cc58c; --on-accent: #0a0c11; --accent-fill: #6cc58c; --on-accent-fill: #0a0c11; }