/*
 * _tokens.css
 * The Blue Ocean — Shared Design Token System
 * Imported by both theblueocean.com and edhebert.com
 * Site-specific overrides applied after this import
 *
 * Usage:
 *   @import '_tokens.css';
 *
 * Last updated: 2026
 * Reference: TBO Brand Moodboard + Site Architecture & Technical Build Brief
 */

/* ─────────────────────────────────────────────
   GOOGLE FONTS
   ───────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,700;1,400;1,700&family=IBM+Plex+Mono:wght@300;400;500&family=Barlow:wght@300;400;500;600&display=swap');


/* ─────────────────────────────────────────────
   COLOR PALETTE
   ───────────────────────────────────────────── */
:root {

  /* Foundation darks — backgrounds, heroes, deep surfaces */
  --color-abyss:       #0c1d2b;   /* Primary background */
  --color-deep-water:  #153047;   /* Elevated surface, cards */
  --color-open-ocean:  #1e4a6a;   /* Mid-tone, section backgrounds */

  /* Primary accents */
  --color-horizon:     #6fa8c0;   /* TBO primary accent — links, UI strokes, alchemy mark */
  --color-sea-mist:    #a8c4d0;   /* Light accent — bathymetry shallow zones */
  --color-salt:        #eef2ee;   /* Primary text on dark, logo text */

  /* CTA accent — bronze alloy, corrosion-resistant in salt water */
  --color-bronze:      #c4882a;

  /* Nature accent — environmental work, BBC/WHOI contexts */
  --color-kelp:        #8a9e72;


  /* ─── SEMANTIC ALIASES ─── */

  /* Backgrounds */
  --bg-primary:        var(--color-abyss);
  --bg-surface:        var(--color-deep-water);
  --bg-mid:            var(--color-open-ocean);

  /* Text */
  --text-full:         var(--color-salt);
  --text-mid:          rgba(232, 237, 232, 0.65);
  --text-dim:          rgba(232, 237, 232, 0.38);
  --text-ghost:        rgba(232, 237, 232, 0.18);

  /* Accent — TBO default (Horizon blue) */
  --accent-primary:    var(--color-horizon);
  --accent-warm:       var(--color-bronze);
  --color-cta:         var(--color-bronze);   /* Primary CTA — bronze on dark or light */
  --accent-nature:     var(--color-kelp);

  /* Rules and borders */
  --rule:              rgba(255, 255, 255, 0.07);
  --rule-mid:          rgba(255, 255, 255, 0.12);
  --rule-accent:       rgba(111, 168, 192, 0.25);   /* Horizon-tinted rule */
  --rule-warm:         rgba(196, 136, 42, 0.25);    /* Bronze-tinted rule */

  /* Overlays — for photography backgrounds */
  --photo-overlay:     rgba(12, 29, 43, 0.50);      /* 50% Abyss over photos */
  --photo-overlay-light: rgba(12, 29, 43, 0.40);    /* Lighter variant */
  --photo-overlay-heavy: rgba(12, 29, 43, 0.65);    /* Heavier for legibility */


  /* ─────────────────────────────────────────────
     CHAPTER ACCENT SYSTEM
     Each data-chapter section overrides --chapter-accent
     Used by sidebar nav, rule treatments, and interactive elements
     ───────────────────────────────────────────── */
  --chapter-accent:    var(--color-horizon);         /* Default */


  /* ─────────────────────────────────────────────
     TYPOGRAPHY
     ───────────────────────────────────────────── */
  --font-display:  'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-body:     'Barlow', system-ui, -apple-system, sans-serif;
  --font-mono:     'IBM Plex Mono', 'Courier New', Courier, monospace;

  /* Font weights */
  --weight-light:    300;
  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;

  /* Type scale — fluid via clamp(min, preferred, max) */
  --text-xs:    clamp(0.6875rem, 1.5vw, 0.75rem);      /* 11–12px  — labels, eyebrows */
  --text-sm:    clamp(0.75rem,   1.8vw, 0.8125rem);     /* 12–13px  — captions, metadata */
  --text-base:  clamp(0.875rem,  2vw,   1rem);          /* 14–16px  — body text */
  --text-md:    clamp(1rem,      2.5vw, 1.125rem);      /* 16–18px  — large body */
  --text-lg:    clamp(1.125rem,  3vw,   1.375rem);      /* 18–22px  — subheadings */
  --text-xl:    clamp(1.375rem,  4vw,   1.75rem);       /* 22–28px  — section heads */
  --text-2xl:   clamp(1.75rem,   5vw,   2.5rem);        /* 28–40px  — chapter titles */
  --text-3xl:   clamp(2.5rem,    7vw,   4rem);          /* 40–64px  — hero display */
  --text-hero:  clamp(3rem,      9vw,   5.5rem);        /* 48–88px  — hero wordmark */

  /* Line heights */
  --leading-tight:   1.05;
  --leading-snug:    1.25;
  --leading-normal:  1.6;
  --leading-relaxed: 1.75;

  /* Letter spacing */
  --tracking-tight:  -0.025em;
  --tracking-normal:  0;
  --tracking-wide:    0.08em;
  --tracking-wider:   0.14em;
  --tracking-widest:  0.22em;


  /* ─────────────────────────────────────────────
     SPACING
     ───────────────────────────────────────────── */
  --space-1:   0.25rem;    /*  4px */
  --space-2:   0.5rem;     /*  8px */
  --space-3:   0.75rem;    /* 12px */
  --space-4:   1rem;       /* 16px */
  --space-5:   1.25rem;    /* 20px */
  --space-6:   1.5rem;     /* 24px */
  --space-8:   2rem;       /* 32px */
  --space-10:  2.5rem;     /* 40px */
  --space-12:  3rem;       /* 48px */
  --space-16:  4rem;       /* 64px */
  --space-20:  5rem;       /* 80px */
  --space-24:  6rem;       /* 96px */
  --space-32:  8rem;       /* 128px */

  /* Section padding */
  --section-padding-y:  clamp(4rem, 10vw, 8rem);
  --section-padding-x:  clamp(1.5rem, 6vw, 5rem);


  /* ─────────────────────────────────────────────
     LAYOUT
     ───────────────────────────────────────────── */
  --max-width:         1200px;
  --content-width:     780px;    /* Comfortable reading width */
  --nav-width:         240px;    /* Chapter sidebar nav */

  --radius-sm:   3px;
  --radius-md:   6px;
  --radius-lg:   12px;
  --radius-full: 9999px;


  /* ─────────────────────────────────────────────
     ANIMATION
     ───────────────────────────────────────────── */
  --ease-out:      cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out:   cubic-bezier(0.45, 0, 0.55, 1);
  --ease-spring:   cubic-bezier(0.34, 1.56, 0.64, 1);

  --duration-fast:    0.2s;
  --duration-base:    0.4s;
  --duration-slow:    0.6s;
  --duration-slower:  0.9s;

  /* Page load stagger delays */
  --delay-mark:     0s;
  --delay-wordmark: 0.8s;
  --delay-tagline:  1.4s;
  --delay-cta:      2.0s;

  /* Scroll reveal */
  --reveal-distance:  24px;
  --reveal-duration:  0.6s;
  --reveal-stagger:   0.15s;


  /* ─────────────────────────────────────────────
     Z-INDEX SCALE
     ───────────────────────────────────────────── */
  --z-below:    -1;
  --z-base:      0;
  --z-raised:   10;
  --z-overlay:  20;
  --z-nav:      30;
  --z-modal:    40;
  --z-toast:    50;


  /* ─────────────────────────────────────────────
     CHAPTER SYSTEM
     Applied via [data-chapter] attribute on sections
     ChapterObserver JS updates --chapter-accent dynamically
     ───────────────────────────────────────────── */

  /* Hero */
  --chapter-hero-bg:      var(--color-abyss);
  --chapter-hero-accent:  var(--color-horizon);

  /* Approach */
  --chapter-approach-bg:      var(--color-abyss);
  --chapter-approach-accent:  var(--color-bronze);

  /* Proof */
  --chapter-proof-bg:      var(--color-abyss);
  --chapter-proof-accent:  var(--color-bronze);

  /* Work */
  --chapter-work-bg:      var(--color-open-ocean);
  --chapter-work-accent:  var(--color-kelp);

  /* Range */
  --chapter-range-bg:      var(--color-abyss);
  --chapter-range-accent:  var(--color-horizon);

  /* Offer */
  --chapter-offer-bg:      var(--color-abyss);
  --chapter-offer-accent:  var(--color-horizon);

}


/* ─────────────────────────────────────────────
   CHAPTER ACCENT OVERRIDES
   Applied automatically by ChapterObserver.js
   ───────────────────────────────────────────── */
[data-chapter="Hero"]     { --chapter-accent: var(--color-horizon); }
[data-chapter="Approach"] { --chapter-accent: var(--color-bronze);   }
[data-chapter="Proof"]    { --chapter-accent: var(--color-bronze);   }
[data-chapter="Work"]     { --chapter-accent: var(--color-kelp);    }
[data-chapter="Range"]    { --chapter-accent: var(--color-horizon); }
[data-chapter="Offer"]    { --chapter-accent: var(--color-horizon); }


/* ─────────────────────────────────────────────
   GLOBAL RESETS
   ───────────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  scroll-behavior: auto; /* Lenis handles smooth scroll */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  background-color: var(--bg-primary);
  color: var(--text-full);
  font-family: var(--font-body);
  font-weight: var(--weight-light);
  line-height: var(--leading-normal);
  overflow-x: hidden;
}

img, video {
  max-width: 100%;
  display: block;
}

a {
  color: var(--accent-primary);
  text-decoration: none;
}

/* Respect reduced motion — disable all transitions and animations */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}


/* ─────────────────────────────────────────────
   EDHEBERT.COM OVERRIDES
   Import _tokens.css first, then apply these
   to shift the register: warmer, more personal
   ───────────────────────────────────────────── */
/*
.edhebert {
  --accent-primary:  var(--color-bronze);
  --accent-secondary: var(--color-horizon);
  --rule-accent: var(--rule-warm);
}
*/