/* ===================================================================
 * tw-tokens.css — TriviaWorks unified design tokens (2026-04-29)
 *
 * Authoritative semantic-token layer for the editor unification arc
 * (memory/editor-unification-arc-2026-04-29.md). Coexists with
 * tw-design-tokens-v4.css; v4 tokens remain in place for surfaces
 * not yet retoken'd. Phase 5 retokens migrate them across.
 *
 * Token namespaces (no collisions with v4 --paper-* / --ink-v4 / etc.):
 *   --surface-*    canvas / raised / overlay / scrim
 *   --text-*       primary / secondary / tertiary / inverse / link
 *   --border-*     subtle / strong / focus
 *   --accent-*     brand
 *   --state-*      success / warning / error / info (text + bg pair)
 *   --pool-*       internal / external / archive (semantic, distinct
 *                  from v4 --pool-import/internal/external)
 *   --type-*       semantic type scale (Gotham)
 *   --space-*      4 / 8 / 12 / 16 / 24 / 32 / 48 / 64
 *   --radius-*     xs / sm / md / lg / xl / pill
 *   --elev-*       elevation shadows 0..4
 *   --motion-*     instant / quick / standard / deliberate
 *   --ease-*       standard / enter / exit / emphasized
 *   --row-h, --pad-x, --pad-y, --gap, --target-min  (density-driven)
 *   --z-*          z-index scale
 *
 * Theming:
 *   :root                 light (default)
 *   [data-theme="dark"]   dark (explicit)
 *   prefers-color-scheme: dark on :root:not([data-theme])  system fallback
 *
 * Density (default compact):
 *   [data-density="comfortable"]   larger row + padding
 *
 * Reduced motion:
 *   prefers-reduced-motion: reduce  collapses all motion tokens to 0
 *
 * Fonts: assumes Gotham faces are loaded by tw-design-tokens-v4.css
 * (which any page using the new tokens should also include for now).
 * =================================================================== */

:root {
  /* ====== Surfaces ====== */
  --surface-base:     #FBF8F2;
  --surface-raised:   #FFFFFF;
  --surface-overlay:  #FAF6E9;
  --surface-sunk:     #F3EEE3;
  --surface-scrim:    rgba(28, 20, 16, 0.45);

  /* ====== Borders ====== */
  --border-subtle:    #EFE7D3;
  --border-strong:    #D9CFBD;
  --border-focus:     #1F6FEB;

  /* ====== Text ====== */
  --text-primary:     #1C1410;
  --text-secondary:   #3D342E;
  --text-tertiary:    #6B5F55;
  --text-inverse:     #F2ECD9;
  --text-link:        #1F6FEB;
  --text-link-hover:  #1858C7;

  /* ====== Brand ====== */
  --accent-primary:         #8A6500;
  --accent-primary-pressed: #5E4500;
  --accent-primary-bg:      #FCF6E6;
  --accent-primary-hi:      #C89200;

  /* ====== Semantic state ====== */
  --state-success:     #2E6B3E;
  --state-success-bg:  #DDEEDF;
  --state-warning:     #B06A14;
  --state-warning-bg:  #FBEBD2;
  --state-error:       #A83A2A;
  --state-error-bg:    #F7DCD6;
  --state-info:        #2B5E8A;
  --state-info-bg:     #D6E4F0;

  /* ====== Pool tints (semantic; distinct from v4 names) ====== */
  --pool-internal:     #3B6B4A;
  --pool-internal-bg:  #F0F7EC;
  --pool-external:     #3E4F87;
  --pool-external-bg:  #EDF0F9;
  --pool-archive:      #6A5784;
  --pool-archive-bg:   #F1ECF6;

  /* ====== Type scale (Gotham) ====== */
  --type-family-sans: 'Gotham','Inter','Söhne',-apple-system,system-ui,sans-serif;
  --type-family-mono: 'JetBrains Mono','Berkeley Mono',ui-monospace,monospace;

  --type-display-large: 800 56px/64px var(--type-family-sans);
  --type-display:       700 32px/40px var(--type-family-sans);
  --type-h1:            700 24px/30px var(--type-family-sans);
  --type-h2:            700 18px/24px var(--type-family-sans);
  --type-h3:            500 14px/20px var(--type-family-sans);
  --type-body:          400 14px/20px var(--type-family-sans);
  --type-body-strong:   500 14px/20px var(--type-family-sans);
  --type-caption:       400 12px/16px var(--type-family-sans);
  --type-mono:          400 13px/18px var(--type-family-mono);

  --type-h3-tracking:   0.06em;
  --type-h3-transform:  uppercase;

  /* ====== Spacing scale ====== */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;

  /* ====== Radius ====== */
  --radius-xs:   3px;
  --radius-sm:   5px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   18px;
  --radius-pill: 999px;

  /* ====== Elevation ====== */
  --elev-0: none;
  --elev-1: 0 1px 0 rgba(28, 20, 16, 0.04);
  --elev-2: 0 1px 3px rgba(28, 20, 16, 0.06), 0 0 0 0.5px rgba(28, 20, 16, 0.04);
  --elev-3: 0 6px 20px rgba(28, 20, 16, 0.08), 0 1px 3px rgba(28, 20, 16, 0.05);
  --elev-4: 0 24px 64px rgba(28, 20, 16, 0.14), 0 2px 8px rgba(28, 20, 16, 0.06);

  /* ====== Motion ====== */
  --motion-instant:    0ms;
  --motion-quick:      120ms;
  --motion-standard:   200ms;
  --motion-deliberate: 300ms;

  --ease-standard:   cubic-bezier(0.4, 0, 0.2, 1);
  --ease-enter:      cubic-bezier(0, 0, 0.2, 1);
  --ease-exit:       cubic-bezier(0.4, 0, 1, 1);
  --ease-emphasized: cubic-bezier(0.22, 1, 0.36, 1);

  /* ====== Density (compact default) ====== */
  --row-h:        32px;
  --pad-x:        8px;
  --pad-y:        4px;
  --gap:          var(--space-2);
  --target-min:   32px;
  --input-h:      32px;

  /* ====== Z-index scale ====== */
  --z-base:    0;
  --z-raised:  1;
  --z-sticky:  10;
  --z-drawer:  100;
  --z-modal:   1000;
  --z-toast:   2000;
  --z-palette: 3000;
}

/* Comfortable density — larger row + padding for new editors */
[data-density="comfortable"] {
  --row-h:      40px;
  --pad-x:      12px;
  --pad-y:      8px;
  --gap:        var(--space-3);
  --target-min: 40px;
  --input-h:    40px;
}

/* Dark theme — explicit selector */
[data-theme="dark"] {
  --surface-base:     #0E0B08;
  --surface-raised:   #18130E;
  --surface-overlay:  #221B14;
  --surface-sunk:     #0A0805;
  --surface-scrim:    rgba(0, 0, 0, 0.6);

  --border-subtle:    #2C231A;
  --border-strong:    #3F3328;
  --border-focus:     #4D8FF5;

  --text-primary:     #F2ECD9;
  --text-secondary:   #C9BDAE;
  --text-tertiary:    #998A7D;
  --text-inverse:     #1C1410;
  --text-link:        #4D8FF5;
  --text-link-hover:  #6FA6F8;

  --accent-primary:         #C89200;
  --accent-primary-pressed: #FFD84D;
  --accent-primary-bg:      #2A2014;
  --accent-primary-hi:      #FFD84D;

  --state-success:     #6FCB7E;
  --state-success-bg:  #1A2A1F;
  --state-warning:     #E8A554;
  --state-warning-bg:  #2C2014;
  --state-error:       #E87A6A;
  --state-error-bg:    #2C1814;
  --state-info:        #6FA6F8;
  --state-info-bg:     #14202C;

  --pool-internal:     #6FCB7E;
  --pool-internal-bg:  #1A2A1F;
  --pool-external:     #8FA0DD;
  --pool-external-bg:  #1A1F2C;
  --pool-archive:      #B0A0DD;
  --pool-archive-bg:   #1F1A2C;

  --elev-1: 0 1px 0 rgba(0, 0, 0, 0.3);
  --elev-2: 0 1px 3px rgba(0, 0, 0, 0.5), 0 0 0 0.5px rgba(255, 255, 255, 0.03);
  --elev-3: 0 6px 20px rgba(0, 0, 0, 0.6), 0 1px 3px rgba(0, 0, 0, 0.5);
  --elev-4: 0 24px 64px rgba(0, 0, 0, 0.8), 0 2px 8px rgba(0, 0, 0, 0.5);
}

/* System dark-mode — only when no explicit theme set */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --surface-base:     #0E0B08;
    --surface-raised:   #18130E;
    --surface-overlay:  #221B14;
    --surface-sunk:     #0A0805;
    --surface-scrim:    rgba(0, 0, 0, 0.6);

    --border-subtle:    #2C231A;
    --border-strong:    #3F3328;
    --border-focus:     #4D8FF5;

    --text-primary:     #F2ECD9;
    --text-secondary:   #C9BDAE;
    --text-tertiary:    #998A7D;
    --text-inverse:     #1C1410;
    --text-link:        #4D8FF5;
    --text-link-hover:  #6FA6F8;

    --accent-primary:         #C89200;
    --accent-primary-pressed: #FFD84D;
    --accent-primary-bg:      #2A2014;
    --accent-primary-hi:      #FFD84D;

    --state-success:     #6FCB7E;
    --state-success-bg:  #1A2A1F;
    --state-warning:     #E8A554;
    --state-warning-bg:  #2C2014;
    --state-error:       #E87A6A;
    --state-error-bg:    #2C1814;
    --state-info:        #6FA6F8;
    --state-info-bg:     #14202C;

    --pool-internal:     #6FCB7E;
    --pool-internal-bg:  #1A2A1F;
    --pool-external:     #8FA0DD;
    --pool-external-bg:  #1A1F2C;
    --pool-archive:      #B0A0DD;
    --pool-archive-bg:   #1F1A2C;

    --elev-1: 0 1px 0 rgba(0, 0, 0, 0.3);
    --elev-2: 0 1px 3px rgba(0, 0, 0, 0.5), 0 0 0 0.5px rgba(255, 255, 255, 0.03);
    --elev-3: 0 6px 20px rgba(0, 0, 0, 0.6), 0 1px 3px rgba(0, 0, 0, 0.5);
    --elev-4: 0 24px 64px rgba(0, 0, 0, 0.8), 0 2px 8px rgba(0, 0, 0, 0.5);
  }
}

/* Reduced motion — collapse motion durations to 0 */
@media (prefers-reduced-motion: reduce) {
  :root,
  [data-theme="dark"],
  [data-theme="light"] {
    --motion-quick:      0ms;
    --motion-standard:   0ms;
    --motion-deliberate: 0ms;
  }
}

/* ===================================================================
 * Utility classes — semantic type roles + focus ring
 * Components should prefer the var() form; these utilities exist for
 * one-off applications and template authoring.
 * =================================================================== */

.tw-display-large { font: var(--type-display-large); color: var(--text-primary); }
.tw-display       { font: var(--type-display);       color: var(--text-primary); }
.tw-h1            { font: var(--type-h1);            color: var(--text-primary); }
.tw-h2            { font: var(--type-h2);            color: var(--text-primary); }
.tw-h3 {
  font: var(--type-h3);
  color: var(--text-secondary);
  letter-spacing: var(--type-h3-tracking);
  text-transform: var(--type-h3-transform);
}
.tw-body          { font: var(--type-body);          color: var(--text-primary); }
.tw-body-strong   { font: var(--type-body-strong);   color: var(--text-primary); }
.tw-caption       { font: var(--type-caption);       color: var(--text-tertiary); }
.tw-mono          { font: var(--type-mono);          color: var(--text-secondary); }

/* Consistent focus ring across all interactive elements that opt in */
.tw-focus-ring:focus-visible,
[data-tw-focus]:focus-visible {
  outline: 2px solid var(--border-focus);
  outline-offset: 2px;
  border-radius: inherit;
}

/* Visually-hidden but screen-reader-accessible (ARIA labels, sr-only) */
.tw-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}