/* CastrosBot design tokens — the single source of truth for colour, type, spacing, radius and shadow.
   Dark palette sampled from the reference design (navy-black canvas, indigo accent, charcoal cards);
   the light palette mirrors it. style.css uses ONLY these variables.
   Theme: follows the device (prefers-color-scheme) unless the visitor picks one — then <html data-theme>. */
:root {
  color-scheme: dark;

  /* Surfaces */
  --bg:            #0b0f14;   /* page canvas */
  --surface:       #202125;   /* cards, panels, tables */
  --surface-2:     #24252a;   /* raised: hover rows, inputs, secondary buttons */
  --surface-3:     #2c2e34;   /* pressed / active secondary */
  --border:        #2f3137;   /* hairlines on surfaces */
  --border-strong: #3d4048;   /* input borders */
  --line-accent:   #234c79;   /* decorative lines, subtle accent borders */

  /* Text */
  --text:          #fafcff;   /* headings & body */
  --text-2:        #cacdd0;   /* secondary copy, nav links */
  --muted:         #989b9e;   /* hints, meta, table headers */

  /* Brand / accent (indigo) */
  --accent:        #4c6ef5;   /* links, highlights, focus, active toggles */
  --accent-hover:  #5c7cfa;
  --accent-soft:   #748ffc;   /* decorative blob, link hover */
  --accent-deep:   #1b2864;   /* primary button fill */
  --accent-deep-hover: #233a8f;
  --accent-text:   #edf2ff;   /* text on accent fills */
  --accent-tint:   rgba(76, 110, 245, .12);  /* featured column / selected rows */

  /* Status */
  --success:       #2da44e;
  --ok-bg:         rgba(45, 164, 78, .14);  --ok-text: #6fdc8c;
  --danger:        #e03131;
  --danger-hover:  #f03e3e;
  --err-bg:        rgba(224, 49, 49, .14);  --err-text: #ffa8a8;
  --gold:          #fab005;
  --on-gold:       #1a1b1e;
  --on-danger:     #ffffff;
  --ok-border:     rgba(45, 164, 78, .35);
  --err-border:    rgba(224, 49, 49, .35);
  --topbar-bg:     rgba(11, 15, 20, .88);
  --blob:          #748ffc;
  --hero-lines:    url("/static/hero-lines.svg");

  /* Type */
  --font: "Ubuntu", "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
  --font-mono: ui-monospace, "Cascadia Mono", Consolas, monospace;
  --fs-sm: .875rem;  --fs-base: 1rem;  --fs-lg: 1.125rem;
  --fs-h2: 1.25rem;  --fs-h1: clamp(1.6rem, 3.2vw, 2.1rem);
  --fs-hero: clamp(2rem, 5.5vw, 3.6rem);
  --fw-bold: 700;    --fw-black: 800;

  /* Spacing (4px scale) */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px;  --sp-4: 16px;  --sp-5: 24px;  --sp-6: 32px;  --sp-7: 48px;  --sp-8: 72px;

  /* Shape & depth */
  --radius-sm: 6px;     /* tags, small controls */
  --radius:    8px;     /* buttons, inputs */
  --radius-lg: 14px;    /* cards, panels, tables */
  --radius-xl: 24px;    /* hero media */
  --pill: 999px;
  --shadow:        0 1px 0 rgba(255, 255, 255, .03) inset, 0 8px 24px rgba(0, 0, 0, .35);
  --shadow-accent: 0 10px 36px rgba(76, 110, 245, .28);
  --focus-ring:    0 0 0 3px rgba(116, 143, 252, .55);

  /* Layout */
  --content-max: 1120px;
  --reading-max: 760px;
  --gutter: 16px;
  --topbar-h: 64px;
  --z-topbar: 50;
  --ease: .15s ease;
}

/* ---- Light palette: device preference (unless dark was picked), or picked explicitly ---- */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
  color-scheme: light;
  --bg: #f6f7fb;  --surface: #ffffff;  --surface-2: #f1f3f9;  --surface-3: #e6e9f2;
  --border: #e2e5ee;  --border-strong: #cfd4e0;  --line-accent: #c5d0f5;
  --text: #0b0f14;  --text-2: #3d4250;  --muted: #6b7185;
  --accent: #4c6ef5;  --accent-hover: #4263eb;  --accent-soft: #3b5bdb;
  --accent-deep: #1b2864;  --accent-deep-hover: #2c3e9c;  --accent-text: #edf2ff;
  --accent-tint: rgba(76, 110, 245, .08);
  --ok-bg: rgba(45, 164, 78, .12);  --ok-text: #1b7a3a;  --ok-border: rgba(45, 164, 78, .35);
  --err-bg: rgba(224, 49, 49, .09);  --err-text: #b02525;  --err-border: rgba(224, 49, 49, .35);
  --topbar-bg: rgba(255, 255, 255, .86);
  --blob: #748ffc;
  --hero-lines: url("/static/hero-lines-light.svg");
  --shadow: 0 1px 2px rgba(16, 24, 40, .05), 0 6px 20px rgba(16, 24, 40, .06);
  --shadow-accent: 0 10px 32px rgba(76, 110, 245, .22);
  --focus-ring: 0 0 0 3px rgba(76, 110, 245, .35);
  }
}
:root[data-theme="light"] {
  color-scheme: light;
  --bg: #f6f7fb;  --surface: #ffffff;  --surface-2: #f1f3f9;  --surface-3: #e6e9f2;
  --border: #e2e5ee;  --border-strong: #cfd4e0;  --line-accent: #c5d0f5;
  --text: #0b0f14;  --text-2: #3d4250;  --muted: #6b7185;
  --accent: #4c6ef5;  --accent-hover: #4263eb;  --accent-soft: #3b5bdb;
  --accent-deep: #1b2864;  --accent-deep-hover: #2c3e9c;  --accent-text: #edf2ff;
  --accent-tint: rgba(76, 110, 245, .08);
  --ok-bg: rgba(45, 164, 78, .12);  --ok-text: #1b7a3a;  --ok-border: rgba(45, 164, 78, .35);
  --err-bg: rgba(224, 49, 49, .09);  --err-text: #b02525;  --err-border: rgba(224, 49, 49, .35);
  --topbar-bg: rgba(255, 255, 255, .86);
  --blob: #748ffc;
  --hero-lines: url("/static/hero-lines-light.svg");
  --shadow: 0 1px 2px rgba(16, 24, 40, .05), 0 6px 20px rgba(16, 24, 40, .06);
  --shadow-accent: 0 10px 32px rgba(76, 110, 245, .22);
  --focus-ring: 0 0 0 3px rgba(76, 110, 245, .35);
}