/* =====================================================================
   Davie Vet Center — Colors & Type
   Inspired by: the bold navy + warm orange storefront mural, the vintage
   letterpress / stockyard-sign wordmark, and the family-clinic warmth
   of a small-town Florida vet practice.
   ===================================================================== */

/* ---------- Fonts (Google Font substitutions, see README) ---------- */
@import url('https://fonts.googleapis.com/css2?family=Alfa+Slab+One&family=Rye&family=Source+Sans+3:ital,wght@0,400;0,500;0,600;0,700;1,400&family=Caveat:wght@400;600&display=swap');

:root {
  /* =============================================================
     COLOR SYSTEM
     Two brand colors do the heavy lifting:
       - Navy (from the building mural background)
       - Orange (from the golden-retriever silhouette)
     A warm cream + charcoal supply the neutral range.
     ============================================================= */

  /* ---- Brand: Navy (primary) ---- */
  --navy-50:  #EEF2F7;
  --navy-100: #D5DEEB;
  --navy-200: #A9BBD4;
  --navy-300: #7994B7;
  --navy-400: #4D6E97;
  --navy-500: #2E5082;   /* mural mid */
  --navy-600: #1E3A66;   /* mural deep — primary brand */
  --navy-700: #162C4E;
  --navy-800: #0F1F38;
  --navy-900: #0A1628;

  /* ---- Brand: Orange (secondary / accent) ---- */
  --orange-50:  #FFF4EC;
  --orange-100: #FFE1CC;
  --orange-200: #FFC099;
  --orange-300: #FF9E66;
  --orange-400: #F17F3C;
  --orange-500: #E36B26;   /* golden-retriever silhouette */
  --orange-600: #C5551A;
  --orange-700: #9E4214;
  --orange-800: #73300E;
  --orange-900: #4A1F08;

  /* ---- Neutrals: warm cream → charcoal ---- */
  --cream-50:  #FBF7F1;    /* page background, soft */
  --cream-100: #F5EFE3;
  --cream-200: #ECE3D0;
  --cream-300: #DCCEB2;
  --stone-400: #A89F8C;
  --stone-500: #7A7464;
  --stone-600: #524E42;
  --ink-700:   #2E2A22;
  --ink-800:   #1C1A15;
  --ink-900:   #0D0C0A;    /* letterpress black */

  /* ---- Semantic: surfaces & fg ---- */
  --bg:            var(--cream-50);
  --bg-subtle:     var(--cream-100);
  --bg-raised:     #FFFFFF;
  --bg-inverse:    var(--navy-600);
  --bg-hero:       var(--navy-600);

  --fg1:           var(--ink-900);     /* headlines, body */
  --fg2:           var(--stone-600);   /* secondary copy */
  --fg3:           var(--stone-500);   /* captions, meta */
  --fg-muted:      var(--stone-400);
  --fg-on-navy:    var(--cream-50);
  --fg-on-orange:  #FFFFFF;

  --border:        var(--cream-200);
  --border-strong: var(--stone-400);
  --border-ink:    var(--ink-900);     /* letterpress rule */

  /* ---- Brand semantic ---- */
  --brand:          var(--navy-600);
  --brand-hover:    var(--navy-700);
  --brand-pressed:  var(--navy-800);
  --accent:         var(--orange-500);
  --accent-hover:   var(--orange-600);
  --accent-pressed: var(--orange-700);

  /* ---- Status ---- */
  --success: #2E7D4F;
  --success-bg: #E5F2EA;
  --warning: #C88213;
  --warning-bg: #FBEFD6;
  --danger:  #B43A2B;
  --danger-bg: #F7E1DD;
  --info:    var(--navy-500);
  --info-bg: var(--navy-50);

  /* =============================================================
     TYPE SYSTEM
     Three roles:
       - Display: Alfa Slab One — chunky, letterpress-wordmark vibe
       - Accent : Rye          — the western/vintage-sign flourish
       - Body   : Source Sans 3 — clean, friendly, readable
     ============================================================= */

  --font-display: 'Alfa Slab One', 'Rockwell', Georgia, serif;
  --font-accent:  'Rye', 'Alfa Slab One', Georgia, serif;
  --font-body:    'Source Sans 3', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-hand:    'Caveat', 'Brush Script MT', cursive;
  --font-mono:    ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* Sizes — generous for a local clinic's approachable tone */
  --text-xs:   12px;
  --text-sm:   14px;
  --text-base: 16px;
  --text-md:   18px;
  --text-lg:   22px;
  --text-xl:   28px;
  --text-2xl:  36px;
  --text-3xl:  48px;
  --text-4xl:  64px;
  --text-5xl:  84px;

  --leading-tight:  1.15;
  --leading-snug:   1.3;
  --leading-normal: 1.5;
  --leading-loose:  1.7;

  --tracking-tight:  -0.01em;
  --tracking-normal:  0em;
  --tracking-wide:    0.06em;
  --tracking-widest:  0.18em;   /* sign-painter all-caps labels */

  /* =============================================================
     SPACING & SHAPE
     ============================================================= */
  --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;

  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 14px;
  --radius-xl: 22px;
  --radius-pill: 999px;

  /* Shadows — soft, warm; avoid cold gray drop-shadows */
  --shadow-sm: 0 1px 2px rgba(30, 58, 102, 0.08);
  --shadow-md: 0 4px 12px rgba(30, 58, 102, 0.10), 0 1px 2px rgba(30, 58, 102, 0.06);
  --shadow-lg: 0 12px 32px rgba(30, 58, 102, 0.16), 0 2px 6px rgba(30, 58, 102, 0.08);
  --shadow-inset: inset 0 2px 0 rgba(255, 255, 255, 0.35);
  --shadow-letterpress: 2px 2px 0 var(--ink-900);   /* sign-board vibe */

  /* Motion */
  --ease-out-soft: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-in-out:   cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast:   120ms;
  --dur-base:   220ms;
  --dur-slow:   420ms;
}

/* =============================================================
   SEMANTIC TYPE ROLES
   Use these class names directly, or @apply-like via vars.
   ============================================================= */

body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--fg1);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.h-display,
.h1 {
  font-family: var(--font-display);
  font-size: var(--text-4xl);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg1);
  font-weight: 400; /* Alfa Slab One only has 400 */
}

.h2 {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  line-height: var(--leading-tight);
  color: var(--fg1);
  font-weight: 400;
}

.h3 {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  line-height: var(--leading-snug);
  color: var(--fg1);
  font-weight: 400;
}

.h4 {
  font-family: var(--font-body);
  font-size: var(--text-xl);
  line-height: var(--leading-snug);
  font-weight: 700;
  color: var(--fg1);
}

.eyebrow {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--tracking-widest);
  color: var(--accent);
}

.sign-accent {
  font-family: var(--font-accent);
  font-size: var(--text-2xl);
  letter-spacing: var(--tracking-normal);
  color: var(--navy-600);
}

.lead {
  font-family: var(--font-body);
  font-size: var(--text-md);
  line-height: var(--leading-loose);
  color: var(--fg2);
}

.p {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--fg1);
}

.caption {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--fg3);
}

.label {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--fg2);
}

.hand {
  font-family: var(--font-hand);
  font-size: var(--text-xl);
  color: var(--orange-600);
}

.mono {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
}