/* =========================================================
   Harbour Point — Colors & Type Foundations
   Tagline: Connecting Canadian Supply
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800&display=swap');

:root {
  /* -----------------------------------------------------------
     CORE PALETTE — from the official style guide
     ----------------------------------------------------------- */
  --hp-navy:        #0D1B2A;  /* primary, deep harbour navy */
  --hp-slate:       #3D556E;  /* secondary, weathered slate */
  --hp-fog:         #DCE2E8;  /* surface tint, sea-fog gray */
  --hp-beacon:      #C62828;  /* accent, lighthouse beacon red */
  --hp-white:       #FFFFFF;

  /* Extended neutrals — derived for UI work (kept on-brand) */
  --hp-ink:         #061018;  /* near-black, used sparingly for max contrast */
  --hp-navy-700:    #142537;
  --hp-navy-600:    #1C3148;
  --hp-slate-400:   #6A809A;
  --hp-slate-300:   #94A6BC;
  --hp-mist:        #EDF0F4;  /* lighter than fog, page backgrounds */
  --hp-paper:       #F7F9FB;
  --hp-line:        #C8D2DC;  /* hairline borders */

  /* Beacon variants */
  --hp-beacon-700:  #9E1F1F;
  --hp-beacon-100:  #FBE7E7;

  /* Semantic — calibrated to feel native to the nautical palette */
  --hp-success:     #1F7A4D;
  --hp-success-100: #E3F1EA;
  --hp-warning:     #B8741A;
  --hp-warning-100: #FBEFD9;
  --hp-danger:      var(--hp-beacon);
  --hp-danger-100:  var(--hp-beacon-100);
  --hp-info:        #2A6FA8;
  --hp-info-100:    #E1ECF6;

  /* -----------------------------------------------------------
     SEMANTIC TOKENS (light mode default)
     ----------------------------------------------------------- */
  --bg:             var(--hp-white);
  --bg-muted:       var(--hp-paper);
  --bg-sunken:      var(--hp-mist);
  --bg-inverse:     var(--hp-navy);

  --surface:        var(--hp-white);
  --surface-raised: var(--hp-white);
  --surface-tint:   var(--hp-fog);

  --fg-1:           var(--hp-navy);     /* primary text, headings */
  --fg-2:           var(--hp-slate);    /* secondary text, labels */
  --fg-3:           var(--hp-slate-400);/* muted, captions, meta */
  --fg-on-dark:     var(--hp-white);
  --fg-inverse:     var(--hp-white);

  --accent:         var(--hp-beacon);
  --accent-fg:      var(--hp-white);

  --border:         var(--hp-line);
  --border-strong:  var(--hp-slate-300);

  --focus-ring:     #2A6FA8;

  /* -----------------------------------------------------------
     TYPOGRAPHY
     ----------------------------------------------------------- */
  --font-display:   'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body:      'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:      ui-monospace, 'SF Mono', 'JetBrains Mono', Menlo, monospace;

  /* Display weights — system favours Bold + Medium per style guide */
  --fw-regular:     400;
  --fw-medium:      500;
  --fw-semibold:    600;
  --fw-bold:        700;
  --fw-black:       800;

  /* Type scale (px → rem assuming 16px root) */
  --fs-12:  0.75rem;
  --fs-13:  0.8125rem;
  --fs-14:  0.875rem;
  --fs-16:  1rem;
  --fs-18:  1.125rem;
  --fs-20:  1.25rem;
  --fs-24:  1.5rem;
  --fs-28:  1.75rem;
  --fs-32:  2rem;
  --fs-40:  2.5rem;
  --fs-48:  3rem;
  --fs-64:  4rem;
  --fs-80:  5rem;

  --lh-tight:   1.05;
  --lh-snug:    1.2;
  --lh-normal:  1.45;
  --lh-relaxed: 1.6;

  --tracking-tight:  -0.02em;
  --tracking-normal: 0em;
  --tracking-wide:   0.04em;
  --tracking-ultra:  0.18em;  /* small caps / eyebrow */

  /* -----------------------------------------------------------
     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;

  /* -----------------------------------------------------------
     RADII — slightly conservative, B2B feel
     ----------------------------------------------------------- */
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-pill: 999px;

  /* -----------------------------------------------------------
     ELEVATION — soft, low-opacity navy shadows
     ----------------------------------------------------------- */
  --shadow-xs: 0 1px 2px rgba(13, 27, 42, 0.06);
  --shadow-sm: 0 1px 3px rgba(13, 27, 42, 0.08), 0 1px 2px rgba(13, 27, 42, 0.04);
  --shadow-md: 0 4px 12px rgba(13, 27, 42, 0.08), 0 2px 4px rgba(13, 27, 42, 0.05);
  --shadow-lg: 0 12px 32px rgba(13, 27, 42, 0.12), 0 4px 8px rgba(13, 27, 42, 0.06);
  --shadow-xl: 0 24px 56px rgba(13, 27, 42, 0.18);
  --shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.5), inset 0 -1px 0 rgba(13, 27, 42, 0.04);

  /* -----------------------------------------------------------
     MOTION
     ----------------------------------------------------------- */
  --ease-standard: cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-emphasis: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast:    120ms;
  --dur-normal:  200ms;
  --dur-slow:    320ms;
}

/* ===========================================================
   SEMANTIC TYPE CLASSES
   =========================================================== */

.hp-display {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-80);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-1);
  text-transform: uppercase;
}

.hp-h1 {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-48);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-1);
  text-transform: uppercase;
}

.hp-h2 {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-32);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-1);
  text-transform: uppercase;
}

.hp-h3 {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-24);
  line-height: var(--lh-snug);
  color: var(--fg-1);
}

.hp-h4 {
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-18);
  line-height: var(--lh-snug);
  color: var(--fg-1);
}

.hp-eyebrow {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-12);
  letter-spacing: var(--tracking-ultra);
  text-transform: uppercase;
  color: var(--hp-beacon);
}

.hp-body {
  font-family: var(--font-body);
  font-weight: var(--fw-regular);
  font-size: var(--fs-16);
  line-height: var(--lh-relaxed);
  color: var(--fg-1);
}

.hp-body-sm {
  font-family: var(--font-body);
  font-weight: var(--fw-regular);
  font-size: var(--fs-14);
  line-height: var(--lh-normal);
  color: var(--fg-2);
}

.hp-caption {
  font-family: var(--font-body);
  font-weight: var(--fw-medium);
  font-size: var(--fs-12);
  line-height: var(--lh-normal);
  color: var(--fg-3);
  letter-spacing: 0.01em;
}

.hp-label {
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-12);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--fg-2);
}

.hp-mono {
  font-family: var(--font-mono);
  font-size: var(--fs-13);
  color: var(--fg-2);
}

/* Element defaults — opt-in by importing into a scoped root */
.hp-typeset h1 { @apply hp-h1; }
.hp-typeset h2 { @apply hp-h2; }
.hp-typeset h3 { @apply hp-h3; }
.hp-typeset h4 { @apply hp-h4; }
.hp-typeset p  { @apply hp-body; }