/* ============================================================
   RoCo Arts Council — Design Tokens
   Drop this file into any HTML mockup with:
   <link rel="stylesheet" href="colors_and_type.css">
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,500;12..96,700;12..96,800&family=Figtree:wght@400;500;600;700&family=Nunito+Sans:wght@400;500;600;700&display=swap');

:root {
  /* -- Brand colors (sampled directly from the logo) --------- */
  --roco-purple:    #45217A;   /* primary anchor */
  --roco-yellow:    #F3CF03;   /* secondary / energy */
  --roco-crimson:   #C81344;   /* accent — alerts, emphasis */
  --roco-green:     #78BE4D;   /* accent — nature, growth */
  --roco-sky:       #4195D3;   /* accent — friendly highlight */
  --roco-navy:      #01234B;   /* deep text & dark surfaces */
  --roco-pine:      #2F7A2E;   /* dark green — safe under white/Paper text */
  --roco-lake:      #1F5A8C;   /* dark blue — safe under white/Paper text */

  /* -- Supporting neutrals ----------------------------------- */
  --roco-paper:     #FBF7EE;   /* off-white "barn paper" background */
  --roco-stone:     #E8E2D3;   /* warm gray for dividers, fields */
  --roco-ink:       #1F1B2E;   /* primary text on light */
  --roco-mute:      #6B6577;   /* secondary / caption text */
  --roco-white:     #FFFFFF;

  /* -- Semantic foreground / background --------------------- */
  --fg-1: var(--roco-ink);
  --fg-2: var(--roco-mute);
  --fg-on-purple: var(--roco-paper);
  --fg-on-yellow: var(--roco-navy);
  --fg-on-crimson: var(--roco-paper);
  --fg-on-green: var(--roco-navy);
  --fg-on-sky: var(--roco-navy);
  --fg-on-navy: var(--roco-paper);

  --bg-1: var(--roco-paper);
  --bg-2: var(--roco-white);
  --bg-dark: var(--roco-navy);
  --bg-feature: var(--roco-purple);

  --border-1: var(--roco-stone);
  --border-strong: var(--roco-navy);

  /* -- Typography -------------------------------------------- */
  --font-display: 'Bricolage Grotesque', 'Archivo Black', Georgia, serif;
  --font-body:    'Figtree', 'Nunito Sans', 'Helvetica Neue', Arial, sans-serif;

  /* Size scale (print + screen friendly) */
  --t-hero:        clamp(48px, 7vw, 96px);
  --t-h1:          clamp(36px, 5vw, 64px);
  --t-h2:          clamp(28px, 3.5vw, 44px);
  --t-h3:          22px;
  --t-subhead:     18px;
  --t-body:        16px;
  --t-small:       14px;
  --t-caption:     12px;

  /* Weights */
  --w-body:    400;
  --w-medium:  500;
  --w-strong:  700;
  --w-display: 800;

  /* Line heights */
  --lh-tight:  1.05;
  --lh-snug:   1.2;
  --lh-body:   1.55;

  /* -- Spacing & radii (quilt-inspired: 8px base grid) ------ */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 16px;
  --s-4: 24px;
  --s-5: 32px;
  --s-6: 48px;
  --s-7: 72px;
  --s-8: 96px;

  --r-sm: 4px;
  --r-md: 8px;
  --r-lg: 16px;
  --r-pill: 999px;

  /* Shadows — soft, paper-like */
  --shadow-1: 0 1px 2px rgba(31, 27, 46, 0.06), 0 2px 8px rgba(31, 27, 46, 0.06);
  --shadow-2: 0 4px 14px rgba(31, 27, 46, 0.10), 0 12px 32px rgba(31, 27, 46, 0.08);
}

/* ============================================================
   Element defaults
   ============================================================ */
html, body {
  font-family: var(--font-body);
  font-size: var(--t-body);
  font-weight: var(--w-body);
  line-height: var(--lh-body);
  color: var(--fg-1);
  background: var(--bg-1);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: var(--w-display);
  line-height: var(--lh-tight);
  letter-spacing: -0.01em;
  color: var(--roco-navy);
  margin: 0;
  text-wrap: balance;
}

h1 { font-size: var(--t-h1); }
h2 { font-size: var(--t-h2); }
h3 { font-size: var(--t-h3); font-weight: var(--w-strong); letter-spacing: 0; }

p {
  margin: 0 0 var(--s-3);
  text-wrap: pretty;
}

a {
  color: var(--roco-purple);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1.5px;
}
a:hover { color: var(--roco-crimson); }

small, .caption {
  font-size: var(--t-caption);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--fg-2);
  font-weight: var(--w-medium);
}

/* ============================================================
   Utility classes used across preview/template files
   ============================================================ */
.eyebrow {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: var(--w-strong);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--roco-crimson);
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: 12px 22px;
  border-radius: var(--r-pill);
  font-family: var(--font-body);
  font-weight: var(--w-strong);
  font-size: 15px;
  border: 2px solid transparent;
  text-decoration: none;
  cursor: pointer;
  transition: transform 120ms ease, background 120ms ease;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn--primary  { background: var(--roco-purple); color: var(--roco-paper); }
.btn--primary:hover  { background: #3A1B68; }
.btn--accent   { background: var(--roco-yellow); color: var(--roco-navy); }
.btn--accent:hover   { background: #E0BE00; }
.btn--ghost    { background: transparent; color: var(--roco-purple); border-color: var(--roco-purple); }
.btn--ghost:hover    { background: var(--roco-purple); color: var(--roco-paper); }