/* ===========================================================================
   Design tokens.

   Two skins live here and nowhere else. Everything in app.css is written
   against these variables, so a skin is a set of values, not a second
   stylesheet of its own. Classic adds chrome on top in classic.css, but the
   colours, type and spacing all come from here.

   --accent is written onto <html> at render time from Panel Settings, so one
   colour repaints buttons, links, charts and badges across both skins.
   =========================================================================== */

:root {
  /* filled in per skin below; these are the Modern dark values so that a
     stylesheet loaded before the attribute lands still looks right */
  color-scheme: dark;

  --bg-canvas: #020617;
  --bg-surface: #0f172a;
  --bg-surface-2: #0b1220;
  --bg-elevated: #111c33;
  --bg-hover: #16233d;
  --bg-well: #020617;

  --border: #1e293b;
  --border-strong: #334155;
  --border-faint: #16202f;

  --fg: #f1f5f9;
  --fg-muted: #cbd5e1;
  --fg-dim: #94a3b8;
  --fg-faint: #64748b;

  --accent: #6d70f7;
  --accent-soft: #6d70f72e;
  --accent-dim: #6d70f761;
  --on-accent: #ffffff;

  --ok: #10b981;
  --warn: #f59e0b;
  --bad: #f43f5e;
  --info: #38bdf8;

  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --font-body: "Onest", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --fs-base: .85rem;
  --fs-micro: .64rem;
  --fs-small: .76rem;

  --radius-card: .75rem;
  --radius-control: .4rem;
  --radius-pill: 999px;

  --row-py: .65rem;
  --control-py: .5rem;
  --gap: 1rem;
  --card-pad: 1.15rem;

  --shadow-sm: 0 1px 2px #0006;
  --shadow-md: 0 8px 20px -6px #00000080;
  --shadow-lg: 0 24px 48px -12px #000000a6;

  --grad-head: none;
  --grad-nav: none;
  --grad-btn: none;
  --nav-fg: var(--fg-muted);
  --nav-fg-active: var(--fg);
  --nav-bg: var(--bg-surface);
  --nav-section-fg: var(--fg-dim);
  --topbar-bg: var(--bg-surface);
  --topbar-fg: var(--fg);

  --wash-shell:
    radial-gradient(60rem 40rem at 22% 8%, var(--accent-soft), transparent 60%),
    radial-gradient(48rem 34rem at 100% 100%, #38bdf814, transparent 60%);

  --table-head-bg: var(--bg-surface-2);
  --table-head-fg: var(--fg-dim);
  --table-stripe: transparent;
  --sidebar-w: 15rem;
  --topbar-h: 3.25rem;
}

/* --------------------------------------------------------------- Modern -- */
[data-skin="modern"][data-mode="dark"] {
  color-scheme: dark;
}

[data-skin="modern"][data-mode="light"] {
  color-scheme: light;

  --bg-canvas: #f6f7fb;
  --bg-surface: #ffffff;
  --bg-surface-2: #f1f5f9;
  --bg-elevated: #ffffff;
  --bg-hover: #f1f5f9;
  --bg-well: #f6f7fb;

  --border: #e2e8f0;
  --border-strong: #cbd5e1;
  --border-faint: #eef2f7;

  --fg: #0f172a;
  --fg-muted: #475569;
  --fg-dim: #64748b;
  --fg-faint: #94a3b8;

  --shadow-sm: 0 1px 2px #0f172a0d;
  --shadow-md: 0 4px 10px -2px #0f172a14, 0 2px 4px -2px #0f172a0a;
  --shadow-lg: 0 14px 28px #0f172a1a, 0 4px 8px #0f172a0d;

  --nav-bg: #ffffff;
  --topbar-bg: #ffffff;
  --table-head-bg: #f8fafc;
}

/* -------------------------------------------------------------- Classic -- */
/* Dense, grey, Helvetica, 3px corners: the look every operator already knows
   from the panels this one replaces. Always light - the moon switch hides. */
[data-skin="classic"] {
  color-scheme: light;

  --bg-canvas: #f9f9f9;
  --bg-surface: #ffffff;
  --bg-surface-2: #dcdcdc;
  --bg-elevated: #ffffff;
  --bg-hover: #f0f0f0;
  --bg-well: #f5f5f5;

  --border: #cccccc;
  --border-strong: #b3b3b3;
  --border-faint: #e3e3e3;

  --fg: #333333;
  --fg-muted: #555555;
  --fg-dim: #777777;
  --fg-faint: #999999;

  --on-accent: #ffffff;

  --font-display: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-body: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-mono: "Helvetica Neue", Helvetica, Arial, sans-serif;

  --fs-base: 12px;
  --fs-micro: 10px;
  --fs-small: 11px;

  --radius-card: 3px;
  --radius-control: 3px;
  --radius-pill: 3px;

  --row-py: 6px;
  --control-py: 5px;
  --gap: .75rem;
  --card-pad: .75rem;

  --shadow-sm: 0 1px 1px #0000000f;
  --shadow-md: 0 1px 2px #00000014;
  --shadow-lg: 0 2px 6px #0000001f;

  --grad-head: linear-gradient(180deg, #f1f1f1, #dbdbdb);
  --grad-nav: linear-gradient(180deg, #383838, #1d1c1c);
  --grad-btn: linear-gradient(180deg, #ffffff, #e6e6e6);

  --nav-bg: #2b2a2a;
  --nav-fg: #c9c9c9;
  --nav-fg-active: #ffffff;
  --nav-section-fg: #9a9a9a;
  --topbar-bg: #2b2a2a;
  --topbar-fg: #eeeeee;

  --wash-shell: none;

  --table-head-bg: #f3f3f3;
  --table-head-fg: #444444;
  --table-stripe: #fafafa;

  --sidebar-w: 14.5rem;
  --topbar-h: 2.6rem;
}