/* Dark Gen cross-cutting UI foundations.
 *
 * Load directly after app.css. This sheet is intentionally additive: existing
 * surface modules can adopt the house classes incrementally without changing
 * their DOM or losing native form semantics.
 */

:root {
  color-scheme: dark;

  /* The legacy graphite accent remains available as border emphasis. Text,
     focus, and other foreground uses take the brighter AA-safe token. */
  --border-emphasis: var(--accent);
  --focus: var(--accent-strong);
  --focus-ring: 2px solid var(--focus);
  --focus-ring-offset: 2px;

  /* One motion vocabulary: state changes stay quick; overlays have enough
     time to communicate their spatial relationship. */
  --motion-state: 160ms;
  --motion-overlay: 280ms;
  --motion-ease: cubic-bezier(0.4, 0, 0.2, 1);
  --dur: var(--motion-state);
  --dur-slow: var(--motion-overlay);
  --ease: var(--motion-ease);

  /* Caps are reserved for short, non-interactive section headings. */
  --caps-size: var(--text-xs);
  --caps-tracking: 0.1em;
  --caps-opacity: 0.5;
}

/* Preserve native light controls when the resolved app theme is light. */
[data-theme="light"] {
  color-scheme: light;
}

/* Dark-only ladder. The light theme already owns a separately tuned opaque /
 * translucent ladder in app.css and must not inherit these white alphas.
 * Hierarchy steps composite to >=3.3 Delta L* over #060607; control hover is
 * a smaller interaction step rather than another hierarchy rung. */
:root:not([data-theme="light"]) {
  --surface: rgba(255, 255, 255, 0.048);
  --surface-2: rgba(255, 255, 255, 0.080);
  --elevated: rgba(255, 255, 255, 0.110);
  --elevated-2: rgba(255, 255, 255, 0.142);
  --control-hover: rgba(255, 255, 255, 0.127);

  /* Semantic aliases for new work; the established names above keep every
     existing consumer compatible. */
  --surface-raised: var(--surface);
  --surface-panel: var(--surface-2);
  --surface-control: var(--elevated);
  --surface-elevated: var(--elevated-2);
}

/* Form controls otherwise fall back to 13.333px Arial in browsers. Keep this
 * selector unscoped so dynamically rendered modes receive identical metrics. */
button,
input,
select,
textarea,
optgroup {
  font: inherit;
}

/* Documented 10/11/12/13/14/16/20/24/32 type scale. These utilities are an
 * adoption seam; they do not override established component typography. */
.type-2xs { font-size: var(--text-2xs); }
.type-xs { font-size: var(--text-xs); }
.type-sm { font-size: var(--text-sm); }
.type-base { font-size: var(--text-base); }
.type-md { font-size: var(--text-md); }
.type-lg { font-size: var(--text-lg); }
.type-xl { font-size: var(--text-xl); }
.type-2xl { font-size: var(--text-2xl); }
.type-3xl { font-size: var(--text-3xl); }

.section-label-caps {
  font-size: var(--caps-size);
  line-height: var(--lh-snug);
  font-weight: var(--font-semi);
  letter-spacing: var(--caps-tracking);
  text-transform: uppercase;
  opacity: var(--caps-opacity);
}

/* Styled native select. The element remains the source of truth and keeps its
 * browser keyboard, form, and accessibility behaviour. */
select.field-select {
  -webkit-appearance: none;
  appearance: none;
  padding-inline-end: 22px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23828289' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 4px center;
  background-size: 14px 14px;
  cursor: pointer;
}

select.field-select:disabled {
  cursor: not-allowed;
}

/* Checkbox alignment and checked mark are class-scoped so native inputs that
 * have specialised skins are unaffected. */
input.field-check[type="checkbox"] {
  -webkit-appearance: none;
  appearance: none;
  inline-size: 16px;
  block-size: 16px;
  min-inline-size: 16px;
  margin: 0;
  vertical-align: -3px;
  flex: 0 0 16px;
  border: 1px solid var(--border);
  border-radius: 3px;
  background: var(--elevated);
  color: var(--t1);
  cursor: pointer;
  position: relative;
}

input.field-check[type="checkbox"]::after {
  content: "";
  position: absolute;
  inset-block-start: 2px;
  inset-inline-start: 5px;
  inline-size: 4px;
  block-size: 8px;
  border: solid currentColor;
  border-width: 0 2px 2px 0;
  opacity: 0;
  transform: rotate(45deg) scale(0.75);
  transform-origin: center;
}

input.field-check[type="checkbox"]:checked {
  background: var(--accent-soft);
  border-color: var(--border-emphasis);
}

input.field-check[type="checkbox"]:checked::after {
  opacity: 1;
  transform: rotate(45deg) scale(1);
}

input.field-check[type="checkbox"]:indeterminate::after {
  inset-block-start: 6px;
  inset-inline-start: 3px;
  inline-size: 8px;
  block-size: 0;
  border-width: 0 0 2px;
  opacity: 1;
  transform: none;
}

/* Low-specificity fallback. Existing component rings may refine geometry, but
 * all new keyboard-focus surfaces inherit the same contrast-safe token. */
:where(
  a,
  button,
  input,
  select,
  textarea,
  [role="button"],
  [tabindex]:not([tabindex="-1"]),
  [contenteditable="true"]
):focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-ring-offset);
}

/* Opt-in timing helpers. Components still declare the specific property being
 * animated, so this foundation never broadens their transition scope. */
.motion-state {
  transition-duration: var(--motion-state);
  transition-timing-function: var(--motion-ease);
}

.motion-overlay {
  transition-duration: var(--motion-overlay);
  transition-timing-function: var(--motion-ease);
}

@media (hover: hover) {
  select.field-select:hover {
    border-color: var(--border-hover);
  }

  input.field-check[type="checkbox"]:hover {
    border-color: var(--border-hover);
    background-color: var(--control-hover);
  }
}

/* Keep animationend/transitionend delivery while making motion effectively
 * instantaneous for people who request less motion. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0ms !important;
  }
}

/* Let Windows forced-colours mode provide its high-contrast native glyphs. */
@media (forced-colors: active) {
  select.field-select,
  input.field-check[type="checkbox"] {
    -webkit-appearance: auto;
    appearance: auto;
    background-image: none;
  }
}