/* theme.css — Work Better Together brand, as tokens. index.html reads only these.
   Source: wbt-brand skill (2026 WBT Brand Guide). Fonts are Google Fonts (open license). */

@import url("https://fonts.googleapis.com/css2?family=League+Spartan:wght@500;700&family=Lora:ital,wght@0,400;0,700;1,400;1,700&family=Inconsolata:wght@500&display=swap");

:root {
  /* Surfaces + ink */
  --bg: #F9F8F2;              /* Clear White */
  --ink: #1F1E1E;             /* Grounded Black */
  --heading: #061A49;         /* Steady Blue */
  --muted: #6B6B6B;
  --border: #E4E2DE;
  --accent: #2531A5;          /* Intentional Blue: links, CTAs, active tab, focus ring */
  --accent-ink: #F9F8F2;
  --eyebrow: #1E4D5C;         /* Clean Slate */

  /* Nav + sign-in screen */
  --nav-bg: #061A49;          /* Steady Blue */
  --nav-ink: #F9F8F2;
  --nav-divider: rgba(249,248,242,0.22);
  --nav-logo-height: 30px;
  --login-bg: #061A49;
  --login-ink: #F9F8F2;
  --login-logo-height: 56px;

  /* Cards */
  --card-bg: #FFFFFF;
  --card-border: #E4E2DE;
  --card-accent-height: 0;    /* editorial, no colored bar */
  --card-hover-transform: scale(1.01);
  --card-hover-shadow: 0 4px 6px rgba(31,30,30,0.07), 0 2px 4px rgba(31,30,30,0.05);
  --icon-bg: rgba(37,49,165,0.10);
  --grid-gap: 2px;            /* the WBT mosaic gap, deliberate */
  --howto-bg: #E0E8EB;        /* Slate Light */
  --bullet: '•';

  /* Chips + tags */
  --chip-bg: rgba(31,30,30,0.08);
  --chip-active-bg: #061A49;
  --chip-active-ink: #F9F8F2;
  --status-bg: #FDF0EA;       /* Warning Light */
  --status-ink: #B55312;      /* Honest Ochre */

  /* Shape */
  --radius-card: 0;
  --radius-icon: 0;
  --radius-button: 10px;
  --radius-pill: 9999px;
  --radius-tag: 2px;
  --max-width: 960px;

  /* Type */
  --font-display: "League Spartan", system-ui, sans-serif;
  --font-body: "Lora", Georgia, serif;
  --font-mono: "Inconsolata", "Courier New", monospace;
  --display-weight: 700;
  --display-tracking: -0.025em;
  --title-tracking: -0.01em;
  --deck-font: var(--font-display);
  --label-font: var(--font-display);
  --label-weight: 500;
  --label-transform: uppercase;
  --label-tracking: 0.14em;
  --eyebrow-tracking: 0.18em;
  --cta-font: var(--font-mono);
  --cta-weight: 500;
  --cta-transform: uppercase;
  --cta-tracking: 0.12em;
}