/* ============================================================
   Groundskeeper — Colors & Type
   Earth-toned, warm-paper aesthetic for "project tending"
   ============================================================ */

/* ----- Fonts ----- */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600&display=swap');
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500&display=swap');

@font-face {
  font-family: 'Cabinet Grotesk';
  src: url('./fonts/CabinetGrotesk-Regular.woff2') format('woff2');
  font-weight: 400; font-display: swap; font-style: normal;
}
@font-face {
  font-family: 'Cabinet Grotesk';
  src: url('./fonts/CabinetGrotesk-Medium.woff2') format('woff2');
  font-weight: 500; font-display: swap; font-style: normal;
}
@font-face {
  font-family: 'Cabinet Grotesk';
  src: url('./fonts/CabinetGrotesk-Bold.woff2') format('woff2');
  font-weight: 700; font-display: swap; font-style: normal;
}

:root {
  /* ----- Type families ----- */
  --font-sans:    'Cabinet Grotesk', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-display: 'Fraunces', ui-serif, Georgia, serif;
  --font-serif:   'Fraunces', ui-serif, Georgia, serif;
  --font-mono:    'JetBrains Mono', ui-monospace, monospace;

  /* ----- Type scale (px) ----- */
  --t-display-xl: 48px;  /* hero / pulse-title at comfortable */
  --t-display-lg: 32px;  /* page-title, inbox hero */
  --t-heading-md: 22px;  /* card headlines */
  --t-heading-sm: 18px;  /* drawer, section */
  --t-body-lg:    16px;
  --t-body-md:    15px;  /* body default */
  --t-body-sm:    13px;
  --t-label-xs:   11px;  /* eyebrows, uppercase tracked */

  /* ----- Surface (warm paper) ----- */
  --bg-canvas:    #F7F3EC;
  --bg-surface:   #FFFFFF;
  --bg-subtle:    #F0EAE0;
  --border:       #E2D9C9;
  --border-strong:#C9BFA8;

  /* ----- Foreground (warm charcoal) ----- */
  --text-primary:   #2A2520;
  --text-secondary: #6B6258;
  --text-tertiary:  #9A9387;

  /* ----- Earth-tone accents ----- */
  --moss:       #4F6B4F;  /* primary / brand */
  --moss-soft:  #C8D4C0;
  --clay:       #B85A3E;  /* warning-ish, project chip */
  --clay-soft:  #EBC5B8;
  --slate:      #5A7B8C;  /* in-progress, neutral info */
  --slate-soft: #D8E2E8;
  --amber:      #C8923D;  /* awaiting / due-soon */
  --amber-soft: #F0DDB8;
  --rust:       #A24B3A;  /* blocked / destructive */
  --rust-soft:  #EBC0B5;

  /* ----- Elevation (light) ----- */
  --shadow-sm: 0 1px 2px rgba(42, 37, 32, 0.04), 0 1px 1px rgba(42, 37, 32, 0.06);
  --shadow-md: 0 4px 12px rgba(42, 37, 32, 0.08), 0 2px 4px rgba(42, 37, 32, 0.04);
  --shadow-lg: 0 12px 24px rgba(42, 37, 32, 0.10);

  /* ----- Radii ----- */
  --r-xs: 3px;   /* monotags, kbd */
  --r-sm: 4px;
  --r-md: 6px;   /* buttons, fields */
  --r-lg: 8px;   /* cards */
  --r-xl: 10px;  /* modals, bulk-bar */
  --r-pill: 999px;

  /* ----- Spacing (4px base) ----- */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-7: 32px;
  --s-8: 40px;
  --s-10: 64px;
}

/* ----- Dusk (dark theme; warm charcoal) ----- */
[data-theme="dark"] {
  --bg-canvas:    #1A1815;
  --bg-surface:   #232019;
  --bg-subtle:    #2C2820;
  --border:       #3A332B;
  --border-strong:#5A5145;
  --text-primary:   #F5F0E6;
  --text-secondary: #C9C0AE;
  --text-tertiary:  #8A8377;

  --moss:       #8FB088;
  --moss-soft:  #2D3A2C;
  --clay:       #D88A6E;
  --clay-soft:  #3D2820;
  --slate:      #93B3C4;
  --slate-soft: #2C3A45;
  --amber:      #DBA85A;
  --amber-soft: #3F2F18;
  --rust:       #C47765;
  --rust-soft:  #3A1F18;
}

/* ============================================================
   Semantic styles — drop in unstyled HTML, get the system
   ============================================================ */

html, body {
  margin: 0;
  background: var(--bg-canvas);
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: var(--t-body-md);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  font-feature-settings: 'ss01', 'ss02';
}

h1, .h1 {
  font-family: var(--font-serif);
  font-size: var(--t-display-lg);
  font-weight: 500;
  letter-spacing: -0.015em;
  line-height: 1.10;
  margin: 0;
}
h2, .h2 {
  font-family: var(--font-serif);
  font-size: var(--t-heading-md);
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.20;
  margin: 0;
}
h3, .h3 {
  font-size: var(--t-heading-sm);
  font-weight: 500;
  line-height: 1.30;
  margin: 0;
}

/* eyebrow / tiny label (THE Groundskeeper signature) */
.eyebrow, .label-xs {
  font-size: var(--t-label-xs);
  font-weight: 500;
  letter-spacing: 0.072em;
  text-transform: uppercase;
  color: var(--text-tertiary);
}

p { margin: 0; }
.body-lg { font-size: var(--t-body-lg); }
.body-md { font-size: var(--t-body-md); }
.body-sm { font-size: var(--t-body-sm); }

code, kbd, samp, .mono {
  font-family: var(--font-mono);
  letter-spacing: 0.01em;
  font-size: 11px;
}

.font-serif { font-family: var(--font-serif); font-feature-settings: 'ss01'; }
.font-sans  { font-family: var(--font-sans); }
.font-mono  { font-family: var(--font-mono); }

.muted     { color: var(--text-secondary); }
.tertiary  { color: var(--text-tertiary); }