/*
 * Vanir Business Management — Design Tokens
 * colors_and_type.css
 *
 * Usage: @import url('./colors_and_type.css') in any HTML/CSS file.
 * Roboto must still be loaded from Google Fonts:
 *   <link rel="preconnect" href="https://fonts.googleapis.com">
 *   <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;600;800&display=swap" rel="stylesheet">
 *
 * Cormorant Garamond is self-hosted from fonts/.
 */

/* ─────────────────────────────────────────
   SELF-HOSTED FONTS
   ───────────────────────────────────────── */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('./fonts/cormorant-300.ttf') format('truetype');
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('./fonts/cormorant-500.ttf') format('truetype');
}

/* ─────────────────────────────────────────
   COLOR TOKENS
   ───────────────────────────────────────── */
:root {
  /* Brand */
  --color-navy:        #1A2A43;   /* Primary dark / Vanir Navy */
  --color-slate:       #334155;   /* Primary text */
  --color-gray:        #7A7A7A;   /* Body text / muted */
  --color-accent:      #046BD2;   /* Accent blue — CTAs, links, callout borders */
  --color-accent-dark: #035AB1;   /* Hover state for accent blue */
  --color-near-black:  #111111;   /* Near black — headings on white */

  /* Backgrounds */
  --color-bg:          #FFFFFF;   /* Primary background */
  --color-bg-soft:     #F0F5FA;   /* Soft blue-gray — alt rows, card bg */
  --color-bg-subtle:   #D1D5DB;   /* Subtle / light gray — borders, dividers */
  --color-parchment:   #F0EDE8;   /* Warm parchment — print, premium sections */
  --color-linen:       #F7F5F0;   /* Warm linen — document backgrounds */

  /* Semantic color aliases */
  --color-text-primary:   var(--color-near-black);
  --color-text-body:      var(--color-slate);
  --color-text-muted:     var(--color-gray);
  --color-text-inverse:   #FFFFFF;
  --color-text-link:      var(--color-accent);
  --color-text-link-hover:var(--color-accent-dark);

  --color-surface-page:   var(--color-bg);
  --color-surface-card:   var(--color-bg);
  --color-surface-alt:    var(--color-bg-soft);
  --color-surface-header: var(--color-navy);
  --color-surface-footer: var(--color-bg);

  --color-border:         var(--color-bg-subtle);
  --color-border-strong:  var(--color-slate);
  --color-border-accent:  var(--color-accent);
  --color-border-navy:    var(--color-navy);

  /* Interactive states */
  --color-btn-primary-bg:       var(--color-accent);
  --color-btn-primary-bg-hover: var(--color-accent-dark);
  --color-btn-primary-text:     #FFFFFF;
  --color-btn-secondary-bg:     transparent;
  --color-btn-secondary-border: var(--color-navy);
  --color-btn-secondary-text:   var(--color-navy);
}

/* ─────────────────────────────────────────
   TYPOGRAPHY TOKENS
   ───────────────────────────────────────── */
:root {
  --font-family-base:    'Roboto', 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
  --font-family-display: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;

  /* Cormorant weights */
  --font-weight-light:      300;  /* Cormorant Light — editorial headers */
  --font-weight-display:    500;  /* Cormorant Medium — prominent display */

  /* Weights */
  --font-weight-regular:    400;
  --font-weight-medium:     500;
  --font-weight-semibold:   600;
  --font-weight-extrabold:  800;

  /* Scale — base 16px */
  --font-size-xs:   11px;
  --font-size-sm:   13px;
  --font-size-base: 16px;
  --font-size-md:   18px;
  --font-size-lg:   22px;
  --font-size-xl:   28px;
  --font-size-2xl:  36px;
  --font-size-3xl:  48px;
  --font-size-4xl:  64px;

  /* Line heights */
  --line-height-tight:   1.2;
  --line-height-snug:    1.35;
  --line-height-normal:  1.5;
  --line-height-relaxed: 1.65;

  /* Letter spacing */
  --letter-spacing-tight:  -0.02em;
  --letter-spacing-normal:  0em;
  --letter-spacing-wide:    0.04em;
  --letter-spacing-widest:  0.1em;
}

/* ─────────────────────────────────────────
   SEMANTIC TYPE ROLES
   ───────────────────────────────────────── */
:root {
  /* Display / Hero — Cormorant Garamond */
  --type-display-font:    var(--font-family-display);
  --type-display-size:    var(--font-size-4xl);
  --type-display-weight:  var(--font-weight-light);
  --type-display-leading: var(--line-height-tight);
  --type-display-tracking:var(--letter-spacing-tight);

  /* Display Medium — Cormorant Garamond 500 */
  --type-display-md-font:    var(--font-family-display);
  --type-display-md-size:    var(--font-size-3xl);
  --type-display-md-weight:  var(--font-weight-display);
  --type-display-md-leading: var(--line-height-tight);

  /* H1 */
  --type-h1-size:    var(--font-size-3xl);
  --type-h1-weight:  var(--font-weight-extrabold);
  --type-h1-leading: var(--line-height-tight);
  --type-h1-tracking:var(--letter-spacing-tight);

  /* H2 */
  --type-h2-size:    var(--font-size-2xl);
  --type-h2-weight:  var(--font-weight-semibold);
  --type-h2-leading: var(--line-height-snug);
  --type-h2-tracking:var(--letter-spacing-tight);

  /* H3 */
  --type-h3-size:    var(--font-size-xl);
  --type-h3-weight:  var(--font-weight-semibold);
  --type-h3-leading: var(--line-height-snug);
  --type-h3-tracking:var(--letter-spacing-normal);

  /* H4 */
  --type-h4-size:    var(--font-size-lg);
  --type-h4-weight:  var(--font-weight-semibold);
  --type-h4-leading: var(--line-height-snug);

  /* Body Large */
  --type-body-lg-size:    var(--font-size-md);
  --type-body-lg-weight:  var(--font-weight-regular);
  --type-body-lg-leading: var(--line-height-relaxed);

  /* Body */
  --type-body-size:    var(--font-size-base);
  --type-body-weight:  var(--font-weight-regular);
  --type-body-leading: var(--line-height-normal);

  /* Small / Caption */
  --type-small-size:    var(--font-size-sm);
  --type-small-weight:  var(--font-weight-regular);
  --type-small-leading: var(--line-height-normal);

  /* Label / Nav */
  --type-label-size:    var(--font-size-sm);
  --type-label-weight:  var(--font-weight-semibold);
  --type-label-leading: var(--line-height-tight);
  --type-label-tracking:var(--letter-spacing-wide);

  /* Tag / Overline */
  --type-tag-size:    var(--font-size-xs);
  --type-tag-weight:  var(--font-weight-semibold);
  --type-tag-tracking:var(--letter-spacing-widest);
}

/* ─────────────────────────────────────────
   SPACING TOKENS
   ───────────────────────────────────────── */
:root {
  --space-0:    0px;
  --space-1:    4px;
  --space-2:    8px;
  --space-3:    12px;
  --space-4:    16px;
  --space-5:    20px;
  --space-6:    24px;
  --space-8:    32px;
  --space-10:   40px;
  --space-12:   48px;
  --space-16:   64px;
  --space-20:   80px;
  --space-24:   96px;
  --space-32:  128px;
}

/* ─────────────────────────────────────────
   BORDER RADIUS TOKENS
   ───────────────────────────────────────── */
:root {
  --radius-none:   0px;
  --radius-sm:     2px;   /* Tags, chips */
  --radius-base:   4px;   /* Cards, buttons, inputs */
  --radius-md:     6px;   /* Modals */
  --radius-full:   9999px; /* Pills — rare usage */
}

/* ─────────────────────────────────────────
   SHADOW / ELEVATION TOKENS
   ───────────────────────────────────────── */
:root {
  --shadow-none:    none;
  --shadow-sm:      0 1px 4px rgba(0, 0, 0, 0.06);   /* Cards */
  --shadow-md:      0 4px 16px rgba(0, 0, 0, 0.12);  /* Dropdowns, modals */
  --shadow-lg:      0 8px 32px rgba(0, 0, 0, 0.16);  /* Elevated panels */
}

/* ─────────────────────────────────────────
   TRANSITION TOKENS
   ───────────────────────────────────────── */
:root {
  --transition-fast:   150ms ease;
  --transition-base:   200ms ease;
  --transition-slow:   300ms ease;
}

/* ─────────────────────────────────────────
   BASE ELEMENT STYLES
   ───────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
}

body {
  font-family: var(--font-family-base);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-normal);
  color: var(--color-text-body);
  background-color: var(--color-surface-page);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-wrap: pretty;
}

h1 {
  font-size: var(--type-h1-size);
  font-weight: var(--type-h1-weight);
  line-height: var(--type-h1-leading);
  letter-spacing: var(--type-h1-tracking);
  color: var(--color-text-primary);
  margin: 0 0 var(--space-6);
}
h2 {
  font-size: var(--type-h2-size);
  font-weight: var(--type-h2-weight);
  line-height: var(--type-h2-leading);
  letter-spacing: var(--type-h2-tracking);
  color: var(--color-text-primary);
  margin: 0 0 var(--space-4);
}
h3 {
  font-size: var(--type-h3-size);
  font-weight: var(--type-h3-weight);
  line-height: var(--type-h3-leading);
  letter-spacing: var(--type-h3-tracking);
  color: var(--color-text-primary);
  margin: 0 0 var(--space-3);
}
h4 {
  font-size: var(--type-h4-size);
  font-weight: var(--type-h4-weight);
  line-height: var(--type-h4-leading);
  color: var(--color-text-primary);
  margin: 0 0 var(--space-2);
}
p {
  font-size: var(--type-body-size);
  font-weight: var(--type-body-weight);
  line-height: var(--type-body-leading);
  color: var(--color-text-body);
  margin: 0 0 var(--space-4);
}
a {
  color: var(--color-text-link);
  text-decoration: none;
  transition: color var(--transition-fast);
}
a:hover {
  color: var(--color-text-link-hover);
}
small {
  font-size: var(--type-small-size);
  color: var(--color-text-muted);
}

/* Table base */
table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--font-size-base);
}
thead tr {
  background-color: var(--color-navy);
  color: #fff;
}
thead th {
  padding: var(--space-3) var(--space-4);
  font-weight: var(--font-weight-semibold);
  text-align: left;
  letter-spacing: var(--letter-spacing-wide);
  font-size: var(--font-size-sm);
}
tbody tr:nth-child(even) {
  background-color: var(--color-bg-soft);
}
tbody td {
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-border);
  color: var(--color-text-body);
}

/* Callout box */
.callout {
  background-color: var(--color-bg-soft);
  border-left: 3px solid var(--color-accent);
  padding: var(--space-4) var(--space-6);
  border-radius: 0 var(--radius-base) var(--radius-base) 0;
}

/* ─────────────────────────────────────────
   RESPONSIVE OVERRIDES
   Inline styles in app.jsx win unless we mark these !important.
   Breakpoints: tablet ≤980px, mobile ≤640px.
   ───────────────────────────────────────── */

/* Universal: prevent horizontal scroll on small screens */
html, body { max-width: 100%; overflow-x: hidden; }
img, svg, video { max-width: 100%; height: auto; }

/* TABLET ≤ 980px */
@media (max-width: 980px) {
  /* Sections: trim outer padding so content breathes */
  section { padding-left: 24px !important; padding-right: 24px !important; }

  /* Collapse 2-col & 3-col grids into one stack */
  [style*="grid-template-columns: 0.9fr 1.6fr"],
  [style*="grid-template-columns: 1fr 1fr"],
  [style*="grid-template-columns: repeat(2, 1fr)"],
  [style*="grid-template-columns: repeat(3, 1fr)"],
  [style*="gridTemplateColumns: '0.9fr 1.6fr'"] {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }
  /* But keep the hero stat strip as 3 columns until phone */
  .hero-stats {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 16px !important;
  }

  /* Display H1 (hero) — fluid */
  h1.serif, .serif h1 {
    font-size: clamp(34px, 6vw, 60px) !important;
  }

  /* Sticky left columns can break stacked layouts */
  [style*="position: 'sticky'"], [style*="position:'sticky'"] {
    position: static !important;
    transform: none !important;
  }
}

/* MOBILE ≤ 640px */
@media (max-width: 640px) {
  section { padding-top: 56px !important; padding-bottom: 56px !important; padding-left: 20px !important; padding-right: 20px !important; }

  h1.serif, .serif h1 { font-size: clamp(28px, 8vw, 40px) !important; line-height: 1.1 !important; }
  h2.serif { font-size: clamp(24px, 6.5vw, 36px) !important; line-height: 1.15 !important; }
  h3.serif { font-size: clamp(20px, 5.5vw, 28px) !important; }

  /* Stat strip: stack on phone */
  .hero-stats, [style*="repeat(3, 1fr)"][style*="gap: 0"] {
    grid-template-columns: 1fr !important;
    gap: 0 !important;
  }
  /* Phone-stat dividers: switch vertical lines to top/bottom hairlines */
  .hero-stat-cell {
    border-left: none !important;
    border-top: 1px solid rgba(255,255,255,0.18) !important;
    padding: 18px 0 !important;
  }
  .hero-stat-cell:first-child { border-top: none !important; }

  /* Hero CTA buttons stack */
  [style*="display: flex"][style*="gap: 12"][style*="justifyContent: 'center'"] {
    flex-wrap: wrap !important;
    justify-content: flex-start !important;
  }

  /* Footer columns stack */
  footer [style*="grid"] { grid-template-columns: 1fr !important; gap: 32px !important; }

  /* Generous gaps -> tighter */
  [style*="gap: 56"], [style*="gap: 72"], [style*="gap: 64"] { gap: 28px !important; }
  [style*="gap: 36"], [style*="gap: 40"] { gap: 20px !important; }

  /* Buttons */
  button[style*="padding: 14px 28px"], button[style*="padding: 16px"] {
    padding: 14px 22px !important;
    font-size: 14px !important;
  }

  /* Form fields full-width */
  [style*="formRow2"], [style*="grid-template-columns: 1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }

  /* Audience / industry icon rows: 2-col instead of 5-6 */
  [style*="repeat(5, 1fr)"], [style*="repeat(6, 1fr)"] {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 24px !important;
  }
}