/* Local customisations of the Graphical "Resume Tee" theme (gui.css).
   Loaded after the generated theme and taking precedence over it, per the
   theme contract. Requested by Lance on 2026-10-08:
   1. All-neutral: no violet accent. The accent and focus colours map to the
      theme's own neutrals in each mode.
   2. Tertiary (outline) and ghost buttons get a visible hover and pressed
      fill; the theme's hovers are faint neutrals that vanish on the panel.
   3. Status text: positive is the theme's --success (green), negative its
      --error (red). As small text those sit at ~4:1 on the panel, under AA,
      so text uses a shade of each that passes (lighter in dark mode, deeper
      in light): --success-text, --error-text. Borders and icons use the
      tokens as they are.
   If these are later set in Graphical and re-downloaded, delete the matching
   rules here. */

.gui[data-mode="dark"] {
  --color-1: var(--neutral-8);
  --color-1-transparent: var(--neutral-8-transparent);
  --cte-accent: var(--neutral-8);
  --cte-focus: var(--neutral-8);
  --navigation-active-background: var(--neutral-8);
  --option-badge-background: var(--neutral-8);
  --emphasis-chart-fill: var(--neutral-8-transparent);
}
.gui[data-mode="light"] {
  --color-1: var(--neutral-7);
  --color-1-transparent: var(--neutral-7-transparent);
  --cte-accent: var(--neutral-7);
  --cte-focus: var(--neutral-7);
  --navigation-active-background: var(--neutral-7);
  --option-badge-background: var(--neutral-7);
  --emphasis-chart-fill: var(--neutral-7-transparent);
}

/* tertiary and ghost buttons: a real hover and pressed state */
.gui[data-mode] .gui-button:is([data-variant="outline"], [data-variant="ghost"]):hover:not(:disabled):not([aria-disabled="true"]) {
  background: var(--neutral-4);
}
.gui[data-mode] .gui-button:is([data-variant="outline"], [data-variant="ghost"]):active:not(:disabled):not([aria-disabled="true"]) {
  background: var(--neutral-5);
}

/* status text that passes AA (see 3 above) */
.gui[data-mode="dark"] {
  --success-text: color-mix(in srgb, var(--success) 80%, #fff);
  --error-text: color-mix(in srgb, var(--error) 75%, #fff);
}
.gui[data-mode="light"] {
  --success-text: color-mix(in srgb, var(--success) 85%, #000);
  --error-text: color-mix(in srgb, var(--error) 85%, #000);
}

/* 4. On touch screens, text fields are 16px: iPhone Safari zooms the page
      into any field set smaller (the theme's is 15px) when it's tapped. */
@media (pointer: coarse) {
  .gui .gui-input { --size-s: 16px; }
  .gui .slider-value { font-size: 16px; }
}