/* trukz — page styling.
 *
 * Every colour here names a design-system token from tokens.css. No hex is
 * written by hand except inside the Google button, where the values are
 * Google's and are fixed by their branding guidelines rather than chosen.
 *
 * Tokens are HSL triplets, Tailwind's convention, so they are consumed as
 * hsl(var(--token)) and can take an alpha without a second variable.
 */

*, *::before, *::after { box-sizing: border-box; }

html { color-scheme: dark; }
html[data-theme="light"] { color-scheme: light; }

body {
  margin: 0;
  min-height: 100vh;
  font-family: Barlow, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  background: hsl(var(--background));
  color: hsl(var(--foreground));
  /* The theme flip should feel deliberate rather than like a reload. Short
   * enough not to lag the toggle. */
  transition: background-color .18s ease, color .18s ease;
}

.shell { max-width: 30rem; margin: 0 auto; padding: 4rem 1.5rem; }

h1 {
  font-family: Bungee, ui-sans-serif, system-ui, sans-serif;
  text-transform: uppercase;
  letter-spacing: .02em;
  font-size: 2.25rem;
  margin: 0 0 .25rem;
}
.tagline { color: hsl(var(--muted-foreground)); margin: 0 0 2.5rem; }

.card {
  background: hsl(var(--card));
  border-radius: .75rem;
  padding: 1.75rem;
}

.notice {
  background: hsl(var(--muted));
  border-left: 3px solid hsl(var(--status-danger));
  padding: .75rem 1rem;
  border-radius: .25rem;
  margin: 0 0 1.25rem;
  font-size: .9375rem;
}

.who { display: flex; align-items: center; gap: .75rem; margin-bottom: 1.25rem; }
.who img { width: 2.5rem; height: 2.5rem; border-radius: 50%; }
.who .email { font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: .875rem; }

/* --- Sign out, and other buttons that are ours ---------------------------- */
.btn-ghost {
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: "Barlow Condensed", ui-sans-serif, system-ui, sans-serif;
  text-transform: uppercase; font-weight: 700; letter-spacing: .04em;
  background: transparent;
  color: hsl(var(--foreground));
  border: 1px solid hsl(var(--border));
  border-radius: .5rem;
  padding: .5rem 1rem;
  font-size: .875rem;
  cursor: pointer;
  text-decoration: none;
  transition: background-color .15s ease;
}
.btn-ghost:hover { background: hsl(var(--muted)); }

/* --- The Google button ----------------------------------------------------
 * These values are Google's, not ours. Their branding guidelines fix the fill,
 * the stroke, the wording and the logo, as a condition of using the OAuth
 * client, so this block deliberately does NOT use design-system tokens.
 *
 * Two of Google's three approved themes are implemented, and the page picks
 * whichever matches the current theme: dark fill #131314 on our dark ground,
 * white fill #FFFFFF on our light one. The logo is the standard colour
 * gradient mark, served from our own origin, never recoloured and never
 * shown without the button boundary and action text.
 *
 * Google Sans Medium is specified by the guidelines and is not a font we can
 * license, so the stack falls back to Roboto and then the system UI face.
 */
.gsi {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 12px;                      /* Google's web spec: 12px from logo to text */
  height: 40px;
  padding: 0 12px;
  border-radius: 4px;
  font-family: "Google Sans", Roboto, ui-sans-serif, system-ui, sans-serif;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: .25px;
  text-decoration: none;
  cursor: pointer;
  border: 1px solid #747775;
  background: #FFFFFF;
  color: #1F1F1F;
  transition: box-shadow .15s ease;
}
html[data-theme="dark"] .gsi {
  background: #131314;
  border-color: #8E918F;
  color: #E3E3E3;
}
.gsi:hover { box-shadow: 0 1px 3px rgba(0,0,0,.3); }
.gsi img { width: 18px; height: 18px; display: block; }

/* --- Theme switcher ------------------------------------------------------- */
.theme-switch {
  position: fixed; top: 1rem; right: 1rem;
  display: inline-flex;
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  border-radius: .5rem;
  overflow: hidden;
}
.theme-switch button {
  background: transparent; border: 0; cursor: pointer;
  padding: .4rem .6rem;
  color: hsl(var(--muted-foreground));
  font: inherit; font-size: .75rem;
  display: inline-flex; align-items: center;
}
.theme-switch button:hover { background: hsl(var(--muted)); }
.theme-switch button[aria-pressed="true"] {
  background: hsl(var(--accent-base));
  color: #fff;
}
.theme-switch svg { width: 1rem; height: 1rem; display: block; }