/* =============================================================
   COUNTRY BARN GROOMING — Colors & Type
   -------------------------------------------------------------
   Load via:
     <link rel="stylesheet" href="colors_and_type.css">

   Font stack: Alfa Slab One (display), Lora (serif body),
   Nunito (UI sans). All loaded from Google Fonts.
   ============================================================= */

@import url('https://fonts.googleapis.com/css2?family=Alfa+Slab+One&family=Lora:ital,wght@0,400;0,500;0,600;0,700;1,400;1,600&family=Nunito:wght@400;500;600;700;800&display=swap');

:root {
  /* ------------------------------------------------------------
     COLOR SCALES — raw palette
     ------------------------------------------------------------ */

  /* TABASCO — warm brick red — primary brand color */
  --tabasco-lightest: #f6eae7;
  --tabasco-lighter:  #edd5d0;
  --tabasco-light:    #c16c5b;
  --tabasco-base:     #a72d15;   /* primary */
  --tabasco-dark:     #852410;
  --tabasco-darker:   #421208;
  --tabasco-darkest:  #320d06;

  /* WILLIAM — slate blue-gray (dog bowl, supporting) */
  --william-lightest: #ebeef0;
  --william-lighter:  #d7dde1;
  --william-light:    #748a96;
  --william-base:     #395969;   /* secondary */
  --william-dark:     #2d4754;
  --william-darker:   #16232a;
  --william-darkest:  #111a1f;

  /* BULL SHOT — rustic brown / saddle (barn trim, accents) */
  --bullshot-lightest: #f2ede8;
  --bullshot-lighter:  #e5dbd2;
  --bullshot-light:    #a68161;
  --bullshot-base:     #814c1e;   /* accent */
  --bullshot-dark:     #673c18;
  --bullshot-darker:   #331e0c;
  --bullshot-darkest:  #261609;

  /* NEUTRAL — grayscale */
  --neutral-lightest: #f2f2f2;
  --neutral-lighter:  #d8d8d8;
  --neutral-light:    #b2b2b2;
  --neutral-base:     #7f7f7f;
  --neutral-dark:     #4c4c4c;
  --neutral-darker:   #191919;
  --neutral-darkest:  #000000;

  /* BASE */
  --white: #ffffff;

  /* Cream — a warm off-white used as the dominant page background.
     Pulled from the logo's typography fill so the brand feels of-a-piece. */
  --cream:        #faf5ec;
  --cream-deep:   #f1e8d4;

  /* ------------------------------------------------------------
     SEMANTIC COLORS
     ------------------------------------------------------------ */

  /* Surfaces */
  --bg:              var(--cream);          /* page background */
  --bg-elevated:     var(--white);          /* cards, modals */
  --bg-sunken:       var(--cream-deep);     /* sunken panels, hover wells */
  --bg-inverse:      var(--william-darker); /* footer, dark sections */
  --bg-brand:        var(--tabasco-base);   /* hero/feature blocks */
  --bg-brand-soft:   var(--tabasco-lightest);

  /* Foreground (text on light surfaces) */
  --fg-1:    var(--william-darker);   /* highest emphasis body */
  --fg-2:    var(--william-dark);     /* default body */
  --fg-3:    var(--william-light);    /* muted / meta */
  --fg-4:    var(--neutral-light);    /* disabled */
  --fg-on-brand:   var(--cream);      /* text on tabasco/dark */
  --fg-on-inverse: var(--cream);

  /* Brand accents (text/iconography use) */
  --accent:        var(--tabasco-base);
  --accent-hover:  var(--tabasco-dark);
  --accent-press:  var(--tabasco-darker);
  --accent-soft:   var(--tabasco-lightest);

  --secondary:        var(--william-base);
  --secondary-hover:  var(--william-dark);
  --secondary-soft:   var(--william-lightest);

  --saddle:        var(--bullshot-base);
  --saddle-soft:   var(--bullshot-lightest);

  /* Borders / dividers */
  --border-subtle:  rgba(22, 35, 42, 0.08);
  --border:         rgba(22, 35, 42, 0.14);
  --border-strong:  rgba(22, 35, 42, 0.28);
  --border-brand:   var(--tabasco-base);

  /* Feedback (derived; intentionally restrained) */
  --success: #3f6b3a;
  --warning: #b8772a;
  --danger:  var(--tabasco-base);
  --info:    var(--william-base);

  /* ------------------------------------------------------------
     TYPOGRAPHY — families
     ------------------------------------------------------------ */
  --font-display: "Alfa Slab One", "Rockwell", "Roboto Slab", Georgia, serif;
  --font-serif:   "Lora", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --font-sans:    "Nunito", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --font-mono:    ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  /* Type scale (modular, ~1.25) */
  --fs-12: 0.75rem;
  --fs-14: 0.875rem;
  --fs-16: 1rem;
  --fs-18: 1.125rem;
  --fs-20: 1.25rem;
  --fs-24: 1.5rem;
  --fs-30: 1.875rem;
  --fs-36: 2.25rem;
  --fs-48: 3rem;
  --fs-60: 3.75rem;
  --fs-72: 4.5rem;
  --fs-96: 6rem;

  /* Line heights */
  --lh-tight:  1.05;
  --lh-snug:   1.2;
  --lh-normal: 1.45;
  --lh-loose:  1.65;

  /* Letter spacing — display tends to want a touch of positive tracking */
  --ls-display:  0.01em;
  --ls-eyebrow:  0.18em;   /* uppercase tags */
  --ls-button:   0.04em;

  /* ------------------------------------------------------------
     SPACING / SHAPE / ELEVATION
     ------------------------------------------------------------ */
  --space-0: 0;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 128px;

  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --radius-xl: 28px;
  --radius-pill: 999px;

  /* Shadows — soft, warm-toned (using william undertone, not pure black) */
  --shadow-xs: 0 1px 2px rgba(22, 35, 42, 0.06);
  --shadow-sm: 0 2px 6px rgba(22, 35, 42, 0.08);
  --shadow-md: 0 8px 18px -6px rgba(22, 35, 42, 0.14), 0 2px 4px rgba(22, 35, 42, 0.06);
  --shadow-lg: 0 18px 40px -12px rgba(22, 35, 42, 0.22), 0 4px 8px rgba(22, 35, 42, 0.06);
  --shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.4), inset 0 -1px 0 rgba(22, 35, 42, 0.06);

  /* Motion */
  --ease-out:  cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-in:   cubic-bezier(0.55, 0.06, 0.68, 0.19);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast:   140ms;
  --dur:        220ms;
  --dur-slow:   360ms;
}

/* =============================================================
   BASE / RESET-ish
   ============================================================= */
html {
  -webkit-text-size-adjust: 100%;
  font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
}
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg-2);
  font-family: var(--font-sans);
  font-size: var(--fs-16);
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* =============================================================
   SEMANTIC TEXT STYLES — drop-in classes & element styles
   ============================================================= */

/* Display — for hero & poster moments. Uppercased like the logo. */
.display, h1.display {
  font-family: var(--font-display);
  font-weight: 400;          /* Alfa Slab One only ships at 400 */
  font-size: clamp(2.5rem, 5vw + 1rem, 5.5rem);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-display);
  color: var(--fg-1);
  text-transform: uppercase;
  text-wrap: balance;
}

/* Headings — slab/display for h1-h2, serif for h3-h4, sans for h5-h6 */
h1, .h1 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--fs-48);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-display);
  color: var(--fg-1);
  margin: 0 0 var(--space-5);
  text-wrap: balance;
}
h2, .h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--fs-36);
  line-height: var(--lh-snug);
  color: var(--fg-1);
  margin: 0 0 var(--space-4);
  text-wrap: balance;
}
h3, .h3 {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: var(--fs-24);
  line-height: var(--lh-snug);
  color: var(--fg-1);
  margin: 0 0 var(--space-3);
}
h4, .h4 {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: var(--fs-20);
  line-height: var(--lh-snug);
  color: var(--fg-1);
  margin: 0 0 var(--space-3);
}
h5, .h5 {
  font-family: var(--font-sans);
  font-weight: 800;
  font-size: var(--fs-14);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--fg-2);
  margin: 0 0 var(--space-2);
}
h6, .h6 {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: var(--fs-12);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--fg-3);
  margin: 0 0 var(--space-2);
}

/* Body copy — Lora is the default reading face */
p, .body {
  font-family: var(--font-serif);
  font-size: var(--fs-18);
  line-height: var(--lh-loose);
  color: var(--fg-2);
  margin: 0 0 var(--space-4);
  text-wrap: pretty;
}
.body-sm {
  font-family: var(--font-serif);
  font-size: var(--fs-16);
  line-height: var(--lh-loose);
  color: var(--fg-2);
}
.lead {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--fs-24);
  line-height: var(--lh-normal);
  color: var(--fg-2);
}

/* UI / interface text — Nunito */
.ui, .ui * {
  font-family: var(--font-sans);
}
.ui-label {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: var(--fs-14);
  color: var(--fg-1);
}
.eyebrow {
  font-family: var(--font-sans);
  font-weight: 800;
  font-size: var(--fs-12);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--accent);
}
.caption {
  font-family: var(--font-sans);
  font-size: var(--fs-12);
  color: var(--fg-3);
}
.meta {
  font-family: var(--font-sans);
  font-size: var(--fs-14);
  color: var(--fg-3);
}

/* Links */
a {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color var(--dur) var(--ease-out);
}
a:hover { color: var(--accent-hover); }
a:active { color: var(--accent-press); }

/* Code */
code, kbd, samp, pre {
  font-family: var(--font-mono);
  font-size: 0.92em;
  background: var(--bg-sunken);
  border: 1px solid var(--border-subtle);
  padding: 0.1em 0.35em;
  border-radius: var(--radius-xs);
}