/*
 * PocketNode semantic design foundation — KB#3583.
 * This file is opt-in: it defines tokens and scoped primitives only. It does
 * not change an existing production route until a later owner imports it.
 * Brand seeds: cyan #03E3FC and lime #9EDE66; surface tokens are scoped to .pn-ui.
 */

.pn-ui,
:root[data-theme="dark"] .pn-ui {
  color-scheme: dark;
  --pn-color-canvas: #0d1716;
  --pn-color-surface-1: #142220;
  --pn-color-surface-2: #1b2c29;
  --pn-color-surface-3: #233834;
  --pn-color-text: #f2fbf8;
  --pn-color-text-muted: #c4d3ce;
  --pn-color-text-subtle: #93a6a0;
  --pn-color-text-disabled: #6e817b;
  --pn-color-border: #36504a;
  --pn-color-border-strong: #5b7d74;
  --pn-color-accent: #03e3fc;
  --pn-color-accent-strong: #9ede66;
  --pn-color-focus: #b8ff70;
  --pn-color-success: #79e5a6;
  --pn-color-warning: #ffd27a;
  --pn-color-danger: #ff9b9b;
  --pn-color-info: #91d8ff;
  --pn-color-scrim: rgb(4 11 10 / 0.68);
  --pn-shadow-raised: 0 10px 28px rgb(0 0 0 / 0.22);
  --pn-shadow-overlay: 0 18px 48px rgb(0 0 0 / 0.38);
}

:root[data-theme="light"] .pn-ui {
  color-scheme: light;
  --pn-color-canvas: #edf4f1;
  --pn-color-surface-1: #f8fcfa;
  --pn-color-surface-2: #e5efea;
  --pn-color-surface-3: #d8e5df;
  --pn-color-text: #12211d;
  --pn-color-text-muted: #3c5049;
  --pn-color-text-subtle: #5e716a;
  --pn-color-text-disabled: #84948e;
  --pn-color-border: #9fb5ad;
  --pn-color-border-strong: #67867c;
  --pn-color-accent: #03e3fc;
  --pn-color-accent-strong: #9ede66;
  --pn-color-focus: #006f80;
  --pn-color-success: #157a45;
  --pn-color-warning: #855b00;
  --pn-color-danger: #ae3535;
  --pn-color-info: #096a9e;
  --pn-color-scrim: rgb(17 33 29 / 0.46);
  --pn-shadow-raised: 0 10px 28px rgb(18 43 34 / 0.12);
  --pn-shadow-overlay: 0 18px 48px rgb(18 43 34 / 0.2);
}

:root[data-theme="system"] .pn-ui {
  color-scheme: dark light;
}

@media (prefers-color-scheme: light) {
  :root[data-theme="system"] .pn-ui {
    --pn-color-canvas: #edf4f1;
    --pn-color-surface-1: #f8fcfa;
    --pn-color-surface-2: #e5efea;
    --pn-color-surface-3: #d8e5df;
    --pn-color-text: #12211d;
    --pn-color-text-muted: #3c5049;
    --pn-color-text-subtle: #5e716a;
    --pn-color-text-disabled: #84948e;
    --pn-color-border: #9fb5ad;
    --pn-color-border-strong: #67867c;
    --pn-color-accent: #03e3fc;
    --pn-color-accent-strong: #9ede66;
    --pn-color-focus: #006f80;
    --pn-color-success: #157a45;
    --pn-color-warning: #855b00;
    --pn-color-danger: #ae3535;
    --pn-color-info: #096a9e;
    --pn-color-scrim: rgb(17 33 29 / 0.46);
    --pn-shadow-raised: 0 10px 28px rgb(18 43 34 / 0.12);
    --pn-shadow-overlay: 0 18px 48px rgb(18 43 34 / 0.2);
  }
}

/* Foreground opt-in does not set surface paint or color-scheme. */
.pn-ui,
.pn-foreground,
:root[data-theme="dark"] .pn-ui,
:root[data-theme="dark"] .pn-foreground {
  --pn-color-accent-ink: #06261e;
}

:root[data-theme="light"] .pn-ui,
:root[data-theme="light"] .pn-foreground {
  --pn-color-accent-ink: #021d24;
}

@media (prefers-color-scheme: light) {
  :root[data-theme="system"] .pn-ui,
  :root[data-theme="system"] .pn-foreground {
    --pn-color-accent-ink: #021d24;
  }
}

.pn-ui,
.pn-foreground {
  --pn-font-ui: "Roboto", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --pn-type-block: 1.5rem;
  --pn-type-body: 1rem;
  --pn-radius-sm: 0.5rem;
  --pn-radius-md: 0.875rem;
  --pn-radius-lg: 1.25rem;
  --pn-space-1: 0.25rem;
  --pn-space-2: 0.5rem;
  --pn-space-3: 0.75rem;
  --pn-space-4: 1rem;
  --pn-space-5: 1.5rem;
  --pn-space-6: 2rem;
  --pn-target-min: 2.75rem;
  --pn-outline-width: 0.1875rem;
  --pn-motion-fast: 160ms;
  --pn-motion-standard: 220ms;
}

/* Surface 0 = page canvas, 1 = grouped content, 2 = raised action region,
 * 3 = transient overlay. Density belongs to the component, not the color. */
.pn-ui.pn-surface-0 { background: var(--pn-color-canvas); color: var(--pn-color-text); }
.pn-ui .pn-surface-1 { background: var(--pn-color-surface-1); border: 1px solid var(--pn-color-border); }
.pn-ui .pn-surface-2 { background: var(--pn-color-surface-2); border: 1px solid var(--pn-color-border); box-shadow: var(--pn-shadow-raised); }
.pn-ui .pn-surface-3 { background: var(--pn-color-surface-3); border: 1px solid var(--pn-color-border-strong); box-shadow: var(--pn-shadow-overlay); }

.pn-ui {
  color: var(--pn-color-text);
  font: 400 1rem/1.5 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.pn-ui :is(button, input, select, textarea) {
  font: inherit;
}

.pn-ui :focus-visible {
  outline: var(--pn-outline-width) solid var(--pn-color-focus);
  outline-offset: 0.1875rem;
  box-shadow: 0 0 0 0.375rem color-mix(in srgb, var(--pn-color-focus) 28%, transparent);
}

.pn-ui [aria-disabled="true"],
.pn-ui :disabled {
  color: var(--pn-color-text-disabled);
  cursor: not-allowed;
  opacity: 0.72;
}

.pn-ui .pn-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--pn-space-2);
  min-block-size: var(--pn-target-min);
  min-inline-size: var(--pn-target-min);
  padding: 0.625rem 1rem;
  border: 1px solid var(--pn-color-border-strong);
  border-radius: var(--pn-radius-md);
  background: var(--pn-color-surface-2);
  color: var(--pn-color-text);
  font-weight: 650;
  text-align: center;
  transition: background-color var(--pn-motion-fast) ease, border-color var(--pn-motion-fast) ease, transform var(--pn-motion-fast) ease;
}

.pn-ui .pn-action:hover:not(:disabled):not([aria-disabled="true"]) {
  background: var(--pn-color-surface-3);
  border-color: var(--pn-color-accent);
}

.pn-ui .pn-action:active:not(:disabled):not([aria-disabled="true"]) {
  transform: translateY(1px);
  background: color-mix(in srgb, var(--pn-color-surface-3) 78%, var(--pn-color-accent));
}

.pn-ui .pn-action[aria-pressed="true"],
.pn-ui .pn-action[data-selected="true"] {
  border-inline-start: 0.375rem solid var(--pn-color-accent-strong);
  padding-inline-start: 0.6875rem;
  background: color-mix(in srgb, var(--pn-color-surface-3) 76%, var(--pn-color-accent));
}

.pn-ui .pn-action--primary {
  background: var(--pn-color-accent);
  border-color: var(--pn-color-accent);
  color: var(--pn-color-accent-ink);
}

.pn-ui .pn-action--primary:hover:not(:disabled):not([aria-disabled="true"]) {
  background: var(--pn-color-accent-strong);
  border-color: var(--pn-color-accent-strong);
}

.pn-ui .pn-state {
  display: grid;
  grid-template-columns: 1.125rem minmax(0, 1fr);
  gap: var(--pn-space-2);
  align-items: start;
  padding: var(--pn-space-3);
  border: 1px solid var(--pn-color-border);
  border-inline-start-width: 0.375rem;
  border-radius: var(--pn-radius-md);
  background: var(--pn-color-surface-1);
  color: var(--pn-color-text-muted);
}

.pn-ui .pn-state__icon { font-weight: 800; line-height: 1.35; }
.pn-ui .pn-state__title { color: var(--pn-color-text); font-weight: 700; }
.pn-ui .pn-state__detail { margin: 0.125rem 0 0; overflow-wrap: anywhere; }

.pn-ui .pn-state--loading { border-inline-start-color: var(--pn-color-info); }
.pn-ui .pn-state--empty { border-inline-start-color: var(--pn-color-text-subtle); }
.pn-ui .pn-state--stale { border-inline-start-color: var(--pn-color-warning); }
.pn-ui .pn-state--unavailable { border-inline-start-color: var(--pn-color-text-subtle); }
.pn-ui .pn-state--error { border-inline-start-color: var(--pn-color-danger); }
.pn-ui .pn-state--success { border-inline-start-color: var(--pn-color-success); }
.pn-ui .pn-state--permission { border-inline-start-color: var(--pn-color-info); }

.pn-ui .pn-state--loading .pn-state__icon::after {
  content: "";
  display: inline-block;
  inline-size: 0.72rem;
  block-size: 0.72rem;
  border: 0.13rem solid currentColor;
  border-inline-end-color: transparent;
  border-radius: 50%;
  animation: pn-state-spin 700ms linear infinite;
}

.pn-ui .pn-visually-hidden {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

@keyframes pn-state-spin { to { transform: rotate(1turn); } }

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

@media (max-width: 24rem) {
  .pn-ui .pn-ui .pn-action { inline-size: 100%; }
}

/* KB#3773: accepted foreground roles. Existing surface and type tokens stay intact. */
.pn-foreground {
  --pn-type-section: 2rem;
  --pn-type-info: 1.25rem;
  --pn-type-caption: .875rem;
  --pn-type-compact: .75rem;
  --pn-fg-primary: #fcffff;
  --pn-fg-secondary: #bfcecf;
  --pn-fg-link: #9adae9;
  --pn-fg-success: #b3e5b6;
  --pn-fg-warning: #f4d598;
  --pn-fg-danger: #ffadb2;
  --pn-fg-focus: #dff7ca;
  --pn-fg-on-dark: #fcffff;
  --pn-fg-on-dark-muted: #bfcecf;
  --pn-fg-on-dark-link: #9adae9;
  --pn-fg-on-dark-focus: #dff7ca;
  --pn-fg-on-dark-danger: #ffadb2;
  --pn-fg-on-dark-success: #b3e5b6;
  --pn-fg-on-dark-warning: #f4d598;
  --pn-fg-on-brand: #0e0e0e;
  --pn-fg-on-solid-action: #ffffff;
}

:root[data-theme="light"] .pn-foreground {
  --pn-fg-primary: #0e0e0e;
  --pn-fg-secondary: #1b2c2d;
  --pn-fg-link: #07333b;
  --pn-fg-success: #123f29;
  --pn-fg-warning: #4a3107;
  --pn-fg-danger: #711b26;
  --pn-fg-focus: #07333b;
}

@media (prefers-color-scheme:light) {
  :root[data-theme="system"] .pn-foreground {
    --pn-fg-primary: #0e0e0e;
    --pn-fg-secondary: #1b2c2d;
    --pn-fg-link: #07333b;
    --pn-fg-success: #123f29;
    --pn-fg-warning: #4a3107;
    --pn-fg-danger: #711b26;
    --pn-fg-focus: #07333b;
  }
}