/* =============================================================
   TrailHound Motors — Colors & Type
   Driven By Adventure.
   Self-hosted variable fonts + design tokens.
   ============================================================= */

/* ----- Fonts ----- */
@font-face {
  font-family: "Playfair Display";
  src: url("./fonts/PlayfairDisplay-VariableFont_wght.ttf") format("truetype-variations");
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Playfair Display";
  src: url("./fonts/PlayfairDisplay-Italic-VariableFont_wght.ttf") format("truetype-variations");
  font-weight: 400 900;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Montserrat";
  src: url("./fonts/Montserrat-VariableFont_wght.ttf") format("truetype-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Montserrat";
  src: url("./fonts/Montserrat-Italic-VariableFont_wght.ttf") format("truetype-variations");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

:root {
  /* ===== CORE PALETTE — shared across the Hound Family of Brands ===== */
  --th-charcoal:        #1E1F22;   /* primary dark / typography */
  --th-warm-white:      #F4F2EC;   /* primary background, "warm white" not pure white */
  --th-heritage-gold:   #C89B3C;   /* aged gold accent, the unifying signature */

  /* ===== TRAILHOUND ACCENT — Saddle Brown / Tan family ===== */
  --th-saddle-tan:      #B89A72;   /* leather, hat, collar */
  --th-walnut:          #6A4D32;   /* deep wood, weathered */
  --th-forest-pine:     #2D3B2F;   /* pines, deep environmental green */
  --th-mountain-gray:   #8C857A;   /* warm neutral, distant terrain */

  /* ===== Tonal extensions (derived; use sparingly) ===== */
  --th-cream:           #FBF8F0;   /* lifted paper, cards on cream pages */
  --th-bone:            #E8E3D6;   /* card on warm-white pages */
  --th-charcoal-soft:   #2A2C30;   /* off-black for layered dark sections */
  --th-charcoal-ink:    #15161A;   /* deepest, for richest backgrounds */
  --th-gold-bright:     #E0B859;   /* hover, glints */
  --th-gold-dim:        #9A7728;   /* pressed / printed gold */

  /* ===== Semantic foreground / background ===== */
  --fg-1:               var(--th-charcoal);          /* primary text on light */
  --fg-2:               #4A4940;                     /* secondary, warm gray */
  --fg-3:               #7A7568;                     /* tertiary, captions */
  --fg-gold:            var(--th-heritage-gold);
  --fg-on-dark-1:       var(--th-warm-white);
  --fg-on-dark-2:       #B8B2A2;                    /* secondary on dark */

  --bg-page:            var(--th-warm-white);
  --bg-elevated:        var(--th-cream);
  --bg-dark:            var(--th-charcoal);
  --bg-dark-deep:       var(--th-charcoal-ink);

  --border-hairline:    rgba(30, 31, 34, 0.14);
  --border-strong:      rgba(30, 31, 34, 0.35);
  --border-gold:        var(--th-heritage-gold);
  --border-on-dark:     rgba(244, 242, 236, 0.18);

  /* ===== Type families ===== */
  --font-display:       "Playfair Display", "Cormorant Garamond", "Georgia", serif;
  --font-body:          "Montserrat", "Helvetica Neue", "Arial", sans-serif;
  --font-script:        "Allura", "Pinyon Script", "Dancing Script", "Playfair Display", cursive;
  --font-mono:          "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* ===== Type scale (editorial; generous) ===== */
  --fs-display:         clamp(56px, 7.5vw, 112px);  /* hero wordmarks */
  --fs-h1:              clamp(44px, 5.2vw, 76px);
  --fs-h2:              clamp(32px, 3.6vw, 52px);
  --fs-h3:              28px;
  --fs-h4:              22px;
  --fs-eyebrow:         13px;   /* uppercase Montserrat label */
  --fs-body:            17px;
  --fs-body-lg:         19px;
  --fs-small:           14px;
  --fs-caption:         12px;

  --lh-tight:           1.05;
  --lh-display:         1.08;
  --lh-heading:         1.18;
  --lh-body:            1.6;
  --lh-relaxed:         1.75;

  /* Letter-spacing — Montserrat caps want generous tracking */
  --ls-display:         -0.01em;   /* Playfair pulls in slightly */
  --ls-heading:         0;
  --ls-eyebrow:         0.22em;
  --ls-button:          0.16em;
  --ls-caps:            0.18em;
  --ls-body:            0;

  /* ===== Spacing — editorial 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;
  --space-11: 192px;

  /* ===== Radii — restrained; this brand is enamel sign, not pill ===== */
  --radius-0:  0px;       /* default for editorial blocks */
  --radius-1:  2px;       /* hairline inputs */
  --radius-2:  4px;       /* small chips */
  --radius-3:  6px;       /* cards */
  --radius-badge: 999px;  /* circular crests only */

  /* ===== Shadows — soft, warm, never neon ===== */
  --shadow-1: 0 1px 2px rgba(30,31,34,0.06), 0 1px 1px rgba(30,31,34,0.04);
  --shadow-2: 0 8px 20px rgba(30,31,34,0.08), 0 2px 4px rgba(30,31,34,0.05);
  --shadow-3: 0 24px 60px rgba(30,31,34,0.16), 0 8px 16px rgba(30,31,34,0.08);
  --shadow-inset-hairline: inset 0 0 0 1px rgba(30,31,34,0.08);
  --shadow-gold-glow: 0 0 0 1px rgba(200,155,60,0.4), 0 4px 16px rgba(200,155,60,0.18);

  /* ===== Easing — slow, cinematic ===== */
  --ease-out:    cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast:    160ms;
  --dur-base:    260ms;
  --dur-slow:    520ms;
  --dur-cine:    900ms;
}

/* Selection */
::selection { background: var(--th-heritage-gold); color: var(--th-charcoal); }