/* ---------------------------------------------------------------------------
   Design tokens, reset and theming.
   Light is the base palette; dark overrides only the tokens that change, so a
   colour is never defined in exactly one theme.
   --------------------------------------------------------------------------- */

:root {
  color-scheme: light;

  /* Surfaces */
  --bg:            #f6f7f9;
  --bg-grad:       radial-gradient(1200px 600px at 15% -10%, #eef2ff 0%, transparent 60%),
                   radial-gradient(1000px 500px at 100% 0%, #ecfeff 0%, transparent 55%);
  --surface:       #ffffff;
  --surface-2:     #f2f4f7;
  --surface-3:     #e9edf2;
  --surface-sunk:  #f8fafc;

  /* Lines & text */
  --border:        #dfe4ea;
  --border-strong: #c8d0da;
  --text:          #10151c;
  --text-muted:    #5a6675;
  --text-faint:    #8a94a2;

  /* Brand accent */
  --accent:        #4f46e5;
  --accent-hover:  #4338ca;
  --accent-soft:   #eef0fe;
  --accent-ring:   rgba(79, 70, 229, .35);
  --on-accent:     #ffffff;

  /* Severity — used for the ring, chips and score text */
  --sev-none:      #64748b;
  --sev-low:       #0f9d58;
  --sev-medium:    #d97706;
  --sev-high:      #ea580c;
  --sev-critical:  #dc2626;

  /* Severity chip backgrounds (tinted, text stays dark) */
  --sev-none-bg:      #eef1f5;
  --sev-low-bg:       #e6f6ed;
  --sev-medium-bg:    #fdf3e3;
  --sev-high-bg:      #fdeee4;
  --sev-critical-bg:  #fdeaea;

  --ok:            #0f9d58;
  --warn:          #b45309;
  --danger:        #dc2626;

  /*
   * Aliases for the chain connectors. Defined once here rather than per theme:
   * var() resolves at use time, so these follow whichever theme is active.
   */
  --flow:          var(--text-faint);
  --crit:          var(--sev-critical);
  --dot:           #dbe2ee;

  /* Shape & depth */
  --r-sm: 7px;
  --r-md: 11px;
  --r-lg: 16px;
  --r-xl: 22px;
  --shadow-sm: 0 1px 2px rgba(16, 21, 28, .05);
  --shadow-md: 0 4px 14px rgba(16, 21, 28, .07), 0 1px 3px rgba(16, 21, 28, .05);
  --shadow-lg: 0 18px 46px rgba(16, 21, 28, .12), 0 3px 10px rgba(16, 21, 28, .06);

  /* Type */
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
          Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
          "Liberation Mono", "Courier New", monospace;

  --speed: 160ms;
  --ease: cubic-bezier(.32, .72, .35, 1);
}

:root[data-theme="dark"],
:root:not([data-theme="light"]) {
  /* placeholder so the cascade below can be media-guarded */
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;

    --bg:            #0b0e14;
    --bg-grad:       radial-gradient(1200px 600px at 15% -10%, #161d33 0%, transparent 60%),
                     radial-gradient(1000px 500px at 100% 0%, #0d2430 0%, transparent 55%);
    --surface:       #141922;
    --surface-2:     #1b212c;
    --surface-3:     #232b38;
    --surface-sunk:  #0f141c;

    --border:        #262f3d;
    --border-strong: #37435580;
    --text:          #e8edf4;
    --text-muted:    #9aa7b8;
    --text-faint:    #6b788a;

    --accent:        #7c7cf9;
    --accent-hover:  #9090ff;
    --accent-soft:   #1e2140;
    --accent-ring:   rgba(124, 124, 249, .4);
    --on-accent:     #0b0e14;

    --sev-none:      #94a3b8;
    --sev-low:       #34d399;
    --sev-medium:    #fbbf24;
    --sev-high:      #fb923c;
    --sev-critical:  #f87171;

    --sev-none-bg:      #1d232e;
    --sev-low-bg:       #10291f;
    --sev-medium-bg:    #2c2312;
    --sev-high-bg:      #2e2013;
    --sev-critical-bg:  #301a1a;

    --ok:            #34d399;
    --warn:          #fbbf24;
    --danger:        #f87171;
    --dot:           #1b2532;


    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
    --shadow-md: 0 4px 14px rgba(0, 0, 0, .45), 0 1px 3px rgba(0, 0, 0, .3);
    --shadow-lg: 0 18px 46px rgba(0, 0, 0, .55), 0 3px 10px rgba(0, 0, 0, .35);
  }
}

/* Explicit dark choice must win regardless of the OS setting. */
:root[data-theme="dark"] {
  color-scheme: dark;

  --bg:            #0b0e14;
  --bg-grad:       radial-gradient(1200px 600px at 15% -10%, #161d33 0%, transparent 60%),
                   radial-gradient(1000px 500px at 100% 0%, #0d2430 0%, transparent 55%);
  --surface:       #141922;
  --surface-2:     #1b212c;
  --surface-3:     #232b38;
  --surface-sunk:  #0f141c;

  --border:        #262f3d;
  --border-strong: #374355;
  --text:          #e8edf4;
  --text-muted:    #9aa7b8;
  --text-faint:    #6b788a;

  --accent:        #7c7cf9;
  --accent-hover:  #9090ff;
  --accent-soft:   #1e2140;
  --accent-ring:   rgba(124, 124, 249, .4);
  --on-accent:     #0b0e14;

  --sev-none:      #94a3b8;
  --sev-low:       #34d399;
  --sev-medium:    #fbbf24;
  --sev-high:      #fb923c;
  --sev-critical:  #f87171;

  --sev-none-bg:      #1d232e;
  --sev-low-bg:       #10291f;
  --sev-medium-bg:    #2c2312;
  --sev-high-bg:      #2e2013;
  --sev-critical-bg:  #301a1a;

  --ok:            #34d399;
  --warn:          #fbbf24;
  --danger:        #f87171;
  --dot:           #1b2532;


  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
  --shadow-md: 0 4px 14px rgba(0, 0, 0, .45), 0 1px 3px rgba(0, 0, 0, .3);
  --shadow-lg: 0 18px 46px rgba(0, 0, 0, .55), 0 3px 10px rgba(0, 0, 0, .35);
}

/* ---------------------------------------------------------------- reset ---- */

*, *::before, *::after { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.5;
  color: var(--text);
  background-color: var(--bg);
  background-image: var(--bg-grad);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/*
 * The dot grid. A fixed pseudo-element rather than another background layer on
 * body, so it does not have to share background-size with the corner gradients.
 */
body::before {
  content: "";
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background-image: radial-gradient(circle at 1px 1px, var(--dot) 1px, transparent 0);
  background-size: 26px 26px;
}

h1, h2, h3, h4, p, figure { margin: 0; }
button { font: inherit; color: inherit; }
code, kbd, samp, pre { font-family: var(--mono); }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

::selection { background: var(--accent-ring); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}