/* ============================================================
   CANES ILLINOIS BRANDING — black and gold
   ------------------------------------------------------------
   This is the only file you need to touch to change how the app
   looks. Loaded after styles.css, so anything here wins.

   To change colors: edit the values under "Brand colors".
   The logo files in /public/brand/ were all generated from your
   source-logo.png (the gold C over Illinois). If you ever send a
   new one, replace source-logo.png and regenerate these:
     logo.png        wide logo for light backgrounds
     logo-light.png  wide logo for the black header (white lettering)
     icon-512.png    square mark, used as the phone app icon
     icon-192.png    same mark, smaller
     icon-maskable-512.png  padded, for Android's circular crop
     apple-touch-icon.png   same mark, 180x180, for iPhone
     favicon.png     32x32, the browser tab icon
   Keep the same file names and everything picks them up.

   ONE THING TO KNOW ABOUT GOLD
   Gold text on white is close to unreadable (about 1.7:1 contrast,
   where 4.5:1 is the accessibility floor). So gold is used as a
   BACKGROUND with black text on it, never as text on white. Black
   carries the text and the links. If you change the gold, keep
   that rule or the app gets hard to read in sunlight — which is
   where half your parents will be using it.
   ============================================================ */

:root {
  /* --- Brand colors --- */
  /* Pure black on purpose: the logo has a black background baked into it, so the
     header must match exactly or you see a faint square edge around the mark. */
  --canes-black: #000000;   /* header, primary text, buttons */
  --canes-ink:   #1c1c1c;   /* pressed/hover state for black */
  --canes-gold:  #fdb801;   /* accents and primary buttons (always with black text) */
  --canes-gold-deep: #a87700; /* borders, chart marks, gold on white */
  --canes-gold-text: #755200; /* the darkest gold that stays readable on white */
  --canes-sand:  #f5f5f4;   /* page background */

  /* --- Wired into the app (usually no need to edit below) --- */
  --brand: var(--canes-black);
  --brand-dark: var(--canes-ink);
  --brand-soft: #fdf1d5;    /* pale gold wash for hovers and highlights */
  --bg: var(--canes-sand);
  --ink: #14161a;
  --line: #e2e2df;
  --muted: #63666e;
}

/* ---------- header ---------- */

.topbar {
  background: var(--canes-black);
  border-bottom: 3px solid var(--canes-gold);
}
.topbar .brand {
  display: flex;
  align-items: center;
  gap: .55rem;
  font-weight: 800;
  letter-spacing: -.01em;
  flex: 0 0 auto;
}
/* height + width:auto keeps the aspect ratio; flex-shrink:0 stops the row
   from compressing it horizontally when the nav needs room. */
.topbar .brand img {
  height: 30px;
  width: auto;
  display: block;
  flex: 0 0 auto;
  max-width: none;
}
@media (max-width: 720px) {
  .topbar .brand img { height: 24px; }
}
.topbar nav button.active {
  background: var(--canes-gold);
  color: var(--canes-black);
  font-weight: 700;
}
.topbar nav button.active:hover { background: var(--canes-gold); color: var(--canes-black); }

/* ---------- buttons: gold face, black lettering ---------- */

button, .btn {
  background: var(--canes-gold);
  color: var(--canes-black);
  border-color: var(--canes-gold-deep);
}
button:hover, .btn:hover {
  background: var(--canes-gold-deep);
  color: var(--canes-black);
}
button.secondary {
  background: #fff;
  color: var(--canes-black);
  border-color: #c9c9c5;
}
button.secondary:hover { background: #f2f2ef; }
button.ghost { background: transparent; color: var(--canes-gold-text); border-color: transparent; }
button.ghost:hover { background: var(--brand-soft); color: var(--canes-ink); }
button.danger { background: var(--red); color: #fff; border-color: var(--red); }
button.danger:hover { background: #8f1d17; color: #fff; }

/* Links stay near-black: gold on white cannot be read. */
a { color: var(--canes-gold-text); }
a:hover { color: var(--canes-ink); }

/* ---------- accents ---------- */

.tabs button.active { color: var(--canes-black); border-bottom-color: var(--canes-gold); }
input:focus, select:focus, textarea:focus {
  outline: 2px solid var(--canes-gold);
  border-color: var(--canes-gold-deep);
}
.slot:hover { background: var(--brand-soft); border-color: var(--canes-gold-deep); color: var(--canes-black); }
.slot.selected { background: var(--canes-gold); border-color: var(--canes-gold-deep); color: var(--canes-black); }

.tag.blue { background: var(--brand-soft); color: #6b4f00; }
.tag.red { background: #fdecec; color: #b3261e; }

.kpi .value { color: var(--canes-black); }
.kpi { border-top: 3px solid var(--canes-gold); }

/* Chart marks sit on white, so they use the deeper gold, not the bright one. */
.chart .bar { background: var(--canes-gold-deep); }
.chart .bar:hover { background: var(--canes-black); }
.meter > span { background: var(--canes-gold-deep); }

.appt { border-left-color: var(--canes-black); background: #f1f1ef; color: #23262b; }
.appt.lesson { border-left-color: var(--canes-gold-deep); background: var(--brand-soft); color: #4a3800; }
.appt.lesson_block {
  border-left-color: var(--canes-gold-deep); color: #4a3800;
  background: repeating-linear-gradient(135deg, #fffaf0, #fffaf0 7px, #fdf0d0 7px, #fdf0d0 14px);
}

.auth-hero .pitch h1 { color: var(--canes-black); }
.auth-hero .pitch h1::after {
  content: '';
  display: block;
  width: 68px;
  height: 4px;
  margin-top: .6rem;
  background: var(--canes-gold);
  border-radius: 2px;
}

/* Marketing / public pages */
.hero-mark { display: flex; align-items: center; gap: .9rem; margin-bottom: 1rem; }
.hero-mark img { height: 64px; width: auto; }
.hero-mark .words { line-height: 1.15; }
.hero-mark .words strong { display: block; font-size: 1.35rem; color: var(--canes-black); }
.hero-mark .words span { font-size: .9rem; color: var(--muted); }

@media print {
  .topbar, #toasts, button { display: none !important; }
  .card { box-shadow: none; border-color: #ccc; break-inside: avoid; }
}