/* ============================================================================
   themes/def2.css  —  "DEF2": candidate new default. A TONAL skin — every
   surface is a deep, dark shade of the accent hue, so the whole UI reads as one
   rich color with the bright accent on top. Here: coral over deep oxblood/wine
   near-black, bone text, a touch of punk via a characterful display face.
   Light-handed: character comes from palette + type + warmth, not heavy motifs.

   This is the template for a "colored theme" family — re-tint the surface ramp
   to any accent (cyan→deep teal-black, violet→deep aubergine, …).

   Scoped under :root[data-gg-theme="def2"]; activate with GG.setTheme("def2").
   Fonts (Schibsted Grotesk / Familjen Grotesk / Martian Mono) are VENDORED in /fonts via
   tools/fetch_ui_fonts.py - no CDN import, the app stays fully offline.
   ============================================================================ */

:root[data-gg-theme="def2"] {
  /* tonal surface ramp — deep shades of coral/wine, darkest → lightest */
  --well:#171012; --bg:#201618; --panel:#2a1d1f;
  --card:#332324; --card-sel:#48312f; --chip:#2b1e20;
  --control:#3f2c2c; --inset:#181012;
  --raise:#3f2c2c; --raise-hi:#503a3a;   /* button surface, a clear step above --card; wine muted/desaturated */
  --border:rgba(255,200,205,.11); --divider:rgba(255,200,205,.07);
  /* bone text with the faintest warm/rosy cast (still neutral enough to read) */
  --text:#f4e9e6; --text2:#c9aeb0; --muted:#8f7376; --faint:#62484b;
  /* accent rides --lime so all wiring (glows, fills, focus, selection) follows */
  --lime:#ff8a2e; --on-lime:#2a1200; --lime-dark:#b35810; --lime-rgb:255,138,46;
  --amber:#ffb24a; --on-amber:#241200;
  --accent2:#ff8a2e; --frame-blue:#ff8a2e; --frame-rgb:255,138,46;
  /* danger: a purer, brighter red so Delete still reads distinct from coral */
  --danger:#ff4d4d; --on-danger:#2a0404; --danger-hi:#ff6a6a; --warn:var(--amber);
  /* type: edgy display, characterful body, chunky technical mono */
  --f-head:'Schibsted Grotesk',system-ui,sans-serif;
  --f-gg:'Schibsted Grotesk',system-ui,sans-serif;
  --f-body:'Familjen Grotesk',system-ui,sans-serif;
  --f-mono:'Martian Mono',ui-monospace,monospace;
  --radius:5px; --radius-lg:9px;
}

/* headings: tighter, bolder — a little attitude without shouting */
[data-gg-theme="def2"] h1, [data-gg-theme="def2"] h2,
[data-gg-theme="def2"] h3, [data-gg-theme="def2"] h4,
[data-gg-theme="def2"] .gg-panel-title { letter-spacing:-.01em; font-weight:800; }
[data-gg-theme="def2"] .gg-word { font-weight:800; letter-spacing:-.02em; }
[data-gg-theme="def2"] .gg-logo .gg-word b { font-family:var(--f-gg); color:var(--lime); }

/* Buttons are owned by the encapsulated <gg-button> (tokens drive the accent) and
   the borderless base button in gg-components.css. DEF2 deliberately does NOT
   override them — the old class-based block re-added borders and re-stylized the
   flat header chrome (collapse/rail), which is exactly the "heavy" look to avoid. */

/* offline stamp + motif, on-palette */
[data-gg-theme="def2"] .gg-offline { display:inline-flex; align-items:center; gap:6px;
  font-family:var(--f-mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--lime); border:1px solid rgba(var(--lime-rgb),.35); border-radius:5px; padding:2px 7px; }
[data-gg-theme="def2"] .gg-offline .dot { width:6px; height:6px; border-radius:50%;
  background:var(--lime); box-shadow:0 0 7px var(--lime); }
[data-gg-theme="def2"] .hazard { height:10px; border-radius:3px;
  background:repeating-linear-gradient(135deg, var(--lime) 0 12px, #180a0b 12px 24px); }
[data-gg-theme="def2"] button.armed { background:var(--amber); color:var(--on-amber); font-weight:700; }

/* scrollbar thumb warms to coral on hover */
[data-gg-theme="def2"] ::-webkit-scrollbar-thumb:hover { background:var(--lime-dark); }