/* =============================================================================
   Bilermen Design System - colors & type tokens
   Import this anywhere with: <link rel="stylesheet" href="colors_and_type.css">
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;1,400;1,500&family=Inter:wght@400;500;600;700&display=swap');

:root {
  /* -------------------------------------------------------------------------
     COLOR - Brand
     ------------------------------------------------------------------------- */
  --color-primary: #006D77;
  --color-primary-active: #004D54;
  --color-primary-soft: #00A5A8;
  --color-primary-disabled: #B8D4D6;

  /* -------------------------------------------------------------------------
     COLOR - Ink (foreground on cream)
     ------------------------------------------------------------------------- */
  --color-ink: #0A1F26;
  --color-body: #2E3D44;
  --color-body-strong: #1A2A30;
  --color-muted: #5C6B72;
  --color-muted-soft: #8A969C;

  /* -------------------------------------------------------------------------
     COLOR - Hairlines (1px separators)
     ------------------------------------------------------------------------- */
  --color-hairline: #E2E8E8;
  --color-hairline-soft: #EFF3F3;

  /* -------------------------------------------------------------------------
     COLOR - Cream surfaces (the page's bread and butter)
     ------------------------------------------------------------------------- */
  --color-canvas: #FAFAF7;
  --color-surface-soft: #F5F4EF;
  --color-surface-card: #EFEDE5;
  --color-surface-cream-strong: #E8E5DA;

  /* -------------------------------------------------------------------------
     COLOR - Dark editorial bands
     ------------------------------------------------------------------------- */
  --color-surface-dark: #0A1F26;
  --color-surface-dark-elevated: #143038;
  --color-surface-dark-soft: #0F2730;

  /* -------------------------------------------------------------------------
     COLOR - Foregrounds on color surfaces
     ------------------------------------------------------------------------- */
  --color-on-primary: #FFFFFF;
  --color-on-dark: #FAFAF7;
  --color-on-dark-soft: #9CAAB0;

  /* -------------------------------------------------------------------------
     COLOR - Accents & semantic
     ------------------------------------------------------------------------- */
  --color-accent-gold: #C9A961;
  --color-accent-amber: #D4A017;
  --color-success: #5DB872;
  --color-warning: #D4A017;
  --color-error: #C64545;

  /* -------------------------------------------------------------------------
     TYPE - Families
     ------------------------------------------------------------------------- */
  --font-serif: 'Playfair Display', 'Cormorant Garamond', Georgia, serif;
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* -------------------------------------------------------------------------
     TYPE - Display (Playfair, weight 500, negative tracking)
     ------------------------------------------------------------------------- */
  --type-display-xl-size: 64px;
  --type-display-xl-leading: 1.05;
  --type-display-xl-tracking: -1.5px;

  --type-display-lg-size: 48px;
  --type-display-lg-leading: 1.1;
  --type-display-lg-tracking: -1px;

  --type-display-md-size: 36px;
  --type-display-md-leading: 1.15;
  --type-display-md-tracking: -0.5px;

  --type-display-sm-size: 28px;
  --type-display-sm-leading: 1.2;
  --type-display-sm-tracking: -0.3px;

  /* -------------------------------------------------------------------------
     TYPE - Titles (Inter, weight 600)
     ------------------------------------------------------------------------- */
  --type-title-lg-size: 22px;
  --type-title-md-size: 18px;
  --type-title-sm-size: 16px;

  /* -------------------------------------------------------------------------
     TYPE - Body, caption, button
     ------------------------------------------------------------------------- */
  --type-body-md-size: 16px;
  --type-body-sm-size: 14px;
  --type-caption-size: 12px;
  --type-caption-tracking: 2px;
  --type-button-size: 14px;
  --type-button-tracking: 0.3px;
  --type-nav-size: 14px;

  /* -------------------------------------------------------------------------
     SPACING
     ------------------------------------------------------------------------- */
  --space-xxs: 4px;
  --space-xs: 8px;
  --space-sm: 12px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-xxl: 48px;
  --space-xxxl: 64px;
  --space-section: 96px;

  /* -------------------------------------------------------------------------
     RADII
     ------------------------------------------------------------------------- */
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-xl: 12px;
  --radius-pill: 9999px;

  /* -------------------------------------------------------------------------
     SHADOWS - used only on interactive overlays
     ------------------------------------------------------------------------- */
  --shadow-overlay: 0 12px 32px -8px rgba(10, 31, 38, 0.18);
  --shadow-focus-ring: 0 0 0 2px var(--color-canvas), 0 0 0 4px var(--color-primary);

  /* -------------------------------------------------------------------------
     MOTION
     ------------------------------------------------------------------------- */
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --duration-hover: 160ms;
  --duration-default: 240ms;

  /* -------------------------------------------------------------------------
     LAYOUT
     ------------------------------------------------------------------------- */
  --layout-max-width: 1320px;
  --layout-gutter: 48px;
  --layout-top-nav-height: 80px;
}

/* =============================================================================
   RESPONSIVE TOKENS - the single source of truth for breakpoints.
   Only two breakpoints site-wide: 1024 (tablet) and 640 (mobile).
   Redefining these tokens rescales every heading (h1-h4 + .display-*),
   section rhythm, and gutter automatically.
   ========================================================================== */
@media (max-width: 1024px) {
  :root {
    --type-display-xl-size: 44px;
    --type-display-lg-size: 36px;
    --type-display-md-size: 30px;
    --type-display-sm-size: 24px;
    --space-section: 64px;
    --layout-gutter: 32px;
  }
}
@media (max-width: 640px) {
  :root {
    --type-display-xl-size: 32px;
    --type-display-lg-size: 28px;
    --type-display-md-size: 24px;
    --type-display-sm-size: 20px;
    --type-display-xl-tracking: -0.5px;
    --type-display-lg-tracking: -0.5px;
    --space-section: 48px;
    --layout-gutter: 20px;
  }
}

/* =============================================================================
   SEMANTIC ELEMENT STYLING
   The system applies type, not layout. Wrap in your own containers.
   ========================================================================== */

html {
  font-family: var(--font-sans);
  font-size: var(--type-body-md-size);
  line-height: 1.6;
  color: var(--color-body);
  background: var(--color-canvas);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  font-family: var(--font-serif);
  font-weight: 500;
  color: var(--color-ink);
  margin: 0;
}

h1 {
  font-size: var(--type-display-xl-size);
  line-height: var(--type-display-xl-leading);
  letter-spacing: var(--type-display-xl-tracking);
}

h2 {
  font-size: var(--type-display-lg-size);
  line-height: var(--type-display-lg-leading);
  letter-spacing: var(--type-display-lg-tracking);
}

h3 {
  font-size: var(--type-display-md-size);
  line-height: var(--type-display-md-leading);
  letter-spacing: var(--type-display-md-tracking);
}

h4 {
  font-size: var(--type-display-sm-size);
  line-height: var(--type-display-sm-leading);
  letter-spacing: var(--type-display-sm-tracking);
}

/* Inter-based titles ride below h4 - they label cards and nested sections. */
.title-lg { font: 600 var(--type-title-lg-size)/1.3 var(--font-sans); color: var(--color-ink); letter-spacing: -0.1px; }
.title-md { font: 600 var(--type-title-md-size)/1.4 var(--font-sans); color: var(--color-ink); }
.title-sm { font: 600 var(--type-title-sm-size)/1.4 var(--font-sans); color: var(--color-ink); }

p {
  font: 400 var(--type-body-md-size)/1.6 var(--font-sans);
  color: var(--color-body);
  margin: 0 0 var(--space-md) 0;
  text-wrap: pretty;
}

.body-sm { font: 400 var(--type-body-sm-size)/1.6 var(--font-sans); color: var(--color-body); }

.eyebrow,
.caption-uppercase {
  font: 600 var(--type-caption-size)/1.4 var(--font-sans);
  letter-spacing: var(--type-caption-tracking);
  text-transform: uppercase;
  color: var(--color-primary);
}

a {
  color: var(--color-primary);
  text-decoration: none;
  transition: color var(--duration-hover) var(--ease-standard);
}
a:hover { text-decoration: underline; text-underline-offset: 3px; }

hr {
  border: 0;
  border-top: 1px solid var(--color-hairline);
  margin: var(--space-xxl) 0;
}

/* =============================================================================
   UTILITY CLASSES - token shortcuts
   ========================================================================== */
.bg-canvas        { background: var(--color-canvas); color: var(--color-body); }
.bg-surface-soft  { background: var(--color-surface-soft); color: var(--color-body); }
.bg-surface-card  { background: var(--color-surface-card); color: var(--color-body); }
.bg-dark          { background: var(--color-surface-dark); color: var(--color-on-dark); }
.bg-dark-elev     { background: var(--color-surface-dark-elevated); color: var(--color-on-dark); }
.text-primary     { color: var(--color-primary); }
.text-ink         { color: var(--color-ink); }
.text-muted       { color: var(--color-muted); }
.hairline         { border: 1px solid var(--color-hairline); }
.hairline-top     { border-top: 1px solid var(--color-hairline); }
.hairline-bottom  { border-bottom: 1px solid var(--color-hairline); }