/* ============================================================
   The Word Tools — shared button system
   Single source of truth for button color, shape, and weight.
   Import on any page:  <link rel="stylesheet" href="/css/buttons.css">
   Tokens are defined for light (default) and dark themes.
   ============================================================ */

:root {
  /* --- action button roles --- */
  --tw-primary:            #3A3A3C;
  --tw-primary-press:      #2C2C2E;
  --tw-primary-ink:        #FFFFFF;

  --tw-secondary:          #EDEDF0;
  --tw-secondary-press:    #E0E0E5;
  --tw-secondary-ink:      #1C1C1E;

  --tw-danger:             #FF745B;
  --tw-danger-press:       #EC5C44;
  --tw-danger-ink:         #FFFFFF;

  /* --- section accents --- */
  --tw-accent:             #00D084;   /* default "go" accent (first live tool) */
  --tw-accent-press:       #00B472;
  --tw-accent-ink:         #08301F;

  --tw-accent-gold:        #FCB900;
  --tw-accent-gold-press:  #E3A600;
  --tw-accent-gold-ink:    #1C1C1E;

  /* --- home nav --- */
  --tw-nav-pill:           #000000;
  --tw-nav-pill-ink:       #FFFFFF;
  --tw-nav-pill-border:    transparent;

  /* --- geometry --- */
  --tw-radius:             12px;
  --tw-radius-pill:        999px;
  --tw-focus:              #007AFF;
}

/* Dark tokens — explicit choice */
:root[data-theme="dark"] {
  --tw-primary:            #48484A;
  --tw-primary-press:      #3A3A3C;
  --tw-primary-ink:        #FFFFFF;

  --tw-secondary:          #2C2C2E;
  --tw-secondary-press:    #3A3A3C;
  --tw-secondary-ink:      #F2F2F7;

  --tw-nav-pill:           #2C2C2E;
  --tw-nav-pill-ink:       #FFFFFF;
  --tw-nav-pill-border:    #48484A;

  --tw-focus:              #0A84FF;
}

/* Dark tokens — system preference when the user hasn't chosen */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --tw-primary:            #48484A;
    --tw-primary-press:      #3A3A3C;
    --tw-primary-ink:        #FFFFFF;

    --tw-secondary:          #2C2C2E;
    --tw-secondary-press:    #3A3A3C;
    --tw-secondary-ink:      #F2F2F7;

    --tw-nav-pill:           #2C2C2E;
    --tw-nav-pill-ink:       #FFFFFF;
    --tw-nav-pill-border:    #48484A;

    --tw-focus:              #0A84FF;
  }
}

/* ---------- base button ---------- */
.tw-btn {
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', sans-serif;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  text-decoration: none;
  border: none;
  cursor: pointer;
  font-weight: 700;
  font-size: 15px;
  line-height: 1;
  padding: 13px 18px;
  border-radius: var(--tw-radius);
  transition: background .12s ease, transform .12s ease;
}
.tw-btn:focus-visible { outline: 3px solid var(--tw-focus); outline-offset: 2px; }
.tw-btn--block { width: 100%; }

/* ---------- roles ---------- */
.tw-btn--primary   { background: var(--tw-primary);      color: var(--tw-primary-ink); }
.tw-btn--primary:active,   .tw-btn--primary.is-pressed   { background: var(--tw-primary-press);   transform: scale(.97); }

.tw-btn--secondary { background: var(--tw-secondary);    color: var(--tw-secondary-ink); }
.tw-btn--secondary:active, .tw-btn--secondary.is-pressed { background: var(--tw-secondary-press); transform: scale(.97); }

.tw-btn--accent    { background: var(--tw-accent);       color: var(--tw-accent-ink); }
.tw-btn--accent:active,    .tw-btn--accent.is-pressed    { background: var(--tw-accent-press);    transform: scale(.97); }

.tw-btn--gold      { background: var(--tw-accent-gold);  color: var(--tw-accent-gold-ink); }
.tw-btn--gold:active,      .tw-btn--gold.is-pressed      { background: var(--tw-accent-gold-press); transform: scale(.97); }

.tw-btn--danger    { background: var(--tw-danger);       color: var(--tw-danger-ink); }
.tw-btn--danger:active,    .tw-btn--danger.is-pressed    { background: var(--tw-danger-press);    transform: scale(.97); }

/* ---------- nav pill (Home / top nav) ---------- */
.tw-btn--pill {
  background: var(--tw-nav-pill);
  color: var(--tw-nav-pill-ink);
  border: 1.5px solid var(--tw-nav-pill-border);
  border-radius: var(--tw-radius-pill);
  padding: 12px 28px;
  font-size: 17px;
}
.tw-btn--pill:active, .tw-btn--pill.is-pressed { transform: scale(.97); filter: brightness(1.15); }

/* ---------- circular exit / close (gray circle with an X) ---------- */
.tw-exit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--tw-secondary);
  color: var(--tw-secondary-ink);
  border: none;
  cursor: pointer;
  font-size: 20px;
  line-height: 1;
  text-decoration: none;
  font-family: inherit;
  flex-shrink: 0;
  transition: background .12s ease, transform .12s ease;
}
.tw-exit:active { background: var(--tw-secondary-press); transform: scale(.96); }
.tw-exit:focus-visible { outline: 3px solid var(--tw-focus); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  .tw-btn, .tw-exit { transition: none; }
}