/* GSC Control Room design tokens. The estate's ONLY source of hex values.
   Canon: website/portal/design-system/colors_and_type.css.
   Dark scale + status trio follow the portal: website/portal/app/globals.css.
   Every surface links this BEFORE its own stylesheet. deploy.sh copies it
   over each surface on the VPS, so edit it HERE only. */

:root {
  /* brand (canon) */
  --gsc-navy: #1d2d44;
  --gsc-sky: #5da9e9;
  --gsc-sky-hover: #4a96d6;
  --gsc-sky-dark: #7ab8ee;
  --gsc-blue-deep: #3e5c76;
  --gsc-steel: #6c7a89;
  --gsc-grey: #9aabb8;
  --navy: #1d2d44;

  /* status trio (portal dialect, same in both themes) */
  --good: #10b981;
  --warn: #f59e0b;
  --bad: #f43f5e;

  /* badge palette (canon family, purple is dead) */
  --badge-sky: #5da9e9;
  --badge-deep: #3e5c76;
  --badge-steel: #6c7a89;
  --badge-light: #7ab8ee;

  /* radii (canon scale) */
  --radius: 8px;
  --radius-lg: 14px;
  --radius-xl: 20px;
  --radius-pill: 999px;

  /* shadows (canon, navy-tinted; blue glow for primary actions only) */
  --shadow-sm: 0 1px 3px rgba(29,45,68,0.08), 0 1px 2px rgba(29,45,68,0.05);
  --shadow-md: 0 4px 16px rgba(29,45,68,0.10), 0 2px 6px rgba(29,45,68,0.06);
  --shadow-lg: 0 12px 40px rgba(29,45,68,0.13), 0 4px 12px rgba(29,45,68,0.08);
  --shadow-blue: 0 2px 8px rgba(93,169,233,0.35);
  --shadow-blue-lg: 0 4px 24px rgba(93,169,233,0.40);

  /* motion (canon) */
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-soft: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-base: ease;
  --transition: 0.2s var(--ease-base);

  /* type */
  --sans: 'Poppins', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font: 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Consolas, monospace;

  /* surfaces: dark is the default (apps standalone, no shell) */
  --bg: #0f1722;
  --panel: #17243a;
  --panel-2: #1d2d44;
  --border: rgba(255,255,255,0.08);
  --border-2: rgba(255,255,255,0.16);
  --text: #e6ecf3;
  --muted: #8a9bad;
  --muted-2: #94a0ad;
  --accent: #5da9e9;
  --accent-2: #7ab8ee;
  --hover-accent: #7ab8ee;
  color-scheme: dark;
}

:root[data-theme="light"] {
  --bg: #f7f9fb;
  --panel: #ffffff;
  --panel-2: #eef1f5;
  --border: rgba(29,45,68,0.12);
  --border-2: rgba(29,45,68,0.22);
  --text: #1d2d44;
  --muted: #6c7a89;
  --muted-2: #8793a0;
  --accent: #5da9e9;
  --accent-2: #3e5c76;
  --hover-accent: #4a96d6;
  color-scheme: light;
}

:root[data-theme="dark"] {
  --bg: #0f1722;
  --panel: #17243a;
  --panel-2: #1d2d44;
  --border: rgba(255,255,255,0.08);
  --border-2: rgba(255,255,255,0.16);
  --text: #e6ecf3;
  --muted: #8a9bad;
  --muted-2: #94a0ad;
  --accent: #5da9e9;
  --accent-2: #7ab8ee;
  --hover-accent: #7ab8ee;
  color-scheme: dark;
}

/* Surfaces that keep a literal "system" preference on the element (the login
   page does; the hub bootstrap resolves it to light/dark instead) follow the
   device. The dark branch is the :root default above, so only light is needed. */
@media (prefers-color-scheme: light) {
  :root[data-theme="system"] {
    --bg: #f7f9fb;
    --panel: #ffffff;
    --panel-2: #eef1f5;
    --border: rgba(29,45,68,0.12);
    --border-2: rgba(29,45,68,0.22);
    --text: #1d2d44;
    --muted: #6c7a89;
    --muted-2: #8793a0;
    --accent: #5da9e9;
    --accent-2: #3e5c76;
    --hover-accent: #4a96d6;
    color-scheme: light;
  }
}