/* PiscorX interface standard: shared tokens, themes, components and states. */
:root {
  color-scheme: light;
  --piscor-colour-canvas: #f4f6f0;
  --piscor-colour-surface: #ffffff;
  --piscor-colour-surface-subtle: #e9efe5;
  --piscor-colour-text: #17231c;
  --piscor-colour-text-muted: #68736b;
  --piscor-colour-border: #d5dfd2;
  --piscor-colour-action: #315f3c;
  --piscor-colour-action-strong: #23492e;
  --piscor-colour-accent: #789d59;
  --piscor-colour-success: #28743a;
  --piscor-colour-warning: #9b5f05;
  --piscor-colour-danger: #a93632;
  --piscor-colour-info: #17667a;
  --piscor-colour-focus: #bd7400;
  --piscor-on-action: #ffffff;
  --piscor-font-sans: "DM Sans", Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  --piscor-font-size-xs: .75rem;
  --piscor-font-size-sm: .875rem;
  --piscor-font-size-md: 1rem;
  --piscor-font-size-lg: 1.25rem;
  --piscor-font-size-xl: clamp(1.75rem, 3vw, 2.5rem);
  --piscor-space-1: .25rem;
  --piscor-space-2: .5rem;
  --piscor-space-3: .75rem;
  --piscor-space-4: 1rem;
  --piscor-space-5: 1.5rem;
  --piscor-space-6: 2rem;
  --piscor-radius-sm: .5rem;
  --piscor-radius-md: .75rem;
  --piscor-radius-lg: 1.125rem;
  --piscor-shadow-card: 0 14px 40px rgb(31 58 38 / 9%);
  --piscor-control-height: 2.75rem;
  --piscor-motion-fast: 140ms;
}

html[data-theme="dark"] {
  color-scheme: dark;
  --piscor-colour-canvas: #07100c;
  --piscor-colour-surface: #101a15;
  --piscor-colour-surface-subtle: #17231b;
  --piscor-colour-text: #edf2eb;
  --piscor-colour-text-muted: #a8b2aa;
  --piscor-colour-border: #304037;
  --piscor-colour-action: #83a968;
  --piscor-colour-action-strong: #a2c582;
  --piscor-colour-accent: #a5bd78;
  --piscor-colour-success: #8dc77a;
  --piscor-colour-warning: #f0b455;
  --piscor-colour-danger: #f08079;
  --piscor-colour-info: #7fc6d2;
  --piscor-colour-focus: #f2bd57;
  --piscor-on-action: #07100c;
  --piscor-shadow-card: 0 18px 50px rgb(0 0 0 / 32%);
}

@media (prefers-color-scheme: dark) {
  html[data-theme="auto"] {
    color-scheme: dark;
    --piscor-colour-canvas: #07100c;
    --piscor-colour-surface: #101a15;
    --piscor-colour-surface-subtle: #17231b;
    --piscor-colour-text: #edf2eb;
    --piscor-colour-text-muted: #a8b2aa;
    --piscor-colour-border: #304037;
    --piscor-colour-action: #83a968;
    --piscor-colour-action-strong: #a2c582;
    --piscor-colour-accent: #a5bd78;
    --piscor-colour-success: #8dc77a;
    --piscor-colour-warning: #f0b455;
    --piscor-colour-danger: #f08079;
    --piscor-colour-info: #7fc6d2;
    --piscor-colour-focus: #f2bd57;
    --piscor-on-action: #07100c;
    --piscor-shadow-card: 0 18px 50px rgb(0 0 0 / 32%);
  }
}

body { font-family: var(--piscor-font-sans); }

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--piscor-colour-focus);
  outline-offset: 3px;
}

.piscor-button,
.piscor-field,
.piscor-select {
  min-height: var(--piscor-control-height);
  font: inherit;
  border-radius: var(--piscor-radius-md);
}

.piscor-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--piscor-space-2);
  padding: var(--piscor-space-3) var(--piscor-space-4);
  border: 1px solid transparent;
  background: var(--piscor-org-primary, var(--piscor-colour-action));
  color: var(--piscor-on-action);
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  transition: filter var(--piscor-motion-fast), transform var(--piscor-motion-fast), box-shadow var(--piscor-motion-fast);
}
.piscor-button:hover { filter: brightness(1.08); }
.piscor-button:active { transform: translateY(1px); filter: brightness(.94); }
.piscor-button[aria-busy="true"] { cursor: progress; }
.piscor-button[aria-busy="true"]::before { content: ""; width: 1em; height: 1em; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: piscor-spin .7s linear infinite; }
.piscor-button:disabled,
.piscor-button[aria-disabled="true"] { opacity: .52; cursor: not-allowed; filter: none; transform: none; }
.piscor-button--secondary { color: var(--piscor-colour-action-strong); background: var(--piscor-colour-surface); border-color: var(--piscor-colour-border); }
.piscor-button--danger { background: var(--piscor-colour-danger); }

.piscor-field,
.piscor-select {
  width: 100%;
  padding: var(--piscor-space-3);
  border: 1px solid var(--piscor-colour-border);
  color: var(--piscor-colour-text);
  background: var(--piscor-colour-surface);
}
.piscor-field[aria-invalid="true"] { border-color: var(--piscor-colour-danger); box-shadow: 0 0 0 1px var(--piscor-colour-danger); }

.piscor-card { padding: var(--piscor-space-5); color: var(--piscor-colour-text); background: var(--piscor-colour-surface); border: 1px solid var(--piscor-colour-border); border-radius: var(--piscor-radius-lg); box-shadow: var(--piscor-shadow-card); }
.piscor-nav { color: var(--piscor-colour-text-muted); background: var(--piscor-colour-surface); border-color: var(--piscor-colour-border); }
.piscor-nav [aria-current="page"] { color: var(--piscor-colour-action-strong); background: var(--piscor-colour-surface-subtle); }
.piscor-icon { width: 1.25em; height: 1.25em; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.piscor-badge { display: inline-flex; align-items: center; gap: var(--piscor-space-2); padding: .3rem .6rem; border-radius: 999px; font-size: var(--piscor-font-size-xs); font-weight: 700; background: var(--piscor-colour-surface-subtle); color: var(--piscor-colour-text-muted); }
.piscor-badge::before { content: ""; width: .55rem; height: .55rem; border-radius: 50%; background: currentColor; }
.piscor-badge--success { color: var(--piscor-colour-success); }
.piscor-badge--warning { color: var(--piscor-colour-warning); }
.piscor-badge--danger { color: var(--piscor-colour-danger); }
.piscor-badge--info { color: var(--piscor-colour-info); }

.piscor-progress { width: 100%; height: .75rem; overflow: hidden; border-radius: 999px; accent-color: var(--piscor-org-primary, var(--piscor-colour-action)); background: var(--piscor-colour-surface-subtle); }
.piscor-sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

@keyframes piscor-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .piscor-button { transition: none; } .piscor-button[aria-busy="true"]::before { animation-duration: 1.5s; } }
@media (forced-colors: active) { .piscor-badge::before { forced-color-adjust: none; } }

/* PiscorX premium visual refresh — August 2026 */
:root {
  --piscor-colour-canvas: #f2f4ec;
  --piscor-colour-surface: #fffdf7;
  --piscor-colour-surface-subtle: #e7eee5;
  --piscor-colour-text: #14231a;
  --piscor-colour-text-muted: #5f6f65;
  --piscor-colour-border: #ccd8ce;
  --piscor-colour-action: #245a3e;
  --piscor-colour-action-strong: #173e2a;
  --piscor-colour-accent: #c99b3f;
  --piscor-colour-focus: #bd7400;
  --piscor-radius-md: .82rem;
  --piscor-radius-lg: 1.25rem;
  --piscor-shadow-card: 0 18px 44px rgb(24 55 38 / 12%);
}
html[data-theme="dark"] {
  --piscor-colour-canvas: #06130e;
  --piscor-colour-surface: #0d271c;
  --piscor-colour-surface-subtle: #153628;
  --piscor-colour-text: #f6f2e8;
  --piscor-colour-text-muted: #adbbb2;
  --piscor-colour-border: #315244;
  --piscor-colour-action: #e0b65a;
  --piscor-colour-action-strong: #f1d68f;
  --piscor-colour-accent: #e0b65a;
  --piscor-colour-focus: #f1d68f;
  --piscor-on-action: #102017;
}
@media (prefers-color-scheme: dark) {
  html[data-theme="auto"] {
    --piscor-colour-canvas: #06130e;
    --piscor-colour-surface: #0d271c;
    --piscor-colour-surface-subtle: #153628;
    --piscor-colour-text: #f6f2e8;
    --piscor-colour-text-muted: #adbbb2;
    --piscor-colour-border: #315244;
    --piscor-colour-action: #e0b65a;
    --piscor-colour-action-strong: #f1d68f;
    --piscor-colour-accent: #e0b65a;
    --piscor-colour-focus: #f1d68f;
    --piscor-on-action: #102017;
  }
}
body {
  color: var(--piscor-colour-text);
  background:
    radial-gradient(circle at 90% 0, color-mix(in srgb, var(--piscor-colour-accent) 12%, transparent), transparent 25rem),
    var(--piscor-colour-canvas);
}
.piscor-card {
  background: linear-gradient(145deg, var(--piscor-colour-surface), color-mix(in srgb, var(--piscor-colour-surface-subtle) 28%, var(--piscor-colour-surface)));
}
.piscor-button { min-height: 48px; }