/* ============================================================
   PAWLINE DESIGN SYSTEM
   Colors & Typography foundations
   ============================================================ */

@font-face {
  font-family: "Agatho";
  src: url("fonts/Agatho_Regular.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* Rotunda demo font removed — it embedded a "PERSONAL USE ONLY"
   watermark glyph. Falling back to Quattrocento Sans (Google Font)
   until a production license for 3a Rotunda is purchased. */

/* Google Font fallbacks (close in feeling to provided fonts):
   - Agatho (a refined transitional/didone-flavored serif) → Cormorant Garamond / EB Garamond
   - 3a Rotunda Light (a warm humanist sans / soft sans) → Quattrocento Sans / Outfit Light
*/
@import url("https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;500;600;700&family=Quattrocento+Sans:wght@400;700&display=swap");

:root {
  /* ---------- BRAND PALETTE ----------
     Sourced from the Pawline logo + brand notes.
     Hunter Green is the lead color; Tan/Taupe are warm accents. */
  --brand-hunter:        #2d4837;   /* Hunter green — wordmark, primary brand */
  --brand-hunter-deep:   #1f3327;   /* Deeper hover/press */
  --brand-hunter-soft:   #3e5b48;   /* Lighter hunter, used sparingly */
  --brand-tan:           #9b7f65;   /* Tan — paw print, accents */
  --brand-tan-warm:      #9b8065;   /* Tan (warmer, near-identical) */
  --brand-taupe:         #9e8366;   /* Taupe — secondary accent */
  --brand-tan-light:     #c4a98a;   /* Lighter tan tint for backgrounds */
  --brand-cream:         #f5efe6;   /* Soft cream — background washes */
  --brand-bone:          #faf6ef;   /* Lightest cream — page bg */
  --brand-paper:         #ffffff;   /* Pure white — cards on cream bg */

  /* ---------- NEUTRALS (warm-leaning) ---------- */
  --ink-100: #faf7f2;
  --ink-200: #ece6dc;
  --ink-300: #d6cdbe;
  --ink-400: #b3a895;
  --ink-500: #87796a;
  --ink-600: #5a4f43;
  --ink-700: #3a3128;
  --ink-800: #221c16;
  --ink-900: #15110d;

  /* ---------- SEMANTIC COLOR TOKENS ---------- */
  --bg-page:        var(--brand-bone);
  --bg-surface:     var(--brand-paper);
  --bg-surface-2:   var(--brand-cream);
  --bg-inverse:     var(--brand-hunter);

  --fg-1:           var(--brand-hunter);     /* primary text */
  --fg-2:           var(--ink-600);          /* secondary text */
  --fg-3:           var(--ink-500);          /* tertiary / meta */
  --fg-muted:       var(--ink-400);
  --fg-on-dark:     var(--brand-bone);
  --fg-accent:      var(--brand-tan);

  --border-subtle:  rgba(45, 72, 55, 0.10);
  --border-default: rgba(45, 72, 55, 0.18);
  --border-strong:  rgba(45, 72, 55, 0.32);
  --border-tan:     rgba(155, 127, 101, 0.40);

  /* Status (kept warm + restrained — no pure red/blue) */
  --status-success: #4f7058;
  --status-warning: #c89561;
  --status-error:   #a04a3c;

  /* ---------- TYPE FAMILIES ----------
     Display = Agatho (serif, used for the wordmark vibe)
     Body    = Rotunda (humanist sans, light)
     Fallbacks chosen to keep proportions if web fonts fail. */
  --font-display: "Agatho", "Cormorant Garamond", "EB Garamond", Georgia, "Times New Roman", serif;
  --font-body:    "Quattrocento Sans", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono:    ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* ---------- TYPE SCALE ----------
     Editorial, generous. Display sizes are airy. */
  --fs-display-xl: 88px;   /* hero wordmark */
  --fs-display-lg: 64px;
  --fs-display-md: 48px;
  --fs-h1:         40px;
  --fs-h2:         32px;
  --fs-h3:         24px;
  --fs-h4:         20px;
  --fs-body-lg:    18px;
  --fs-body:       16px;
  --fs-body-sm:    14px;
  --fs-caption:    12px;
  --fs-eyebrow:    11px;   /* small caps tagline */

  --lh-tight:   1.05;
  --lh-snug:    1.2;
  --lh-normal:  1.5;
  --lh-loose:   1.7;

  /* Letter-spacing — tight on display serif, generously tracked on small caps */
  --ls-display: 0.005em;
  --ls-body:    0;
  --ls-caps-sm: 0.18em;   /* "DOG GROOMING" treatment */
  --ls-caps-lg: 0.34em;   /* hero wordmark "PAWLINE" */

  /* ---------- SPACING (4px base, warm rhythm) ---------- */
  --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;

  /* ---------- RADII ---------- */
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 14px;
  --radius-xl: 22px;
  --radius-pill: 999px;
  --radius-circle: 50%;

  /* ---------- SHADOWS (soft, warm, never harsh) ---------- */
  --shadow-xs: 0 1px 2px rgba(45, 72, 55, 0.06);
  --shadow-sm: 0 2px 6px rgba(45, 72, 55, 0.07), 0 1px 2px rgba(45, 72, 55, 0.04);
  --shadow-md: 0 6px 18px rgba(45, 72, 55, 0.08), 0 2px 6px rgba(45, 72, 55, 0.05);
  --shadow-lg: 0 18px 40px rgba(45, 72, 55, 0.12), 0 4px 10px rgba(45, 72, 55, 0.06);
  --shadow-inset-soft: inset 0 0 0 1px rgba(45, 72, 55, 0.08);

  /* ---------- MOTION ----------
     Calm, slow, never bouncy. Matches the brand promise of "no rush". */
  --ease-calm:     cubic-bezier(0.4, 0.0, 0.2, 1);
  --ease-emphasis: cubic-bezier(0.2, 0.0, 0.0, 1);
  --dur-fast:   160ms;
  --dur-normal: 280ms;
  --dur-slow:   480ms;
}

/* ============================================================
   SEMANTIC TYPOGRAPHY
   Use these classes (or copy properties) on real elements.
   ============================================================ */

.t-eyebrow {
  font-family: var(--font-body);
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--ls-caps-sm);
  text-transform: uppercase;
  color: var(--fg-accent);
  font-weight: 400;
}

.t-display {
  font-family: var(--font-display);
  font-size: var(--fs-display-lg);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-display);
  color: var(--fg-1);
  font-weight: 400;
}

.t-wordmark {
  /* The signature "PAWLINE" treatment: serif, all caps, very wide tracking */
  font-family: var(--font-display);
  font-size: var(--fs-display-lg);
  letter-spacing: var(--ls-caps-lg);
  text-transform: uppercase;
  color: var(--brand-hunter);
  font-weight: 400;
  line-height: 1;
}

.t-tagline {
  /* "— DOG GROOMING —" small-caps treatment in tan */
  font-family: var(--font-body);
  font-size: var(--fs-body-sm);
  letter-spacing: var(--ls-caps-sm);
  text-transform: uppercase;
  color: var(--brand-tan);
  font-weight: 400;
}

h1, .t-h1 {
  font-family: var(--font-display);
  font-size: var(--fs-h1);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-display);
  color: var(--fg-1);
  font-weight: 400;
  margin: 0;
}

h2, .t-h2 {
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  line-height: var(--lh-snug);
  color: var(--fg-1);
  font-weight: 400;
  margin: 0;
}

h3, .t-h3 {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  line-height: var(--lh-snug);
  color: var(--fg-1);
  font-weight: 500;
  margin: 0;
}

h4, .t-h4 {
  font-family: var(--font-body);
  font-size: var(--fs-h4);
  line-height: var(--lh-snug);
  color: var(--fg-1);
  font-weight: 400;
  margin: 0;
}

p, .t-body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  color: var(--fg-2);
  font-weight: 300;
  margin: 0;
  text-wrap: pretty;
}

.t-body-lg {
  font-family: var(--font-body);
  font-size: var(--fs-body-lg);
  line-height: var(--lh-normal);
  color: var(--fg-2);
  font-weight: 300;
}

.t-caption {
  font-family: var(--font-body);
  font-size: var(--fs-caption);
  line-height: var(--lh-normal);
  color: var(--fg-3);
  font-weight: 400;
}

code, .t-mono {
  font-family: var(--font-mono);
  font-size: 0.92em;
  background: var(--ink-200);
  padding: 0.1em 0.35em;
  border-radius: var(--radius-xs);
  color: var(--ink-700);
}

/* The brand's signature divider — thin tan rule with a centered word */
.brand-rule {
  display: inline-flex;
  align-items: center;
  gap: var(--space-4);
  color: var(--brand-tan);
}
.brand-rule::before,
.brand-rule::after {
  content: "";
  flex: 1;
  min-width: 28px;
  height: 1px;
  background: currentColor;
  opacity: 0.7;
}