/* ================================================================
   BLENDR BRANDING & DESIGN — Foundations
   Tokens, typography, and core utilities for design files.
   ================================================================ */

/* ----------------------------------------------------------------
   1. FONTS — Magallanes (display / heading)
   ---------------------------------------------------------------- */
@font-face {
  font-family: 'Magallanes';
  src: url('fonts/Magallanes Light.otf') format('opentype');
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Magallanes';
  src: url('fonts/Magallanes Light Italic.otf') format('opentype');
  font-weight: 300; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'Magallanes';
  src: url('fonts/Magallanes Regular.otf') format('opentype');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Magallanes';
  src: url('fonts/Magallanes Regular Italic.otf') format('opentype');
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'Magallanes';
  src: url('fonts/Magallanes Medium.otf') format('opentype');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Magallanes';
  src: url('fonts/Magallanes Bold.otf') format('opentype');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Magallanes';
  src: url('fonts/Magallanes ExtraBold.otf') format('opentype');
  font-weight: 800; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Magallanes';
  src: url('fonts/Magallanes Black.otf') format('opentype');
  font-weight: 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Magallanes';
  src: url('fonts/Magallanes Black Italic.otf') format('opentype');
  font-weight: 900; font-style: italic; font-display: swap;
}

/* Body sans — Nunito Sans (Google Fonts). Import in HTML head:
   <link href="https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@300;400;600;700&display=swap" rel="stylesheet">
*/

/* ----------------------------------------------------------------
   2. TOKENS
   ---------------------------------------------------------------- */
:root {
  /* ── The seawater palette ──
     A vertical gradient: near-black ink at the bottom,
     through mid-teals and dusty sea, up to pale mist.
     Every surface should be one of these eight tiers. */

  /* Core · 80% of surface */
  --bl-ink:         #0F2226;   /* Tier 1 — deepest. Body, default surface. */
  --bl-deep-teal:   #143338;   /* Tier 2 — alternating sections, cards on dark. */
  --bl-teal:        #1E4A50;   /* Tier 3 — brand teal, primary accent. */
  --bl-slate-teal:  #5E8A8D;   /* Tier 4 — dusty mid, dividers on light. */

  /* Light · 20% highlights */
  --bl-sea:         #8BB6BA;   /* Tier 5 — muted highlight, secondary on light. */
  --bl-sky:         #B2D4DE;   /* Tier 6 — pale teal, italic-script word color. */
  --bl-foam:        #D4EBEE;   /* Tier 7 — light surface, soft fills. */
  --bl-mist:        #E6F5F8;   /* Tier 8 — palest tint, light-mode background. */

  --bl-white:       #FFFFFF;
  --bl-black:       #000000;

  /* — Aliases (kept for backwards compatibility with existing utilities) — */
  --bl-dark:        var(--bl-ink);        /* default surface */
  --bl-dark-2:      #1A2C30;              /* lifted dark — input fills */
  --bl-deep:        var(--bl-deep-teal);  /* alt section */
  --bl-deeper:      #0A1C1F;              /* CTA section, slightly deeper than ink */

  --bl-teal-light:  var(--bl-sky);        /* pale teal accent */
  --bl-teal-pale:   var(--bl-mist);       /* watermark / pale tint */
  --bl-text:        var(--bl-ink);        /* body on light */
  --bl-muted:       var(--bl-slate-teal); /* secondary on light */

  /* On-dark text alphas — use these instead of solid greys */
  --bl-on-dark-1:   rgba(255,255,255,0.92);  /* Body */
  --bl-on-dark-2:   rgba(255,255,255,0.68);  /* Secondary */
  --bl-on-dark-3:   rgba(255,255,255,0.46);  /* Tertiary / labels */
  --bl-on-dark-4:   rgba(255,255,255,0.24);  /* Borders / disabled */
  --bl-on-dark-5:   rgba(255,255,255,0.08);  /* Hairlines */

  /* On-light text alphas — mirror of the on-dark scale */
  --bl-on-light-1:  rgba(15,34,38,0.92);     /* Body on light */
  --bl-on-light-2:  rgba(15,34,38,0.68);     /* Secondary on light */
  --bl-on-light-3:  rgba(15,34,38,0.46);     /* Tertiary / labels on light */
  --bl-on-light-4:  rgba(15,34,38,0.20);     /* Borders on light */
  --bl-on-light-5:  rgba(15,34,38,0.08);     /* Hairlines on light */

  /* — Semantic surface roles. Default = dark mode. — */
  --bl-bg:          var(--bl-ink);
  --bl-bg-alt:      var(--bl-deep-teal);
  --bl-fg:          rgba(255,255,255,0.92);
  --bl-fg-muted:    rgba(255,255,255,0.68);
  --bl-accent:      var(--bl-sky);
  --bl-hairline:    rgba(255,255,255,0.08);

  /* — Type — */
  --bl-font-display: 'Magallanes', 'Nunito Sans', system-ui, sans-serif;
  --bl-font-body:    'Nunito Sans', 'Roboto', system-ui, sans-serif;

  /* — Spacing scale — */
  --bl-s-1:  4px;
  --bl-s-2:  8px;
  --bl-s-3:  12px;
  --bl-s-4:  16px;
  --bl-s-5:  24px;
  --bl-s-6:  32px;
  --bl-s-7:  48px;
  --bl-s-8:  64px;
  --bl-s-9:  100px;

  /* — Radii (Blendr uses sharp / minimal radii) — */
  --bl-r-sm: 2px;
  --bl-r-md: 4px;
  --bl-r-pill: 100px;

  /* — Motion — */
  --bl-ease:        cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --bl-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --bl-trans:       0.35s ease;

  /* — Layout — */
  --bl-max-w:       1200px;
  --bl-header-h:    96px;
}

/* ── Light mode ── apply via <body class="bl-light"> or <html data-theme="light">.
   Surfaces flip to mist/foam; text uses the on-light alpha scale. */
.bl-light,
[data-theme="light"] {
  --bl-bg:          var(--bl-mist);
  --bl-bg-alt:      var(--bl-foam);
  --bl-fg:          rgba(15,34,38,0.92);
  --bl-fg-muted:    rgba(15,34,38,0.68);
  --bl-accent:      var(--bl-teal);
  --bl-hairline:    rgba(15,34,38,0.10);
}

/* ----------------------------------------------------------------
   3. RESET & BASE
   ---------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; -webkit-font-smoothing: antialiased; }
body {
  font-family: var(--bl-font-body);
  color: var(--bl-on-dark-1);
  background: var(--bl-dark);
  line-height: 1.6;
}
img { max-width: 100%; display: block; }
button { cursor: pointer; border: none; background: none; font-family: inherit; }

/* ----------------------------------------------------------------
   4. TYPE SCALE — display / heading family is Magallanes
   Heading style: UPPERCASE, wide tracking, heavy weight by default.
   Use .h-mixed wrapper + .h-bold / .h-script spans for the
   signature "bold + thin italic" lock-up.
   ---------------------------------------------------------------- */
.bl-display-xl {
  font-family: var(--bl-font-display);
  font-weight: 900;
  font-size: clamp(4.5rem, 13vw, 15rem);
  line-height: 0.92;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}
.bl-display-outline {
  font-family: var(--bl-font-display);
  font-weight: 900;
  font-size: clamp(4.5rem, 13vw, 15rem);
  line-height: 0.92;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: transparent;
  -webkit-text-stroke: 2px rgba(255,255,255,0.9);
}
.bl-h1 {
  font-family: var(--bl-font-display);
  font-weight: 900;
  font-size: clamp(2.5rem, 6vw, 5rem);
  line-height: 1.05;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.bl-h2 {
  font-family: var(--bl-font-display);
  font-weight: 900;
  font-size: clamp(2.8rem, 6vw, 5.5rem);
  line-height: 1.05;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.bl-h3 {
  font-family: var(--bl-font-display);
  font-weight: 700;
  font-size: clamp(1.2rem, 2.5vw, 1.8rem);
  letter-spacing: 0.15em;
  text-transform: uppercase;
}
.bl-h4 {
  font-family: var(--bl-font-display);
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}
.bl-eyebrow {
  font-family: var(--bl-font-display);
  font-weight: 700;
  font-size: 0.75rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--bl-teal-light);
}
.bl-body {
  font-family: var(--bl-font-body);
  font-weight: 400;
  font-size: 1.05rem;
  line-height: 1.8;
  color: var(--bl-on-dark-2);
}
.bl-body-sm {
  font-family: var(--bl-font-body);
  font-weight: 400;
  font-size: 0.9rem;
  line-height: 1.7;
  color: var(--bl-on-dark-2);
}
.bl-caption {
  font-family: var(--bl-font-display);
  font-weight: 700;
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--bl-on-dark-3);
}

/* Mixed-weight heading lock-up — Blendr signature.
   Usage: <h2 class="bl-mixed"><span class="bl-bold">latest</span><span class="bl-script">work</span></h2>
*/
.bl-mixed {
  font-family: var(--bl-font-display);
  font-size: clamp(2.8rem, 6vw, 5.5rem);
  line-height: 1.05;
  letter-spacing: 0;
  text-transform: none;
}
.bl-mixed > * + * { margin-left: 0.25em; }
.bl-bold {
  font-weight: 900;
  color: var(--bl-white);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.bl-script {
  font-weight: 300;
  font-style: italic;
  color: var(--bl-teal-light);
  text-transform: lowercase;
  letter-spacing: 0;
}

/* ----------------------------------------------------------------
   5. SURFACE UTILITIES
   ---------------------------------------------------------------- */
/* Tier-named surface utilities — prefer these over raw vars. */
.bl-bg-ink         { background: var(--bl-ink); }
.bl-bg-deep-teal   { background: var(--bl-deep-teal); }
.bl-bg-teal        { background: var(--bl-teal); }
.bl-bg-slate-teal  { background: var(--bl-slate-teal); }
.bl-bg-sea         { background: var(--bl-sea); }
.bl-bg-sky         { background: var(--bl-sky); }
.bl-bg-foam        { background: var(--bl-foam); }
.bl-bg-mist        { background: var(--bl-mist); }

/* Legacy aliases */
.bl-bg-dark   { background: var(--bl-ink); }
.bl-bg-deep   { background: var(--bl-deep-teal); }
.bl-bg-deeper { background: var(--bl-deeper); }
.bl-bg-pale   { background: var(--bl-mist); }
.bl-bg-white  { background: var(--bl-white); }

/* Organic blob — Blendr decorative shape. Pair with overflow:hidden parent.
   Uses non-circular border-radius for a fluid, hand-drawn feel. */
.bl-blob {
  position: absolute;
  background: rgba(45, 95, 102, 0.18);
  border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
  pointer-events: none;
  z-index: 0;
}
.bl-blob--alt {
  border-radius: 30% 70% 60% 40% / 50% 40% 60% 50%;
}

/* ----------------------------------------------------------------
   6. BUTTON
   ---------------------------------------------------------------- */
.bl-btn {
  display: inline-block;
  padding: 14px 36px;
  font-family: var(--bl-font-display);
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border: 2px solid transparent;
  border-radius: 999px;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--bl-trans), color var(--bl-trans),
              border-color var(--bl-trans), transform 0.2s ease;
}
.bl-btn:hover { transform: translateY(-2px); }
.bl-btn--primary {
  background: var(--bl-white);
  color: var(--bl-dark);
  border-color: var(--bl-white);
}
.bl-btn--primary:hover {
  background: transparent;
  color: var(--bl-white);
}
.bl-btn--ghost {
  background: transparent;
  color: var(--bl-white);
  border-color: rgba(255,255,255,0.4);
}
.bl-btn--ghost:hover {
  background: var(--bl-white);
  color: var(--bl-dark);
  border-color: var(--bl-white);
}
.bl-btn--teal {
  background: var(--bl-teal);
  color: var(--bl-white);
  border-color: var(--bl-teal);
}
.bl-btn--teal:hover {
  background: var(--bl-teal-light);
  color: var(--bl-dark);
  border-color: var(--bl-teal-light);
}

/* ----------------------------------------------------------------
   7. TAG / PILL
   ---------------------------------------------------------------- */
.bl-tag {
  display: inline-block;
  padding: 4px 12px;
  background: rgba(181,223,234,0.15);
  border: 1px solid rgba(181,223,234,0.3);
  border-radius: var(--bl-r-pill);
  font-family: var(--bl-font-display);
  font-weight: 700;
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--bl-teal-light);
}

/* ----------------------------------------------------------------
   8. INPUTS
   ---------------------------------------------------------------- */
.bl-input,
.bl-textarea {
  width: 100%;
  padding: 12px 16px;
  font-size: 0.9rem;
  font-family: var(--bl-font-body);
  color: var(--bl-white);
  background: rgba(255,255,255,0.06);
  border: 1.5px solid rgba(255,255,255,0.1);
  border-radius: var(--bl-r-md);
  outline: none;
  transition: border-color var(--bl-trans), background var(--bl-trans);
}
.bl-input::placeholder,
.bl-textarea::placeholder { color: rgba(255,255,255,0.3); }
.bl-input:focus,
.bl-textarea:focus {
  border-color: var(--bl-teal-light);
  background: rgba(255,255,255,0.09);
}
.bl-textarea { resize: vertical; min-height: 140px; }

.bl-label {
  font-family: var(--bl-font-display);
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--bl-on-dark-2);
}