/* ============================================================================
   OpsWiki — Design tokens
   Opsynth (Pty) LTD

   The light palette is lifted verbatim from the Opsynth company site so the
   two products read as one brand. The dark ramp is new, built to hold the
   same red at the same perceived weight against a deep charcoal ground.
   ========================================================================== */

:root {
  /* ---- Type ------------------------------------------------------------- */
  --font-display: 'Sora', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body:    'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'Cascadia Code', Consolas, monospace;

  /* ---- Brand red — identical in both themes ----------------------------- */
  --red:        #dc2626;
  --red-bright: #e62b2b;
  --red-deep:   #b91c1c;
  --red-ink:    #ffffff;

  /* ---- Scale ------------------------------------------------------------ */
  --radius-sm: 8px;
  --radius:    12px;
  --radius-lg: 16px;
  --radius-xl: 22px;

  --sidebar-w:   248px;
  --topbar-h:    60px;
  --container:   1240px;

  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --fast: 140ms var(--ease);
  --med:  240ms var(--ease);

  /* ---- Semantic status colours ------------------------------------------ */
  --ok:      #16a34a;
  --ok-bg:   rgba(22, 163, 74, 0.10);
  --warn:    #d97706;
  --warn-bg: rgba(217, 119, 6, 0.10);
  --danger:  #dc2626;
  --danger-bg: rgba(220, 38, 38, 0.10);
  --info:    #2563eb;
  --info-bg: rgba(37, 99, 235, 0.10);
}


/* ============================================================================
   LIGHT  — the Opsynth site palette
   ========================================================================== */
:root,
:root[data-theme="light"] {
  --bg:        #f3f3f6;
  --bg-soft:   #fafafb;
  --bg-pure:   #ffffff;
  --bg-sunken: #ececf1;

  --surface:      #ffffff;
  --surface-2:    #fafafb;
  --surface-hover:#f5f5f8;
  --surface-active: rgba(220, 38, 38, 0.06);

  --ink:      #1a1a24;
  --ink-soft: #3d3d4a;
  --ink-mute: #7a7a86;
  --ink-faint:#a4a4b0;
  --ink-on-red: #ffffff;

  --line:      #e2e2e8;
  --line-soft: #ededf2;
  --line-strong: #d4d4dc;

  --red-mute:  rgba(220, 38, 38, 0.08);
  --red-glow:  rgba(220, 38, 38, 0.14);

  --shadow-sm: 0 1px 2px rgba(20, 20, 30, 0.05);
  --shadow-md: 0 12px 32px -8px rgba(20, 20, 30, 0.10);
  --shadow-lg: 0 32px 64px -16px rgba(20, 20, 30, 0.14);
  --shadow-pop: 0 18px 44px -12px rgba(20, 20, 30, 0.22);

  /* The atmospheric page wash from the company site */
  --page-wash:
    radial-gradient(circle at 50% 0%, rgba(220, 38, 38, 0.10), transparent 34%),
    linear-gradient(135deg, #eef1f8 0%, #ffffff 42%, #edf0f7 100%);

  --grid-line: #e6e6ec;
  --grid-header-bg: #f5f5f8;
  --code-bg: #f5f5f8;

  color-scheme: light;
}


/* ============================================================================
   DARK  — deep charcoal, same red, same weight
   ========================================================================== */
:root[data-theme="dark"] {
  --bg:        #0b0b12;
  --bg-soft:   #12121b;
  --bg-pure:   #16161f;
  --bg-sunken: #08080e;

  --surface:      #16161f;
  --surface-2:    #1c1c27;
  --surface-hover:#22222e;
  --surface-active: rgba(230, 43, 43, 0.12);

  --ink:      #f0f0f5;
  --ink-soft: #c3c3d0;
  --ink-mute: #8a8a9a;
  --ink-faint:#5f5f6e;
  --ink-on-red: #ffffff;

  --line:      #292935;
  --line-soft: #202029;
  --line-strong: #3a3a48;

  /* Slightly hotter red so it doesn't sink into the dark ground */
  --red:        #e62b2b;
  --red-bright: #f43f3f;
  --red-deep:   #c81e1e;
  --red-mute:  rgba(230, 43, 43, 0.14);
  --red-glow:  rgba(230, 43, 43, 0.22);

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 12px 32px -8px rgba(0, 0, 0, 0.55);
  --shadow-lg: 0 32px 64px -16px rgba(0, 0, 0, 0.7);
  --shadow-pop: 0 18px 44px -12px rgba(0, 0, 0, 0.75);

  --page-wash:
    radial-gradient(circle at 50% 0%, rgba(230, 43, 43, 0.14), transparent 38%),
    linear-gradient(135deg, #0d0d16 0%, #14141d 45%, #0b0b12 100%);

  --grid-line: #292935;
  --grid-header-bg: #1c1c27;
  --code-bg: #1c1c27;

  --ok-bg:     rgba(22, 163, 74, 0.16);
  --warn-bg:   rgba(217, 119, 6, 0.16);
  --danger-bg: rgba(230, 43, 43, 0.16);
  --info-bg:   rgba(37, 99, 235, 0.18);

  color-scheme: dark;
}


/* Respect the OS preference before the user has ever chosen, without
   overriding an explicit choice (the data-theme rules above win). */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --bg: #0b0b12; --bg-soft: #12121b; --bg-pure: #16161f;
    --surface: #16161f; --surface-2: #1c1c27; --surface-hover: #22222e;
    --ink: #f0f0f5; --ink-soft: #c3c3d0; --ink-mute: #8a8a9a;
    --line: #292935; --line-soft: #202029;
    color-scheme: dark;
  }
}