/* ==========================================================================
   Fushift Portfolio — shared theme tokens (light + dark)
   Canonical spec: ~/DESIGN.md. Keep this file and that document in sync.

   Every app on fushift.fun should link this file and js/fushift-theme.js
   rather than redefining colours. Reference the tokens (var(--fx-bg) …) in
   app CSS; hardcoded hex values will not follow the theme.

   Theme resolution order:
     1. :root[data-theme="light"|"dark"]  — explicit user choice, always wins
     2. prefers-color-scheme               — the visitor's system setting
     3. light                              — fallback
   ========================================================================== */

:root {
  color-scheme: light;

  /* --- surfaces --- */
  --fx-bg: #F7F6F3;           /* warm bone canvas */
  --fx-surface: #FFFFFF;      /* cards, inner containers */
  --fx-surface-2: #F2F1EC;    /* recessed wells, table stripes */
  --fx-border: #EAEAEA;
  --fx-border-strong: #D8D8D8;

  /* --- type --- */
  --fx-text: #111111;         /* off-black, never #000 */
  --fx-text-muted: #62615E;
  --fx-text-inverse: #F7F6F3;

  /* --- spot pastels: badges and status only, never section fills --- */
  --fx-pale-blue: #E1F3FE;
  --fx-pale-blue-ink: #1F4A66;
  --fx-pale-green: #EDF3EC;
  --fx-pale-green-ink: #2C5138;
  --fx-pale-amber: #FBF3DB;
  --fx-pale-amber-ink: #6B5312;
  --fx-pale-red: #FBE9E7;
  --fx-pale-red-ink: #7A2E22;

  /* --- interactive --- */
  --fx-accent: #111111;       /* primary button fill */
  --fx-accent-hover: #333333;
  --fx-accent-ink: #F7F6F3;   /* text on accent */
  --fx-focus: #111111;

  --fx-overlay: rgba(247, 246, 243, 0.94);
  --fx-shadow-hover: 0 4px 12px rgba(0, 0, 0, 0.03);

  /* --- shape / space / motion --- */
  --fx-r-sm: 4px;
  --fx-r-md: 8px;
  --fx-r-lg: 12px;
  --fx-r-pill: 999px;

  --fx-s-sm: 8px;
  --fx-s-md: 16px;
  --fx-s-lg: 24px;
  --fx-s-xl: 32px;

  --fx-font-display: 'Instrument Serif', Georgia, serif;
  --fx-font-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  --fx-font-mono: 'SF Mono', 'JetBrains Mono', Monaco, Consolas, monospace;

  --fx-ease: cubic-bezier(0.23, 1, 0.32, 1);
  --fx-dur: 160ms;
}

/* Dark values live in one place and are applied from two selectors below, so
   the palette is never defined twice and can't drift between them. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;

    --fx-bg: #121211;
    --fx-surface: #1A1A18;
    --fx-surface-2: #232320;
    --fx-border: #2C2C28;
    --fx-border-strong: #3D3D37;

    --fx-text: #F2F1ED;
    --fx-text-muted: #A3A19B;
    --fx-text-inverse: #121211;

    --fx-pale-blue: #16303D;
    --fx-pale-blue-ink: #9ED8F5;
    --fx-pale-green: #1B2C21;
    --fx-pale-green-ink: #A7CFB0;
    --fx-pale-amber: #322A14;
    --fx-pale-amber-ink: #E8CE84;
    --fx-pale-red: #3A211C;
    --fx-pale-red-ink: #F0A99C;

    --fx-accent: #F2F1ED;
    --fx-accent-hover: #FFFFFF;
    --fx-accent-ink: #121211;
    --fx-focus: #F2F1ED;

    --fx-overlay: rgba(18, 18, 17, 0.94);
    --fx-shadow-hover: 0 4px 12px rgba(0, 0, 0, 0.35);
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;

  --fx-bg: #121211;
  --fx-surface: #1A1A18;
  --fx-surface-2: #232320;
  --fx-border: #2C2C28;
  --fx-border-strong: #3D3D37;

  --fx-text: #F2F1ED;
  --fx-text-muted: #A3A19B;
  --fx-text-inverse: #121211;

  --fx-pale-blue: #16303D;
  --fx-pale-blue-ink: #9ED8F5;
  --fx-pale-green: #1B2C21;
  --fx-pale-green-ink: #A7CFB0;
  --fx-pale-amber: #322A14;
  --fx-pale-amber-ink: #E8CE84;
  --fx-pale-red: #3A211C;
  --fx-pale-red-ink: #F0A99C;

  --fx-accent: #F2F1ED;
  --fx-accent-hover: #FFFFFF;
  --fx-accent-ink: #121211;
  --fx-focus: #F2F1ED;

  --fx-overlay: rgba(18, 18, 17, 0.94);
  --fx-shadow-hover: 0 4px 12px rgba(0, 0, 0, 0.35);
}

/* ==========================================================================
   Theme toggle — injected by js/fushift-theme.js
   ========================================================================== */

.fx-theme-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  border: 1px solid var(--fx-border);
  border-radius: var(--fx-r-pill);
  background: var(--fx-surface);
  color: var(--fx-text);
  font-family: var(--fx-font-mono);
  font-size: 11px;
  font-weight: 650;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  line-height: 1;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  transition: background var(--fx-dur) var(--fx-ease),
              color var(--fx-dur) var(--fx-ease),
              border-color var(--fx-dur) var(--fx-ease),
              transform var(--fx-dur) var(--fx-ease);
}

.fx-theme-toggle:hover {
  border-color: var(--fx-border-strong);
  background: var(--fx-surface-2);
}
.fx-theme-toggle:active { transform: scale(0.97); }
.fx-theme-toggle:focus-visible {
  outline: 2px solid var(--fx-focus);
  outline-offset: 2px;
}

.fx-theme-toggle svg {
  width: 14px;
  height: 14px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Only the icon for the active mode is shown; the other two collapse. */
.fx-theme-toggle [data-icon] { display: none; }
:root[data-theme-mode="auto"]  .fx-theme-toggle [data-icon="auto"],
:root[data-theme-mode="light"] .fx-theme-toggle [data-icon="light"],
:root[data-theme-mode="dark"]  .fx-theme-toggle [data-icon="dark"] { display: block; }

/* Floating placement, used when the page has no .fx-theme-slot to put it in. */
.fx-theme-toggle--floating {
  position: fixed;
  top: 16px;
  right: 16px;
  z-index: 2147483000;   /* above app chrome, below nothing that matters */
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.10);
}
:root[data-theme="dark"] .fx-theme-toggle--floating,
:root:not([data-theme="light"]) .fx-theme-toggle--floating {
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
}

@media print { .fx-theme-toggle { display: none !important; } }

@media (prefers-reduced-motion: reduce) {
  .fx-theme-toggle { transition: none; }
  .fx-theme-toggle:active { transform: none; }
}

/* ==========================================================================
   Opt-in base layer — add class="fx" to <html> or <body>.
   Deliberately NOT applied to bare element selectors: most apps here predate
   this file and set their own colours, so a global body{} rule would fight
   them. Apps that have been converted carry the class.
   ========================================================================== */

.fx,
.fx body {
  background: var(--fx-bg);
  color: var(--fx-text);
  font-family: var(--fx-font-body);
  transition: background var(--fx-dur) var(--fx-ease),
              color var(--fx-dur) var(--fx-ease);
}

.fx a { color: var(--fx-text); text-underline-offset: 2px; }
.fx a:hover { color: var(--fx-text-muted); }

.fx hr { border: 0; border-top: 1px solid var(--fx-border); }

.fx code, .fx kbd, .fx pre, .fx samp { font-family: var(--fx-font-mono); }

.fx ::selection { background: var(--fx-text); color: var(--fx-bg); }

.fx-card {
  background: var(--fx-surface);
  border: 1px solid var(--fx-border);
  border-radius: var(--fx-r-md);
}

.fx-badge {
  display: inline-block;
  padding: 4px 12px;
  border-radius: var(--fx-r-pill);
  background: var(--fx-border);
  color: var(--fx-text-muted);
  font-family: var(--fx-font-mono);
  font-size: 11px;
  font-weight: 650;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.fx-badge--live  { background: var(--fx-pale-green); color: var(--fx-pale-green-ink); }
.fx-badge--wip   { background: var(--fx-pale-amber); color: var(--fx-pale-amber-ink); }
.fx-badge--info  { background: var(--fx-pale-blue);  color: var(--fx-pale-blue-ink); }
.fx-badge--error { background: var(--fx-pale-red);   color: var(--fx-pale-red-ink); }