/*
 * Bess Lotto — design tokens
 *
 * Shared across marketing.html and the app shell. Material 3-flavoured
 * palette tied to the existing app theme (blue 700 primary, amber 600
 * secondary). Keep additions backwards-compatible — both the marketing
 * page and Bess Lotto.html reference these names by literal var(--name),
 * so renaming breaks layouts silently.
 */

:root {
  /* ---- Brand ---- */
  --primary:               #1976D2;   /* blue 700 — matches Flutter ThemeData seed */
  --primary-container:     #d6e4f7;
  --on-primary-container:  #002e6b;

  /* Blue scale */
  --blue-100:              #bbdefb;
  --blue-300:              #64b5f6;
  --blue-600:              #1e88e5;
  --blue-800:              #1565c0;
  --blue-900:              #0d47a1;

  /* Amber accent */
  --amber-100:             #ffecb3;
  --amber-400:             #ffca28;
  --amber-600:             #ffb300;
  --amber-700:             #ffa000;
  --amber-800:             #ff8f00;

  /* Surfaces */
  --surface:               #fbfcfe;
  --surface-container:     #eef3fb;
  --outline-variant:       #e2e8f0;
  --scrim:                 rgba(13, 22, 38, 0.55);

  /* Text */
  --on-surface-variant:    #4a5b75;
  --success:               #2e7d32;
  --success-bg:            #e8f5e9;

  /* Greys */
  --grey-100:              #f3f4f6;
  --grey-300:              #d1d5db;
  --grey-400:              #9ca3af;
  --grey-500:              #6b7280;
  --grey-700:              #374151;

  /* Tier colours (kept for design backwards-compat even while subs are off) */
  --tier-free:             #6b7280;
  --tier-pro:              #1976D2;
  --tier-proplus:          #7c4dff;
  --badge-accent:          #7c4dff;

  /* Wheel slice palette (spin-wheel) */
  --wheel-1:               #1976D2;
  --wheel-2:               #00897B;
  --wheel-3:               #C62828;
  --wheel-4:               #6A1B9A;
  --wheel-5:               #F9A825;
  --wheel-6:               #00ACC1;
  --wheel-7:               #43A047;
  --wheel-8:               #EF6C00;
  --wheel-9:               #5D4037;

  /* Ball palette */
  --ball-main:             #1976D2;
  --ball-bonus:            #ffb300;
  --ball-multiplier:       #c62828;

  /* Typography */
  --font-sans:             "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI",
                           "Helvetica Neue", Arial, sans-serif;

  /* Easing */
  --ease-standard:         cubic-bezier(0.2, 0, 0, 1);
  --ease-decelerate:       cubic-bezier(0.05, 0.7, 0.1, 1);

  /* Shadows */
  --shadow-ball:           0 4px 10px rgba(0, 0, 0, 0.18);
  --shadow-pop:            0 24px 60px rgba(13, 22, 38, 0.28);
}

/* Sensible global baseline so pages don't carry default UA padding. */
html, body { margin: 0; }
body { background: var(--surface); }

/*
 * Google "Sign in with Google" button — light variant, per Google's
 * branding guidelines: https://developers.google.com/identity/branding-guidelines
 * White background, 1px grey border, G logo at 18×18, Roboto Medium,
 * 14pt text, ~40px height, never recoloured. Used in:
 *   - Bess Lotto app Account view
 * Don't rename the class without updating bess-app.js.
 */
.gsi-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 44px;
  padding: 0 24px;
  background: #fff;
  color: #1f1f1f;
  border: 1px solid #dadce0;
  border-radius: 6px;
  font-family: "Roboto", "Helvetica Neue", Arial, sans-serif;
  font-weight: 500;
  font-size: 14px;
  letter-spacing: 0.25px;
  cursor: pointer;
  transition: background .15s, border-color .15s, box-shadow .15s, opacity .15s;
  text-decoration: none;
}
.gsi-btn:hover:not(:disabled) {
  background: #f8faff;
  border-color: #c8d1e0;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06), 0 1px 3px rgba(0, 0, 0, 0.06);
}
.gsi-btn:focus-visible {
  outline: 2px solid #4285f4;
  outline-offset: 2px;
}
.gsi-btn:active {
  background: #eef3fb;
}
.gsi-btn:disabled {
  opacity: 0.55;
  cursor: default;
}
.gsi-btn img { width: 18px; height: 18px; flex: 0 0 auto; }