/* ============================================================
   Meltwater Design System — Colors + Type
   Source: Meltwater Visual Brand Guide, May 2026
   ============================================================ */

/* --- Webfonts ---------------------------------------------- */
/* GT Walsheim is the hero brand font. It is a licensed Grilli
   Type font and not freely distributable; the closest open
   substitute is Poppins (which is the brand's own documented
   digital fallback). Both are loaded; flip --font-display via
   the body class to switch. */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800;900&display=swap');

/* If GT Walsheim woff/woff2 files are dropped into ./fonts,
   uncomment this block and the brand font will activate. */
/*
@font-face {
  font-family: 'GT Walsheim';
  src: url('fonts/GT-Walsheim-Regular.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'GT Walsheim';
  src: url('fonts/GT-Walsheim-Medium.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'GT Walsheim';
  src: url('fonts/GT-Walsheim-Bold.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'GT Walsheim';
  src: url('fonts/GT-Walsheim-Black.woff2') format('woff2');
  font-weight: 900; font-style: normal; font-display: swap;
}
*/

:root {
  /* ---------- Core Brand Colors ---------- */
  --mw-teal:           #28BBBB;  /* Meltwater Brand Teal — Pantone 3252C */
  --mw-teal-dark:      #1C7070;  /* Dark Teal */
  --mw-teal-medium:    #00A7A5;  /* Medium Teal */
  --mw-teal-tint-1:    #A3DFDF;  /* Teal Tint */
  --mw-teal-tint-2:    #C0EBEB;  /* Teal Tint */
  --mw-teal-tint-3:    #E1EFF0;  /* Teal Tint (faintest) */

  /* ---------- AI / Mira aesthetic (off brand-guide, house extension) ----------
     Dark canvas with magenta+teal aurora glow. Used ONLY for Mira / GenAI Lens
     / AI insight surfaces. Reference: meltwater.com/ai
  */
  --mw-ai-canvas:      #0A0A0A;   /* near-black canvas behind aurora */
  --mw-ai-magenta:     #B627A1;   /* purple/magenta — left pole of aurora */
  --mw-ai-violet:      #6B4DD6;   /* mid-blend tone */
  --mw-ai-aqua:        #28BBBB;   /* teal — right pole of aurora */
  --mw-ai-mist:        #C0EBEB;   /* pastel highlight (light-mode aurora) */

  /* Aurora — dark surfaces (Mira composer card, AI hero on dark) */
  --mw-ai-aurora: radial-gradient(45% 80% at 12% 100%, rgba(182,39,161,.55) 0%, rgba(107,77,214,.35) 30%, transparent 70%),
                  radial-gradient(45% 80% at 88% 100%, rgba(40,187,187,.55) 0%, rgba(40,187,187,.25) 30%, transparent 70%),
                  radial-gradient(60% 60% at 50% 110%, rgba(107,77,214,.18) 0%, transparent 60%);
  /* Aurora — light surfaces (pastel halo over white/dot-matrix background) */
  --mw-ai-aurora-light: radial-gradient(50% 60% at 50% 50%, rgba(192,235,235,.7) 0%, rgba(206,184,255,.5) 40%, rgba(255,238,210,.4) 70%, transparent 90%);

  /* Eyecon orb — teal→purple linear used as the brand mark on Mira surfaces */
  --mw-ai-orb: linear-gradient(225deg, #3FCFD0 0%, #5FA0E0 28%, #9970D8 55%, #C44FB8 80%, #D844A0 100%);

  --mw-black:          #1A1A1A;
  --mw-gray:           #F0F4F4;
  --mw-white:          #FFFFFF;

  /* ---------- Accent Colors (limited use, 1 per design) ---------- */
  --mw-orange:         #FF6221;  /* Pantone 165C */
  --mw-orange-tint-m:  #FFDDCC;
  --mw-orange-tint-l:  #FFEFEA;

  --mw-yellow:         #FFCC01;  /* Pantone 012C */
  --mw-yellow-tint-m:  #FCFCCC;
  --mw-yellow-tint-l:  #FFFAE7;

  --mw-purple:         #B627A1;  /* Pantone 247 C */
  --mw-purple-tint-m:  #E0A6D7;
  --mw-purple-tint-l:  #F0D4EC;

  /* ---------- Semantic Color Tokens ---------- */
  --bg:                var(--mw-white);
  --bg-soft:           var(--mw-gray);
  --bg-inverse:        var(--mw-black);
  --bg-brand:          var(--mw-teal);
  --bg-brand-strong:   var(--mw-teal-dark);
  --bg-brand-soft:     var(--mw-teal-tint-3);

  --fg:                var(--mw-black);
  --fg-muted:          #555555;
  --fg-subtle:         #8A9494;
  --fg-inverse:        var(--mw-white);
  --fg-brand:          var(--mw-teal-dark);
  --fg-on-brand:       var(--mw-white);

  --border:            #D7E1E1;
  --border-strong:     #B5C4C4;
  --divider:           #E8EDED;

  /* Functional / status (derived to match teal-led palette) */
  --success:           #1C7070;
  --warning:           #FFCC01;
  --danger:            #C0392B;
  --info:              #00A7A5;

  /* ---------- Typography ---------- */
  --font-brand:        'GT Walsheim', 'Poppins', system-ui, -apple-system, Arial, sans-serif;
  --font-fallback:     'Poppins', system-ui, -apple-system, Arial, sans-serif;
  --font-mono:         'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Type scale — built around tight tracking + sentence case headings */
  --fs-display-xl:     clamp(56px, 7vw, 96px);
  --fs-display-lg:     clamp(44px, 5.5vw, 72px);
  --fs-display:        clamp(36px, 4.5vw, 56px);
  --fs-h1:             40px;
  --fs-h2:             32px;
  --fs-h3:             24px;
  --fs-h4:             20px;
  --fs-h5:             18px;
  --fs-body-lg:        18px;
  --fs-body:           16px;
  --fs-body-sm:        14px;
  --fs-caption:        12px;

  --fw-light:          300;
  --fw-regular:        400;
  --fw-medium:         500;
  --fw-bold:           700;
  --fw-black:          900;

  /* Brand: display headings 100% leading, -15 tracking; body auto leading, -5 tracking */
  --lh-display:        1.0;
  --lh-tight:          1.1;
  --lh-snug:           1.25;
  --lh-normal:         1.45;
  --lh-loose:          1.6;

  --ls-display:        -0.015em;  /* -15 tracking ≈ -1.5% */
  --ls-tight:          -0.005em;  /* -5 tracking */
  --ls-normal:         0;

  /* ---------- Spacing (4px base) ---------- */
  --sp-0:              0;
  --sp-1:              4px;
  --sp-2:              8px;
  --sp-3:              12px;
  --sp-4:              16px;
  --sp-5:              24px;
  --sp-6:              32px;
  --sp-7:              48px;
  --sp-8:              64px;
  --sp-9:              96px;
  --sp-10:             128px;

  /* ---------- Radii — restrained; pill is a brand shape ---------- */
  --r-xs:              2px;
  --r-sm:              4px;
  --r-md:              8px;
  --r-lg:              12px;
  --r-xl:              20px;
  --r-pill:            999px;

  /* ---------- Shadows — soft, low-emphasis ---------- */
  --shadow-xs:         0 1px 2px rgba(26, 26, 26, 0.04);
  --shadow-sm:         0 2px 6px rgba(26, 26, 26, 0.06);
  --shadow-md:         0 6px 18px rgba(26, 26, 26, 0.08);
  --shadow-lg:         0 16px 40px rgba(26, 26, 26, 0.10);
  --shadow-focus:      0 0 0 3px rgba(40, 187, 187, 0.35);

  /* ---------- Motion ---------- */
  --ease-standard:     cubic-bezier(0.2, 0.6, 0.2, 1);
  --ease-emphasized:   cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast:          120ms;
  --dur-base:          200ms;
  --dur-slow:          360ms;

  /* ---------- Layout ---------- */
  --container-sm:      640px;
  --container-md:      960px;
  --container-lg:      1200px;
  --container-xl:      1440px;
}

/* ============================================================
   Semantic typography — sentence case, no all-caps headings
   ============================================================ */

html { font-family: var(--font-brand); color: var(--fg); }
body { font-size: var(--fs-body); line-height: var(--lh-normal); letter-spacing: var(--ls-tight); }

.mw-display-xl,
.mw-display-lg,
.mw-display,
h1, h2, h3, h4, h5 {
  font-family: var(--font-brand);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-display);
  line-height: var(--lh-display);
  margin: 0;
  text-wrap: balance;
}

.mw-display-xl { font-size: var(--fs-display-xl); }
.mw-display-lg { font-size: var(--fs-display-lg); }
.mw-display    { font-size: var(--fs-display); }

h1 { font-size: var(--fs-h1); line-height: var(--lh-tight); }
h2 { font-size: var(--fs-h2); line-height: var(--lh-tight); }
h3 { font-size: var(--fs-h3); line-height: var(--lh-snug); letter-spacing: var(--ls-tight); }
h4 { font-size: var(--fs-h4); line-height: var(--lh-snug); letter-spacing: var(--ls-tight); }
h5 { font-size: var(--fs-h5); line-height: var(--lh-snug); letter-spacing: var(--ls-tight); }

.mw-supporting {
  font-family: var(--font-brand);
  font-weight: var(--fw-bold);
  font-size: var(--fs-h4);
  letter-spacing: var(--ls-tight);
  line-height: var(--lh-snug);
}

.mw-eyebrow {
  font-family: var(--font-brand);
  font-weight: var(--fw-medium);
  font-size: var(--fs-caption);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fg-brand);
}

p, .mw-body {
  font-family: var(--font-brand);
  font-weight: var(--fw-regular);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  letter-spacing: var(--ls-tight);
  color: var(--fg);
  text-wrap: pretty;
}

.mw-body-lg { font-size: var(--fs-body-lg); line-height: var(--lh-normal); }
.mw-body-sm { font-size: var(--fs-body-sm); line-height: var(--lh-normal); }
.mw-caption { font-size: var(--fs-caption); line-height: var(--lh-normal); color: var(--fg-muted); }

.mw-quote {
  font-family: var(--font-brand);
  font-weight: var(--fw-bold);
  font-size: var(--fs-display);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
  color: var(--fg);
}

.mw-quote::before { content: "\201C"; }
.mw-quote::after  { content: "\201D"; }

code, kbd, .mw-mono {
  font-family: var(--font-mono);
  font-size: 0.92em;
}

/* Utility — bracket graphic device (square brackets from logo eyecon).
   Use as a wrapper around content; corners derive from the eyecon angles. */
.mw-bracket {
  position: relative;
  padding: var(--sp-5) var(--sp-6);
}
.mw-bracket::before,
.mw-bracket::after {
  content: "";
  position: absolute;
  width: 28px;
  height: 28px;
  border: 3px solid currentColor;
}
.mw-bracket::before { top: 0; left: 0; border-right: none; border-bottom: none; }
.mw-bracket::after  { bottom: 0; right: 0; border-left: none; border-top: none; }

/* Pill — brand shape used in templates */
.mw-pill {
  display: inline-flex;
  align-items: center;
  padding: 6px 14px;
  border-radius: var(--r-pill);
  background: var(--mw-teal-tint-3);
  color: var(--fg-brand);
  font-weight: var(--fw-medium);
  font-size: var(--fs-body-sm);
  letter-spacing: var(--ls-tight);
}
.mw-pill--solid { background: var(--mw-teal); color: var(--mw-white); }
.mw-pill--dark  { background: var(--mw-teal-dark); color: var(--mw-white); }

/* ---------- Mira Orb ----------
   Composed: gradient disc (teal→purple) + white eyecon overlay.
   Drop-in:
     <span class="mw-mira-orb"></span>
   Size with width/height (default 56px). Add .mw-mira-orb--glow for halo.
*/
.mw-mira-orb {
  display: inline-block;
  width: 56px; height: 56px;
  border-radius: 999px;
  background:
    url("assets/eyecon-flat-white.png") center/62% no-repeat,
    var(--mw-ai-orb);
  flex-shrink: 0;
}
.mw-mira-orb--glow {
  filter: drop-shadow(0 0 18px rgba(176, 55, 154, .35))
          drop-shadow(0 0 24px rgba(43, 184, 197, .2));
}