/* Loaded by system preference or a user override. Never darken print output. */
@media screen {
  :root {
    color-scheme: dark;
    --canvas: #081426; --paper: #10233B;
    --ink: #EDF4FC; --body-ink: #CDDAE9; --slate: #ACBED3;
    --blue: #87BEFF; --blue-deep: #BCD9FF; --teal-text: #79DDD1;
    --mint: #123A3D; --ice: #19334F; --cyan: #14373F;
    --border: #344B66; --control: #8196AF;
    --pass: #8AE0B4; --pass-bg: #12372E; --pass-line: #39765C;
    --flag: #FFD18A; --flag-bg: #3C2E18; --flag-line: #8C692E;
    --hold: #FFB0A8; --hold-bg: #43262D; --hold-line: #99585B;
    --deferred: #CDDAE9; --deferred-bg: #19334F;
    --hero-gradient: radial-gradient(ellipse at 90% 0, #123A3D, transparent 65%), var(--canvas);
    --shadow-soft: 0 1px 2px #0003;
    --shadow-card: 0 1px 2px #0003, 0 10px 30px #0003;
    --shadow-lift: 0 2px 4px #0003, 0 22px 50px #0005;
  }
  .theme-brand .theme-logo-light { display: none; }
  .theme-brand .theme-logo-dark { display: block; }
  .theme-picker { color: var(--slate); }
  .theme-picker select { color: var(--ink); background: var(--paper); border-color: var(--control); }
  .theme-picker select:focus-visible { outline-color: var(--blue); }
  .nav, .pf-top { background: rgba(6, 23, 47, .96); }
  .portal .skip-link:focus, .pf .skip-link:focus { background: var(--paper); }
  .hero.brand-hero { background: var(--hero-gradient); }
  table.data tr:hover td { background: #1B3550; }
  .btn { border-color: var(--control); }
  .btn.primary, .studio-workspace .btn.primary, .nav a.link.active, .tabs a.active, .pf-side a.active {
    background: var(--teal); color: var(--navy); border-color: var(--teal);
  }
  .btn.primary:hover, .studio-workspace .btn.primary:hover { background: var(--teal-press); border-color: var(--teal-press); }
  .btn.danger { border-color: var(--hold); }
  .btn.danger:hover, .pf-steps li.done .pf-step-mark, .pf-stepper a.done .pf-step-mark, .pf-gate li.ok .pf-tick { color: var(--navy-deep); }
  input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
  input[type=email], input[type=url], input[type=number] { background: var(--paper); color: var(--ink); }
  .sev.high { background: #442C1E; color: #FFC299; }
  .tag.layer, .cite, .pf-twin-note, .pf-answer.claude { border-color: var(--control); }
  .evidence-preview { border-color: var(--border); border-top-color: var(--teal-text); }
  .pf-icon-tile { background: var(--mint); }
  .pf-modecard.on, .pf-stepper a.active, .pf-topics a.active { border-color: var(--teal-text); box-shadow: none; }
  .pf-chart-svg text { fill: var(--body-ink); }
  .pf-chart-svg [stroke="#DCE3EB"] { stroke: var(--border); }
  .pf-chart-svg [stroke="#FFFFFF"] { stroke: var(--paper); }
  .pf-chart-svg [stroke="#1467B8"] { stroke: #87BEFF; }
  .pf-chart-svg [fill="#1467B8"] { fill: #87BEFF; }
  .pf-chart-svg [stroke="#B86E00"] { stroke: #FFD18A; }
  .pf-chart-svg [fill="#B86E00"] { fill: #FFD18A; }
  .pf-legend .pf-key.claude { background: #87BEFF; }
  .pf-legend .pf-key.twin { background: #FFD18A; }
  .studio-workspace .pf-legend .pf-key.twin { background: repeating-linear-gradient(to right, #FFD18A 0 6px, transparent 6px 9px); }

  /* Toolkit artwork and email previews are documents with their own palette. */
  .tk-hero, .tk-placeholder-list code { background: var(--mint); border-color: var(--border); }
  .tk-hero h1, .tk-card h2 a { color: var(--ink); }
  .tk-card-bottom, .tk-history, .tk-preview { border-color: var(--border); }
  .tk-editor input:not([type=hidden]), .tk-brand-editor input:not([type=hidden]), .tk-filters input, .tk-filters select { background: var(--paper); color: var(--ink); border-color: var(--control); }
  .tk-preview { color-scheme: light; background: #fff; color: #40536B; }
  .tk-preview strong { color: #071F46; }

  /* Expert studio surfaces, checked choices, and progress keep their hierarchy. */
  .studio-workspace { --studio-border: var(--border); --studio-quiet: var(--ice); --studio-teal: var(--teal-text); }
  .studio-workspace .pf-side a.active, .studio-intro-band, .studio-workspace .pf-celebrate,
  .studio-workspace .pf-badge.earned, .studio-milestone-symbol, .studio-workspace .pf-stepper a.active,
  .studio-workspace .pf-stepper a.done:not(.active) .pf-step-mark, .studio-workspace .pf-choice label:has(input:checked),
  .studio-workspace .pf-avatar-pick:has(input:checked), .studio-workspace .pf-topics a.active,
  .studio-workspace .pf-twin-note, .studio-workspace .pf-gate li.ok .pf-tick, .studio-pill,
  .studio-account-nav .studio-profile-link:hover, .studio-account-nav .studio-profile-link[aria-current=page],
  .studio-profile-initial, .studio-tag, .studio-workspace .tag.custom, .studio-source-links {
    background: var(--mint); border-color: var(--border); color: var(--ink);
  }
  .studio-workspace .pf-badge, .studio-workspace .pf-stepper .pf-step-mark,
  .studio-workspace input[type=text], .studio-workspace input[type=url], .studio-workspace input[type=email],
  .studio-workspace textarea, .studio-workspace select, .studio-workspace .pf-avatar-pick,
  .studio-workspace .pf-question .tag { background: var(--paper); color: var(--ink); border-color: var(--control); }
  .studio-workspace .pf-stepper a.active .pf-step-mark { background: var(--teal); color: var(--navy); }
  .studio-workspace .pf-meter, .studio-workspace .pf-meter.big { background: var(--border); }
  .studio-workspace .locked .studio-milestone-symbol, .studio-workspace .pf-question, .studio-workspace .pf-num,
  .studio-workspace .pf-score-parts div, .studio-workspace table.data th,
  .studio-capture-tools > details, .studio-capture-tools > section { background: var(--ice); color: var(--body-ink); }
  .studio-workspace .pf-collection:hover, .studio-tag button:hover { background: var(--ice); }
  .studio-profile-summary > div { border-color: var(--border); }
  .studio-workspace .pf-choice label:has(input:checked), .studio-workspace .pf-avatar-pick:has(input:checked) { border-color: var(--teal-text); }

  .entry-stories, .entry-story { color-scheme: dark; background: var(--canvas); color: var(--body-ink); border-color: var(--border); }
  .entry-stories h2, .entry-stories h3 { color: var(--ink); }
  .story-eyebrow, .entry-story a { color: var(--teal-text); }
  .editorial-feature--panel { background: var(--paper); border-color: var(--border); }
  .editorial-feature .editorial-caption { color: var(--slate); }
  .editorial-feature .editorial-visual { background: transparent; }
  .editorial-art { mix-blend-mode: normal; background: #F8FAFB; border-radius: 12px; }
}