/* skedworx design tokens — from the brand sheet.
 *
 * Green is primary and navy is the ink/secondary, not the other way round.
 * Everything (landing page, auth screens, the scheduler) pulls from here so the
 * product reads as one thing.
 *
 * TWO greens, and the distinction matters. The sheet's Primary Green #42D32A is a
 * bright lime: it measures 1.98:1 both as text on white and against white text, so
 * it cannot legally carry a button label or a line of copy. It is kept as the
 * identity colour for fills, borders and large shapes, where contrast rules do not
 * apply. Anything with text on it uses --brand-ink, the same hue and saturation
 * darkened until it clears AA on white (5.01:1) and on the grey surface (4.55:1).
 *
 * Slate is #64748B, not the #6474BB printed on the sheet — that value is a
 * periwinkle blue and reads as a transcription slip of the existing slate grey.
 */
:root {
  /* brand palette */
  --brand:        #42D32A;   /* Primary Green — fills and borders, never text */
  --brand-ink:    #288019;   /* text, buttons, links: 5.01:1 on white          */
  --brand-700:    #216B15;   /* hover                                          */
  --brand-300:    #78C043;   /* Accent Green   */
  --brand-tint:   #E7F6E4;

  /* --brand-ink at low alpha: a translucent version of the section header, for
     panels that should read as part of the app's own furniture rather than as a
     card sitting on top of it. Over white this composites to about #E7F1E6.
     Text on it needs the -on-wash pair below; plain --ink-600 lands at 4.11:1. */
  --brand-wash:      #2880191c;
  --brand-wash-line: #28801938;
  --ink-600-on-wash: #5E6D83;   /* 4.54:1 on the wash, 5.26:1 on white */
  --brand-on-wash:   #267B18;   /* 4.61:1 on the wash, 5.35:1 on white */
  --accent:       #78C043;
  --accent-600:   #5f9c33;
  --accent-tint:  #eef8e4;

  --ink:          #0F1720;   /* Deep Navy      */
  --ink-600:      #64748B;   /* Slate          */
  --ink-400:      #8b98a8;
  --line:         #e4e8ed;

  --surface:      #F3F4F6;   /* Light Gray     */
  --surface-2:    #FFFFFF;

  /* Semantic status colours for schedule/grid data, NOT brand colours.
   *
   * The brand sheet has no alert palette, so the warm and cool tints below are
   * derived. They are deliberately muted so the app still reads as green, navy,
   * white and slate. Confine them to data states — never buttons, nav, or
   * decoration — or the brand hierarchy inverts.
   *
   * On pace reuses the readable brand green rather than restating the hex, so
   * "healthy" and "skedworx" stay literally the same colour. It follows
   * --brand-ink, not --brand: the lime identity green is unreadable as text.
   *
   * The two foregrounds are a shade darker than the brief's #B86B00 and #3B6FB6,
   * which landed at 3.66:1 and 4.42:1 on their own backgrounds — under the 4.5:1
   * AA floor for the 0.78rem grid text. Hue and saturation are unchanged and the
   * backgrounds are untouched, so the muted look survives; see the ratios below.
   */
  --status-on-pace:         var(--brand-ink);  /* 4.6:1 on its background */
  --status-on-pace-bg:      #EAF6E2;
  --status-over-target:     #A05D00;        /* 4.63:1 — informational, not an error */
  --status-over-target-bg:  #FFF1D6;
  --status-idle:            #3A6CB1;        /* 4.62:1 */
  --status-idle-bg:         #E8F0FA;

  --radius:       16px;      /* rounded corners are a stated brand trait */
  --radius-sm:    12px;
  --shadow:       0 1px 2px rgba(15,23,32,.05), 0 8px 24px rgba(15,23,32,.06);
  --shadow-lg:    0 2px 4px rgba(15,23,32,.06), 0 18px 48px rgba(15,23,32,.10);

  --font: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

body { font-family: var(--font); color: var(--ink); }

h1, h2, h3, h4, h5, .fw-bold, .navbar-brand { font-weight: 600; letter-spacing: -.015em; }

/* ---------------------------------------------------------------- wordmark */
.sw-mark {
  display: inline-flex; align-items: center; gap: .4rem;
  text-decoration: none; line-height: 1;
}
.sw-mark img { display: block; object-fit: contain; }

/* Wordmark set in Poppins to match the logo's two-tone treatment: "sked" in the
   deep navy, "worx" in green. Uses --brand-ink so the wordmark stays legible at
   nav sizes; the lime identity green is for shapes, not letterforms. */
.sw-word { font-weight: 700; letter-spacing: -.035em; }
.sw-word .a { color: var(--ink); }
.sw-word .b { color: var(--brand-ink); }

/* ---------------------------------------------------------------- buttons */
.btn { border-radius: 10px; font-weight: 600; }
.btn-brand, .btn-accent {
  background: var(--brand-ink); border-color: var(--brand-ink); color: #fff;
}
.btn-brand:hover, .btn-brand:focus,
.btn-accent:hover, .btn-accent:focus {
  background: var(--brand-700); border-color: var(--brand-700); color: #fff;
}
/* Secondary per the sheet: white fill, green border and text. */
.btn-ghost {
  background: #fff; border-color: var(--brand-ink); color: var(--brand-ink);
}
.btn-ghost:hover, .btn-ghost:focus {
  background: var(--brand-tint); border-color: var(--brand-ink); color: var(--brand-700);
}
.btn-outline-light:hover { color: var(--brand-ink); }

/* ---------------------------------------------------------------- surfaces */
.s-card {
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  height: 100%;
}
.s-card .s-icon {
  width: 42px; height: 42px; border-radius: 12px;
  background: var(--brand-tint); color: var(--brand-ink);
  display: grid; place-items: center; margin-bottom: .85rem;
}
.s-card h3 { font-size: 1.02rem; font-weight: 600; margin: 0 0 .35rem; }
.s-card p  { font-size: .92rem; color: var(--ink-600); margin: 0; line-height: 1.6; }

/* ------------------------------------------------------------ badges/tags */
.s-tag {
  display: inline-block; font-size: .72rem; font-weight: 600;
  padding: .18rem .6rem; border-radius: 999px;
}
.s-tag.division { background: var(--brand-ink); color: #fff; }
.s-tag.dh       { background: var(--ink-600); color: #fff; }
.s-tag.playoff  { background: var(--surface); color: var(--ink-600); }

/* ------------------------------------------------------- data status states */
/* Shared by any data surface that needs to show pace: the weekly grid uses them
   on cells, the legend on badges. Colour is never the only signal — see the
   .wk-flag marker and the screen-reader text the grid emits alongside. */
.status-on-pace     { background: var(--status-on-pace-bg);     color: var(--status-on-pace); }
.status-over-target { background: var(--status-over-target-bg); color: var(--status-over-target); }
.status-idle        { background: var(--status-idle-bg);        color: var(--status-idle); }

/* Non-colour marker paired with the state. Sized down so the game count stays
   the thing you read first. */
.wk-flag {
  font-weight: 700;
  margin-left: .15em;
  font-size: .92em;
  opacity: .85;
}

.eyebrow {
  text-transform: uppercase; letter-spacing: .14em;
  font-size: .72rem; font-weight: 700; color: var(--brand-ink);
  margin-bottom: .6rem;
}
.section-title { font-weight: 700; letter-spacing: -.025em; line-height: 1.15; }
.lead-muted { color: var(--ink-600); font-size: 1.03rem; line-height: 1.65; }

/* form controls pick up the brand focus ring */
.form-control:focus, .form-select:focus {
  border-color: var(--brand-300);
  box-shadow: 0 0 0 .2rem rgba(120,192,67,.25);
}

@media (prefers-reduced-motion: reduce) {
  /* Decoration only. Status indicators are exempt below: switching them off left a
     static full-width bar that reads as "finished" rather than "working", which is
     worse than the motion it was avoiding. */
  *:not(.spinner-border):not(.progress-bar-indeterminate) {
    animation: none !important;
    transition: none !important;
  }
}