/* spectrum2.css - Adobe Spectrum 2 design tokens for every dc336 surface (owner 2026-10-01: "use only adobe
   style design and remove classic ui design").

   Values are Adobe's own, read from @adobe/spectrum-tokens 15.4.1 (dist/json/variables.json, desktop scale) -
   not approximations. Dark is the default; light follows data-theme="light" or the OS when no theme is set.
   Typeface: Adobe Clean is licensed, so Source Sans 3 - Adobe's own open-source face (SIL OFL) and the closest
   free match - is used everywhere, with Adobe Clean first in the stack for machines that already have it.

   The SAME file ships inside the Farm app (datacenter_build/farm-app/ui/spectrum2.css); a test keeps the two
   identical. Pages map their own semantic variables (--panel, --ink, ...) onto these --s2-* tokens. */

:root{
  color-scheme:dark;
  /* backgrounds (background-base / layer-1 / layer-2) */
  --s2-bg-base:#111111; --s2-bg-layer-1:#1b1b1b; --s2-bg-layer-2:#222222;
  /* gray ramp */
  --s2-gray-100:#2c2c2c; --s2-gray-200:#323232; --s2-gray-300:#393939; --s2-gray-400:#444444;
  --s2-gray-500:#6d6d6d; --s2-gray-600:#8a8a8a; --s2-gray-700:#afafaf; --s2-gray-800:#dbdbdb; --s2-gray-900:#f2f2f2;
  /* content */
  --s2-heading:#f2f2f2; --s2-content:#dbdbdb; --s2-content-subdued:#afafaf; --s2-content-disabled:#444444;
  /* accent (blue) */
  --s2-accent-bg:#4069fd; --s2-accent-bg-hover:#345bf8; --s2-accent-content:#5681ff; --s2-focus:#4069fd;
  /* semantic */
  --s2-positive:#099d59; --s2-negative:#fc432e; --s2-negative-bg:#df3422; --s2-notice:#e06400; --s2-informative:#5681ff;
  /* neutral (secondary) button */
  --s2-neutral-bg:#dbdbdb; --s2-neutral-bg-hover:#f2f2f2;
  /* geometry + type (desktop scale) */
  --s2-radius-small:4px; --s2-radius-medium:8px; --s2-radius-large:10px; --s2-radius-full:9999px;
  --s2-height-75:24px; --s2-height-100:32px; --s2-height-200:40px;
  --s2-font-75:12px; --s2-font-100:14px; --s2-font-200:16px; --s2-font-300:18px; --s2-font-500:22px; --s2-font-700:28px;
  --s2-font:"Adobe Clean","Source Sans 3","Source Sans Pro",system-ui,-apple-system,"Segoe UI",sans-serif;
  --s2-mono:"Source Code Pro",ui-monospace,"Cascadia Mono",Menlo,Consolas,monospace;
}
:root[data-theme="light"]{
  color-scheme:light;
  --s2-bg-base:#ffffff; --s2-bg-layer-1:#f8f8f8; --s2-bg-layer-2:#ffffff;
  --s2-gray-100:#e9e9e9; --s2-gray-200:#e1e1e1; --s2-gray-300:#dadada; --s2-gray-400:#c6c6c6;
  --s2-gray-500:#8f8f8f; --s2-gray-600:#717171; --s2-gray-700:#505050; --s2-gray-800:#292929; --s2-gray-900:#131313;
  --s2-heading:#131313; --s2-content:#292929; --s2-content-subdued:#505050; --s2-content-disabled:#c6c6c6;
  --s2-accent-bg:#3b63fb; --s2-accent-bg-hover:#274dea; --s2-accent-content:#3b63fb; --s2-focus:#4b75ff;
  --s2-positive:#079355; --s2-negative:#d73220; --s2-negative-bg:#d73220; --s2-notice:#d45b00; --s2-informative:#4b75ff;
  --s2-neutral-bg:#292929; --s2-neutral-bg-hover:#131313;
}
@media (prefers-color-scheme: light){
  :root.s2-follow-os:not([data-theme]){
    color-scheme:light;
    --s2-bg-base:#ffffff; --s2-bg-layer-1:#f8f8f8; --s2-bg-layer-2:#ffffff;
    --s2-gray-100:#e9e9e9; --s2-gray-200:#e1e1e1; --s2-gray-300:#dadada; --s2-gray-400:#c6c6c6;
    --s2-gray-500:#8f8f8f; --s2-gray-600:#717171; --s2-gray-700:#505050; --s2-gray-800:#292929; --s2-gray-900:#131313;
    --s2-heading:#131313; --s2-content:#292929; --s2-content-subdued:#505050; --s2-content-disabled:#c6c6c6;
    --s2-accent-bg:#3b63fb; --s2-accent-bg-hover:#274dea; --s2-accent-content:#3b63fb; --s2-focus:#4b75ff;
    --s2-positive:#079355; --s2-negative:#d73220; --s2-negative-bg:#d73220; --s2-notice:#d45b00; --s2-informative:#4b75ff;
    --s2-neutral-bg:#292929; --s2-neutral-bg-hover:#131313;
  }
}

/* ---- Spectrum 2 component shapes, opt-in by class so a page converts piece by piece ---- */
/* Button: pill, accent fill (primary), outline (secondary), negative (destructive) */
.s2-button{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:var(--s2-height-100);
  padding:0 16px;border-radius:var(--s2-radius-full);border:2px solid transparent;font:700 var(--s2-font-100)/1 var(--s2-font);
  background:var(--s2-accent-bg);color:#fff;cursor:pointer;text-decoration:none;white-space:nowrap}
.s2-button:hover{background:var(--s2-accent-bg-hover)}
.s2-button.secondary{background:transparent;border-color:var(--s2-gray-400);color:var(--s2-content)}
.s2-button.secondary:hover{background:var(--s2-gray-100);border-color:var(--s2-gray-500)}
.s2-button.negative{background:var(--s2-negative-bg)}
.s2-button.large{min-height:var(--s2-height-200);padding:0 20px;font-size:var(--s2-font-200)}
.s2-button:disabled,.s2-button[aria-disabled="true"]{background:var(--s2-gray-200);color:var(--s2-content-disabled);border-color:transparent;cursor:default}
/* ActionButton: quiet square-ish control, 8 px radius */
.s2-action{display:inline-flex;align-items:center;gap:6px;min-height:var(--s2-height-100);padding:0 12px;
  border-radius:var(--s2-radius-medium);border:1px solid var(--s2-gray-400);background:var(--s2-gray-100);
  color:var(--s2-content);font:600 var(--s2-font-100)/1 var(--s2-font);cursor:pointer}
.s2-action:hover{background:var(--s2-gray-200)}
.s2-action.selected,.s2-action[aria-pressed="true"]{background:var(--s2-gray-800);border-color:var(--s2-gray-800);color:var(--s2-bg-base)}
/* Card / panel */
.s2-card{background:var(--s2-bg-layer-2);border:1px solid var(--s2-gray-300);border-radius:var(--s2-radius-large)}
/* StatusLight dot */
.s2-status{display:inline-flex;align-items:center;gap:8px}
.s2-status::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--s2-gray-500)}
.s2-status.positive::before{background:var(--s2-positive)} .s2-status.negative::before{background:var(--s2-negative)}
.s2-status.notice::before{background:var(--s2-notice)} .s2-status.informative::before{background:var(--s2-informative)}
/* Focus ring - Spectrum's 2 px accent ring */
:where(button,a,input,select,textarea,[tabindex]):focus-visible{outline:2px solid var(--s2-focus);outline-offset:2px}