@import url("./previews/diagram-appearance.css");

:root {
  color-scheme: light;
}

@media screen {
  :root[data-appearance="light"] {
    --site-background: #f3eee4;
    --paper: #fbf7ee;
    background: var(--site-background);
  }

  :root[data-appearance="light"] :is(.landing-page .site-header, .landing-page .gallery-guide, .home-studio-menu nav, .sample-card:not(:hover, .active), .guide-figure, .guide-figure figcaption, .project-guide section, dialog) {
    background: var(--paper);
  }

  :root[data-appearance="light"] :is(.project-guide, .sample-card img) {
    background: var(--site-background);
  }

  :root[data-appearance="dark"] {
    color-scheme: dark;
    --ink: #e4efe9;
    --muted: #abc1b7;
    --line: #3c554e;
    --accent: #f09a64;
    --paper: #202f2b;
    --green: #a0d8c2;
    --surface: var(--paper);
    --border: var(--line);
    --hover: #2c423a;
    --accent-soft: #31483e;
    --danger: #ffb5a3;
    --site-background: #14211e;
    --site-solid: #2e6755;
    --site-logo-orange: #e5854d;
    color: var(--ink);
    background: var(--site-background);
  }

  :root[data-appearance="dark"] .landing-page {
    --home-orange: var(--site-logo-orange);
    --home-teal: #061e21;
  }

  :root[data-appearance="dark"] .brand-mark {
    color: #111;
    background: var(--site-logo-orange);
  }

  :root[data-appearance="dark"] .brand > span:not(.brand-mark) {
    color: var(--site-logo-orange);
  }

  :root[data-appearance="dark"] .landing-page .home-hero {
    background: radial-gradient(ellipse at 72% 55%, #0f2c30, transparent 59%), var(--home-teal);
  }

  :root[data-appearance="dark"] :is(.landing-page .site-header, .landing-page .gallery-guide, .home-studio-menu nav, .sample-card, dialog) {
    background: var(--paper);
    border-color: var(--line);
  }

  :root[data-appearance="dark"] .landing-page .brand {
    color: var(--ink);
  }

  :root[data-appearance="dark"] :is(.home-studio-menu summary, .eyebrow, .overline, .family-label, .sidebar-note, .canvas-footer) {
    color: var(--muted);
  }

  :root[data-appearance="dark"] .home-hero .eyebrow {
    color: inherit;
  }

  :root[data-appearance="dark"] :is(.guide-intro h1 em, .project-document-link, .example-heading + p a) {
    color: var(--green);
  }

  :root[data-appearance="dark"] :is(button:not(.home-bulb-toggle):hover, .button-link:hover, .home-studio-menu a:hover, .sample-card:hover, .sample-card.active, .app-menu[open] > summary, .app-menu > summary:hover) {
    background: var(--hover);
    border-color: #6c8c80;
  }

  :root[data-appearance="dark"] :is(button.primary, .button-link.primary, .c4-tabs [aria-selected="true"]) {
    color: #fff;
    background: var(--site-solid);
    border-color: var(--site-solid);
  }

  :root[data-appearance="dark"] :is(button.primary:hover, .button-link.primary:hover) {
    background: #397562;
    border-color: #397562;
  }

  :root[data-appearance="dark"] :is(input, select, textarea) {
    color: var(--ink);
    background: var(--site-background);
    border-color: var(--line);
  }

  :root[data-appearance="dark"] :is(.guide-figure, .guide-figure figcaption, .inspector, .view-sidebar) {
    background: var(--paper);
    border-color: var(--line);
  }

  :root[data-appearance="dark"] :is(.studio, .sample-card img, .node-content-preview) {
    border-color: var(--line);
  }

  :root[data-appearance="dark"] :is(.sample-card img, .node-content-preview, .project-guide .diagram) {
    background: #192a26;
    border-color: var(--line);
  }

  :root[data-appearance="dark"] :is(.engine-pill, .key-number, .view-button.active, .message) {
    color: var(--ink);
    background: var(--accent-soft);
    border-color: var(--line);
  }

  :root[data-appearance="dark"] .canvas-scroll {
    background-color: var(--site-background);
    background-image: radial-gradient(#6c948447 .8px, transparent .8px);
  }

  :root[data-appearance="dark"] :is(.inspector .danger, .message.error) {
    color: var(--danger);
    border-color: #845e54;
  }

  :root[data-appearance="dark"] .message.error {
    background: #422c27;
  }

  :root[data-appearance="dark"] dialog::backdrop {
    background: #0009;
  }

  :root[data-appearance="dark"] .project-guide {
    color: var(--ink);
    background: var(--site-background);
  }

  :root[data-appearance="dark"] .project-guide section {
    background: var(--paper);
    border-color: var(--line);
  }

  :root[data-appearance="dark"] .project-guide .meta {
    color: var(--muted);
  }

  :root[data-appearance="dark"] .project-guide a {
    color: var(--green);
  }
}