/* ============================================================
   Vina Design System — foundations (directory page)
   Type + color tokens, plus semantic aliases.
   Tokens are global (:root) and safe; opinionated base element
   styles are intentionally NOT applied globally so they can't
   bleed into the Bootstrap-based site header/footer. The .td
   wrapper + component classes in directory.css carry the look.
   ============================================================ */

/* ----- Webfonts ----- */

@font-face {
  font-family: "Regina";
  src: url("../fonts/ReginaBlack-Hilite0.ttf") format("truetype");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

/* Freight Sans Pro substitution.
   The real brand font is Freight Sans Pro (licensed). We use
   Source Sans 3 on Google Fonts as the closest open substitute
   (humanist proportions, similar x-height, 300–700 weights).
   Replace with Freight Sans Pro webfonts in production. */
@import url("https://fonts.googleapis.com/css2?family=Source+Sans+3:wght@300;400;500;600;700&display=swap");

:root {
  /* ============================================================
     COLOR — raw palette
     ============================================================ */

  /* Blues (primary family) */
  --vina-blue-900: #1f2a44;   /* deep ink blue, rare */
  --vina-blue-800: #344877;   /* dark text blue — headings on light */
  --vina-blue-700: #475e92;   /* interactive blue, hover on primary */
  --vina-blue-600: #5d74a6;   /* PRIMARY — muted blue */
  --vina-blue-400: #8a9ac5;
  --vina-blue-300: #adb8db;   /* SECONDARY — soft slate blue */
  --vina-blue-200: #cad2e8;
  --vina-blue-100: #e4e9f3;
  --vina-blue-050: #f1f4fa;

  /* Accents — use sparingly, never together in one component */
  --vina-green:     #689776;
  --vina-green-ink: #4b7258;   /* text-safe variant on light bg */
  --vina-mustard:   #eec875;
  --vina-mustard-ink:#8c6b1e;  /* text-safe variant */
  --vina-burgundy:  #5b1522;
  --vina-hearth:    #995150;   /* hospitality / welcome / partner-town moments */

  /* Neutrals */
  --vina-paper:   #fcfdfe;     /* page background */
  --vina-cream:   #f6f5f0;     /* warm off-white, section alt bg */
  --vina-stone-100:#eeefe9;
  --vina-stone-200:#dcdcd3;
  --vina-stone-300:#b9b9ad;
  --vina-stone-600:#6e6e63;
  --vina-ink:     #070708;     /* near-black text */
  --vina-ink-soft:#344877;     /* same as blue-800, the softer dark */

  /* ============================================================
     COLOR — semantic aliases (prefer these in components)
     ============================================================ */

  --bg-page:       var(--vina-paper);
  --bg-surface:    #ffffff;
  --bg-alt:        var(--vina-cream);
  --bg-sunken:     var(--vina-stone-100);
  --bg-tint-blue:  var(--vina-blue-050);

  --fg-primary:    var(--vina-ink);
  --fg-strong:     var(--vina-ink-soft);        /* headings on light */
  --fg-secondary:  #5e6c85;                     /* body secondary */
  --fg-muted:      #6e6e7a;
  --fg-on-blue:    #ffffff;

  --brand:         var(--vina-blue-600);
  --brand-hover:   var(--vina-blue-700);
  --brand-press:   var(--vina-blue-800);
  --brand-soft:    var(--vina-blue-300);

  --accent-green:    var(--vina-green);
  --accent-mustard:  var(--vina-mustard);
  --accent-burgundy: var(--vina-burgundy);
  --accent-hearth:   var(--vina-hearth);

  --border-subtle: #e3e5e0;                     /* warm faint rule */
  --border-strong: #cfd3cc;
  --border-blue:   var(--vina-blue-200);

  --focus-ring:    color-mix(in oklab, var(--vina-blue-600) 45%, transparent);

  /* ============================================================
     TYPE — families
     ============================================================ */

  --font-display: "Regina", "Source Serif 4", Georgia, serif;
  --font-sans:    "Source Sans 3", "Freight Sans Pro", system-ui,
                  -apple-system, "Segoe UI", sans-serif;
  --font-mono:    ui-monospace, "SF Mono", "Menlo", monospace;

  /* ============================================================
     TYPE — scale (modular, 1.2 minor third)
     Values are rems based on 16px root.
     ============================================================ */

  --fs-12:  0.75rem;    /* micro / eyebrow */
  --fs-14:  0.875rem;   /* small */
  --fs-16:  1rem;       /* body */
  --fs-18:  1.125rem;   /* body-lg */
  --fs-20:  1.25rem;    /* h5 */
  --fs-24:  1.5rem;     /* h4 */
  --fs-30:  1.875rem;   /* h3 */
  --fs-36:  2.25rem;    /* h2 */
  --fs-48:  3rem;       /* h1 */
  --fs-64:  4rem;       /* display-sm */
  --fs-88:  5.5rem;     /* display */

  --lh-tight:   1.08;
  --lh-snug:    1.22;
  --lh-normal:  1.5;
  --lh-relaxed: 1.65;

  --tracking-display: -0.015em;   /* Regina looks best slightly tight */
  --tracking-tight:   -0.01em;
  --tracking-normal:  0;
  --tracking-eyebrow: 0.08em;

  /* ============================================================
     SPACING — 4px base
     ============================================================ */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;
  --sp-20: 80px;
  --sp-24: 96px;
  --sp-32: 128px;

  /* ============================================================
     RADII — three jobs, nothing between
     md surfaces · sm controls · pill chips
     ============================================================ */
  --r-xs: 4px;
  --r-sm: 6px;     /* buttons, inputs */
  --r-md: 10px;    /* cards, surfaces */
  --r-pill: 999px; /* chips, badges */

  /* ============================================================
     ELEVATION — very light. Vina avoids heavy shadows.
     ============================================================ */
  --shadow-0: none;
  --shadow-1: 0 1px 0 rgba(16, 24, 40, 0.04),
              0 1px 2px rgba(16, 24, 40, 0.04);
  --shadow-2: 0 1px 2px rgba(16, 24, 40, 0.05),
              0 6px 16px -8px rgba(52, 72, 119, 0.12);
  --shadow-focus: 0 0 0 3px var(--focus-ring);

  /* ============================================================
     MOTION
     ============================================================ */
  --ease-standard: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out:      cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast:   120ms;
  --dur-base:   200ms;
  --dur-slow:   320ms;

  /* Layout */
  --container-max: 1160px;
  --gutter:        clamp(16px, 4vw, 40px);
}

/* ============================================================
   Scoped base styles — applied only inside the directory page
   wrapper so the site's Bootstrap header/footer are untouched.
   ============================================================ */
.business-directory-page {
  color: var(--fg-primary);
  background: var(--bg-page);
  font-family: var(--font-sans);
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: "ss01", "kern";
}
.business-directory-page ::selection { background: var(--vina-blue-200); color: var(--fg-strong); }