/* ==========================================================================
   Media Stack — Brand DNA Tokens
   Source of truth for all future builds (landing pages, ads, decks, emails).
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Anton&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  /* ----- Core palette ----------------------------------------------------- */
  --ms-ink:        #0A0F2C;   /* primary brand surface — deep navy           */
  --ms-ink-2:      #050926;   /* deeper navy for marquees / footers          */
  --ms-ink-3:      #131A47;   /* navy card surface, 1 step lighter than ink  */

  --ms-paper:      #FFFFFF;   /* light surface                                */
  --ms-paper-2:    #F4F5F8;   /* off-white section break                      */

  --ms-cyan:       #7BD7E8;   /* primary CTA — cyan / sky                     */
  --ms-cyan-deep:  #5EC4D7;   /* CTA hover                                    */
  --ms-cyan-press: #46B0C5;   /* CTA pressed                                  */

  --ms-pink:       #FF4FA3;   /* accent — eyebrows, role labels, highlights   */
  --ms-pink-deep:  #E63A8A;

  /* ----- Type on surfaces ------------------------------------------------- */
  --ms-text-on-ink:        #FFFFFF;
  --ms-text-on-ink-muted:  rgba(255,255,255,0.62);
  --ms-text-on-paper:      #0A0F2C;
  --ms-text-on-paper-muted:#5A6079;

  /* ----- Lines & overlays ------------------------------------------------- */
  --ms-rule-on-ink:    rgba(255,255,255,0.10);
  --ms-rule-on-paper:  #E5E7EE;
  --ms-veil-ink:       rgba(10,15,44,0.78);

  /* ----- Functional ------------------------------------------------------- */
  --ms-success: #4FD18B;
  --ms-warn:    #FFC857;
  --ms-error:   #FF5C5C;

  /* ----- Type stack ------------------------------------------------------- */
  --ms-display: "Anton", "Bebas Neue", "Impact", sans-serif;     /* condensed display, headlines */
  --ms-sans:    "Inter", -apple-system, system-ui, sans-serif;   /* body, UI                     */
  --ms-mono:    "JetBrains Mono", ui-monospace, monospace;       /* tags, data, indices          */

  /* ----- Scale ------------------------------------------------------------ */
  --ms-fs-display-xl: clamp(56px, 9vw, 144px);
  --ms-fs-display-l:  clamp(40px, 6vw, 88px);
  --ms-fs-display-m:  clamp(28px, 3.6vw, 56px);
  --ms-fs-display-s:  clamp(20px, 2vw, 28px);
  --ms-fs-body-l:     18px;
  --ms-fs-body:       16px;
  --ms-fs-body-s:     14px;
  --ms-fs-eyebrow:    12px;

  --ms-lh-tight:  0.95;
  --ms-lh-snug:   1.15;
  --ms-lh-body:   1.55;

  /* ----- Spacing --------------------------------------------------------- */
  --ms-gap-1:  4px;
  --ms-gap-2:  8px;
  --ms-gap-3:  16px;
  --ms-gap-4:  24px;
  --ms-gap-5:  40px;
  --ms-gap-6:  64px;
  --ms-gap-7:  96px;
  --ms-gap-8:  128px;

  /* ----- Radius / shadow / motion ---------------------------------------- */
  --ms-radius-pill:   999px;
  --ms-radius-card:   12px;
  --ms-radius-input:  8px;

  --ms-shadow-card:   0 10px 30px rgba(5,9,38,0.18);
  --ms-shadow-pop:    0 24px 60px rgba(5,9,38,0.35);

  --ms-ease:          cubic-bezier(0.2, 0, 0.1, 1);
  --ms-dur:           220ms;
  --ms-dur-long:      420ms;
}

/* ----- Helpers -------------------------------------------------------- */

.ms-ink-bg     { background: var(--ms-ink); color: var(--ms-text-on-ink); }
.ms-paper-bg   { background: var(--ms-paper); color: var(--ms-text-on-paper); }

.ms-display    { font-family: var(--ms-display); text-transform: uppercase; letter-spacing: 0.005em; line-height: var(--ms-lh-tight); }
.ms-eyebrow    { font-family: var(--ms-mono); text-transform: uppercase; letter-spacing: 0.14em; font-size: var(--ms-fs-eyebrow); font-weight: 500; }
.ms-body       { font-family: var(--ms-sans); font-size: var(--ms-fs-body); line-height: var(--ms-lh-body); }

/* CTA — the canonical Media Stack button */
.ms-cta {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--ms-sans); font-weight: 600; font-size: 15px;
  padding: 14px 28px; border-radius: var(--ms-radius-pill);
  background: var(--ms-cyan); color: var(--ms-ink); border: 0;
  cursor: pointer; text-decoration: none;
  transition: background var(--ms-dur) var(--ms-ease), transform var(--ms-dur) var(--ms-ease);
}
.ms-cta:hover  { background: var(--ms-cyan-deep); }
.ms-cta:active { background: var(--ms-cyan-press); transform: translateY(1px); }
.ms-cta--ghost { background: transparent; color: inherit; border: 1.5px solid currentColor; }