/* Hub-style tokens are opt-in: public and end-user layouts keep :root. */
body.ui-dark {
  color-scheme: dark;
  --workspace-ground: #191c23;
  --workspace-rail: #111318;
  --workspace-selected: #2b2a40;
  --workspace-selected-line: #49445f;
  --workspace-button: #2b303b;
  --workspace-button-hover: #363c49;
  --workspace-action-ink: #211e35;
  --workspace-action-hover: #cecaff;
  --workspace-field-line: #414857;
  --black: #eef0f6;
  --darker: #e8eaf0;
  --dark: #c2c8d3;
  --midtone: #a8b1c0;
  --light: #343946;
  --lighter: #252a34;
  --white: #1f232b;
  --font-color: var(--darker);
  --brand-1: #bab5ff;
  --brand-1-light: #34304b;
  --brand-2: #d4d0ff;
  --brand-2-light: #34304b;
  --brand-3: #9ac9b0;
  --brand-3-light: #263b32;
  --brand-4: #e5b3d7;
  --brand-4-light: #422c3d;
  --info: #a8c5e1;
  --info-light: #293746;
  --warning: #e6bd86;
  --warning-light: #3c3024;
  --error: #f0b1a6;
  --error-light: #472e2c;
  --success: #9ac9b0;
  --success-light: #263b32;
  --link: #c6c1ff;
  --highlight: #544b2b;
  --text-base: clamp(0.875rem, 0.85rem + 0.12vw, 0.9375rem);
  --text-sm: clamp(0.8125rem, 0.79rem + 0.08vw, 0.875rem);
  --text-lg: 1.125rem;
  --text-xl: clamp(1.375rem, 1.12rem + 0.4vw, 1.625rem);
  --text-2xl: clamp(1.625rem, 1.4rem + 0.5vw, 2rem);
  --space-md: clamp(1rem, 0.8rem + 0.5vw, 1.5rem);
  --field-height: 2.25rem;
  --field-font-size: var(--text-base);
  --field-padding: 0.625rem;
  --field-border: 1px solid var(--workspace-field-line);
  --field-border-radius: 0.375rem;
  --field-focus-color: var(--brand-1);
  --field-bg: #232730;
  --field-bg-disabled: #292e38;
  --field-placeholder-color: #a1a9b7;
  --field-value-color: var(--darker);
  --field-value-color-disabled: #9ba5b6;
  --field-label-color: var(--midtone);
}

body.ui-dark.ui-auth {
  --field-height: 2.75rem;
  --field-font-size: 1rem;
}

/* Prewind's container has a 360px floor. Retain its gutters and maximum,
   while allowing these scoped screens to fit narrower phone viewports. */
@media (max-width: 359px) {
  body.ui-dark .container { width: 100%; }
}

@layer styles {
  .ui-dark {
    background: var(--workspace-ground);
    line-height: 1.5;
    caret-color: var(--brand-1);
    scrollbar-color: var(--workspace-field-line) var(--workspace-ground);
    scrollbar-width: thin;

    ::selection { background: var(--workspace-selected-line); color: var(--black); }
    :is(a, button, summary, input, select, textarea):focus-visible {
      outline: 2px solid var(--brand-1);
      outline-offset: 3px;
    }
    p { line-height: 1.65; }
    :is(h1, h2, h3, h4) { line-height: 1.3; font-weight: var(--font-semibold); letter-spacing: -0.025em; }
    a { text-underline-offset: 0.2em; }
    form.simple_form > div.input { min-width: 0; }

    .ui-button {
      min-height: 2.25rem;
      padding-block: var(--space-3xs);
      border: 1px solid var(--workspace-field-line);
      border-radius: var(--field-border-radius);
      background: var(--workspace-button);
      color: var(--darker);
      box-shadow: none;
      font-size: var(--text-sm);
      line-height: 1.5;
      transition: background-color 150ms ease, border-color 150ms ease;
    }
    .ui-button:hover { background: var(--workspace-button-hover); box-shadow: none; filter: none; }
    .ui-button:is(.ui-brand-1, .ui-brand-2, .ui-brand-3, .ui-brand-4, .ui-info, .ui-success, .ui-warning, .ui-error) {
      color: var(--workspace-action-ink);
      border-color: transparent;
    }
    .ui-button.ui-brand-1 { background: var(--brand-1); }
    .ui-button.ui-brand-1:hover { background: var(--workspace-action-hover); }
    .ui-button.ui-brand-2 { background: var(--brand-2); }
    .ui-button.ui-brand-3 { background: var(--brand-3); }
    .ui-button.ui-brand-4 { background: var(--brand-4); }
    .ui-button.ui-info { background: var(--info); }
    .ui-button.ui-success { background: var(--success); }
    .ui-button.ui-warning { background: var(--warning); }
    .ui-button.ui-error { background: var(--error); }
    .ui-button.ui-neutral { background: var(--workspace-button); color: var(--darker); }
    .ui-button.ui-neutral:hover { background: var(--workspace-button-hover); }
    .ui-button-mini-round, .ui-avatar { box-shadow: none; }
    .ui-dropdown menu { border: 1px solid var(--light); }
    .ui-toast {
      min-width: 0;
      width: min(26rem, calc(100% - 2 * var(--space-sm)));
      background: var(--white);
      color: var(--darker);
      border: 1px solid var(--light);
    }
    .ui-auth-verify-digits {
      gap: var(--space-xs);
      input {
        width: clamp(2.25rem, 8vw, 3rem);
        height: 3.25rem;
        border: var(--field-border);
        border-radius: var(--field-border-radius);
        background: var(--field-bg);
        color: var(--field-value-color);
        font-variant-numeric: tabular-nums;
      }
      input:focus { box-shadow: none; outline: 2px solid var(--brand-1); outline-offset: 2px; }
    }
  }

  .ui-auth {
    .ui-auth-form { width: 100%; max-width: 26rem; }
    .ui-auth-logo { width: 10rem; margin-bottom: var(--space-md); }
    .ui-auth-form h1 { font-size: var(--text-2xl); margin: 0; overflow-wrap: anywhere; }
    .ui-auth-form p { margin-top: 0; }
    .ui-auth-form .ui-button { min-height: 2.75rem; font-size: var(--text-base); }
    .ui-auth-form .form-footer { flex-wrap: wrap; }
    .ui-auth-form .form-footer input[type="submit"] { width: 100%; }
    .ui-auth-email { overflow-wrap: anywhere; }
    .ui-auth-verify-digits { width: 100%; }
    .ui-auth-verify-digits input { flex: 1; min-width: 0; width: 0; }
  }

  @media (prefers-reduced-motion: reduce) {
    .ui-dark :is(.ui-button, .ui-button-mini-round, .ui-dropdown menu, .ui-auth-verify-digits input) { transition: none; }
  }
}