/* ==========================================================================
   Tradewinds Media — Color & Type Tokens
   ==========================================================================
   Import this file to inherit the full brand vocabulary.
   --------------------------------------------------------------------------
   Inspiration: ocean trade routes, weather charts, wind-worn signage,
   work-truck lettering, marine navigation. Built for home-service brands
   (HVAC, plumbing, roofing, landscape) — practical, confident, clear.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;600;700;800;900&family=Archivo+Narrow:wght@400;500;600;700&family=Source+Serif+4:ital,opsz,wght@0,8..60,400;0,8..60,600;1,8..60,400&family=JetBrains+Mono:wght@400;500;700&display=swap');

:root {
  /* ----- BRAND / PRIMARY (the two given hexes + supporting scale) --------- */
  --tw-ocean-950: #04263a;   /* deepest — nav, footers, headlines on light   */
  --tw-ocean-900: #063552;
  --tw-ocean-800: #064a70;
  --tw-ocean-700: #066d9d;
  --tw-ocean-600: #0198cf;   /* ★ primary brand — given                       */
  --tw-ocean-500: #10aae7;   /* ★ primary brand (lighter) — given             */
  --tw-ocean-400: #4cc1ee;
  --tw-ocean-300: #8dd5f4;
  --tw-ocean-200: #c4e8f8;
  --tw-ocean-100: #e4f3fb;
  --tw-ocean-50:  #f3fafd;

  /* ----- BRAND-BRIGHT ACCENT (high-vis CTA contrast, stays in-family) ---- */
  /* A more saturated, near-cyan version of the brand for secondary CTAs.   */
  /* All accents stay in the blue family per brand direction.               */
  --tw-spray-700: #057eac;
  --tw-spray-600: #0aa1d7;
  --tw-spray-500: #1bc0f0;   /* ★ accent — vivid cyan, reads like spray     */
  --tw-spray-400: #55d4f5;
  --tw-spray-200: #bff0fc;

  /* ----- NEUTRALS (warm-leaning greys — feels like worn paper / tape) ---- */
  --tw-ink-950:   #0b1418;   /* body text on light                            */
  --tw-ink-900:   #16232a;
  --tw-ink-800:   #253640;
  --tw-ink-700:   #3a4d58;
  --tw-ink-600:   #566976;
  --tw-ink-500:   #7b8d99;
  --tw-ink-400:   #a6b5be;
  --tw-ink-300:   #cdd7dd;
  --tw-ink-200:   #e3eaee;
  --tw-ink-100:   #f0f4f6;
  --tw-ink-50:    #f7f9fa;
  --tw-paper:     #fbfcfc;   /* page bg on light theme                       */
  --tw-white:     #ffffff;

  /* ----- SEMANTIC STATUS -------------------------------------------------- */
  --tw-success:   #2ea264;
  --tw-success-bg:#e5f4ec;
  --tw-warning:   #e0a91b;
  --tw-warning-bg:#fbf3d9;
  --tw-danger:    #c6372d;
  --tw-danger-bg: #fbe6e4;
  --tw-info:      var(--tw-ocean-600);
  --tw-info-bg:   var(--tw-ocean-100);

  /* ----- SEMANTIC ROLES (use these in components) ------------------------ */
  --fg-1: var(--tw-ink-950);        /* primary text                         */
  --fg-2: var(--tw-ink-700);        /* secondary text                       */
  --fg-3: var(--tw-ink-500);        /* tertiary / meta                      */
  --fg-inverse: var(--tw-white);
  --fg-brand: var(--tw-ocean-600);
  --fg-brand-strong: var(--tw-ocean-800);
  --fg-accent: var(--tw-spray-500);

  --bg-page: var(--tw-paper);
  --bg-surface: var(--tw-white);
  --bg-sunk: var(--tw-ink-50);
  --bg-muted: var(--tw-ink-100);
  --bg-brand: var(--tw-ocean-600);
  --bg-brand-strong: var(--tw-ocean-800);
  --bg-brand-soft: var(--tw-ocean-100);
  --bg-ink: var(--tw-ocean-950);    /* near-black navy — used for hero panels */

  --border-1: var(--tw-ink-200);
  --border-2: var(--tw-ink-300);
  --border-strong: var(--tw-ink-700);
  --border-brand: var(--tw-ocean-600);

  /* ----- TYPOGRAPHY: FAMILIES -------------------------------------------- */
  /*  Substitutions flagged: we don't have a licensed display face yet.
      Archivo (open-source) stands in for a condensed industrial sans
      reminiscent of work-truck lettering. Archivo Narrow for UI tightness.
      Source Serif 4 for occasional editorial / case-study body.
      JetBrains Mono for code and numeric tabular data.                     */
  --font-display: 'Archivo', 'Archivo Narrow', 'Helvetica Neue', sans-serif;
  --font-ui:      'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-narrow:  'Archivo Narrow', 'Archivo', sans-serif;
  --font-serif:   'Source Serif 4', 'Source Serif Pro', Georgia, serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* ----- TYPOGRAPHY: SIZE SCALE (1.200 minor-third-ish, roughly) --------- */
  --text-2xs: 0.6875rem;  /* 11px   micro labels, overlines                  */
  --text-xs:  0.75rem;    /* 12px                                            */
  --text-sm:  0.875rem;   /* 14px                                            */
  --text-base:1rem;       /* 16px   body                                     */
  --text-md:  1.125rem;   /* 18px                                            */
  --text-lg:  1.375rem;   /* 22px                                            */
  --text-xl:  1.75rem;    /* 28px                                            */
  --text-2xl: 2.25rem;    /* 36px                                            */
  --text-3xl: 3rem;       /* 48px                                            */
  --text-4xl: 4rem;       /* 64px                                            */
  --text-5xl: 5.5rem;     /* 88px   display / hero                           */

  --leading-tight: 1.08;
  --leading-snug:  1.2;
  --leading-normal:1.45;
  --leading-relaxed:1.65;

  --tracking-tight:-0.02em;
  --tracking-normal:0;
  --tracking-wide: 0.04em;
  --tracking-wider:0.12em;   /* for caps overlines                           */

  /* ----- SPACING (4px base) ---------------------------------------------- */
  --space-0: 0;
  --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;

  /* ----- RADIUS ---------------------------------------------------------- */
  --radius-none: 0;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 14px;
  --radius-xl: 22px;
  --radius-pill: 999px;

  /* ----- SHADOW ---------------------------------------------------------- */
  --shadow-xs: 0 1px 1px rgba(11, 20, 24, 0.05);
  --shadow-sm: 0 1px 2px rgba(11, 20, 24, 0.06), 0 1px 3px rgba(11, 20, 24, 0.04);
  --shadow-md: 0 4px 12px rgba(11, 20, 24, 0.08), 0 1px 3px rgba(11, 20, 24, 0.04);
  --shadow-lg: 0 12px 32px rgba(11, 20, 24, 0.12), 0 2px 6px rgba(11, 20, 24, 0.06);
  --shadow-xl: 0 24px 60px rgba(4, 38, 58, 0.18), 0 4px 12px rgba(4, 38, 58, 0.08);
  --shadow-brand: 0 10px 28px -8px rgba(1, 152, 207, 0.55);
  --ring-brand: 0 0 0 3px rgba(16, 170, 231, 0.35);

  /* ----- MOTION ---------------------------------------------------------- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-1: 120ms;
  --dur-2: 200ms;
  --dur-3: 320ms;
  --dur-4: 520ms;
}

/* ==========================================================================
   SEMANTIC TYPOGRAPHY
   ========================================================================== */

.tw-eyebrow,
[data-ts="eyebrow"] {
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: var(--text-2xs);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--fg-brand);
}

.tw-display-xl,
[data-ts="display-xl"] {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: var(--text-5xl);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-1);
  text-transform: uppercase;
}

.tw-display,
[data-ts="display"] {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--text-4xl);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-1);
  text-transform: uppercase;
}

.tw-h1, [data-ts="h1"] {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--text-3xl);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-1);
}

.tw-h2, [data-ts="h2"] {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-2xl);
  line-height: var(--leading-snug);
  color: var(--fg-1);
}

.tw-h3, [data-ts="h3"] {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-xl);
  line-height: var(--leading-snug);
  color: var(--fg-1);
}

.tw-h4, [data-ts="h4"] {
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: var(--text-lg);
  line-height: var(--leading-snug);
  color: var(--fg-1);
}

.tw-body, [data-ts="body"] {
  font-family: var(--font-ui);
  font-weight: 400;
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: var(--fg-1);
}

.tw-body-sm, [data-ts="body-sm"] {
  font-family: var(--font-ui);
  font-weight: 400;
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  color: var(--fg-2);
}

.tw-quote, [data-ts="quote"] {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: var(--text-lg);
  line-height: var(--leading-relaxed);
  color: var(--fg-1);
}

.tw-caption, [data-ts="caption"] {
  font-family: var(--font-narrow);
  font-weight: 500;
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
  color: var(--fg-3);
  text-transform: uppercase;
}

.tw-code, [data-ts="code"] {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 0.9em;
  color: var(--tw-ocean-800);
  background: var(--tw-ocean-50);
  padding: 2px 6px;
  border-radius: var(--radius-sm);
}

.tw-numeric, [data-ts="numeric"] {
  font-family: var(--font-display);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  font-size: var(--text-4xl);
  line-height: 1;
  color: var(--fg-brand);
  letter-spacing: var(--tracking-tight);
}

/* Plain element defaults when this file is imported globally */
body { font-family: var(--font-ui); color: var(--fg-1); background: var(--bg-page); margin: 0; }
h1 { font: inherit; } /* opt-in via classes */