/* ============================================================
   THE PINK SCHOOL OF STEM × MAGNA AMATA - Core Foundations
   "Bubblegum Couture" · aligned to the Digital Branding Suite
   Source of truth: brand_suite/suite.css (2026_06_08)
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Bodoni+Moda:ital,opsz,wght@0,6..96,400..800;1,6..96,400..800&family=Montserrat:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400;1,500&family=Space+Mono:wght@400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap');

:root {
  /* ===== BUBBLEGUM SPINE (canonical) ===== */
  --magenta:            #ff2db6;   /* primary brand pink · readable on light */
  --bubble:             #ff4fd8;   /* glow pink */
  --mid-pink:           #ff86db;
  --soft-pink:          #ffa3f8;
  --pale-orchid:        #ffc1ff;
  --blush:              #ffe4f7;
  --lavender:           #a06bff;
  --candy-cyan:         #10b8c4;
  --candy-cyan-bright:  #3ee0e6;
  --peach:              #ff7e9d;
  --lemon:              #ffcf5e;

  /* ===== DEEP ACCENTS ===== */
  --deep-rose:          #c2185b;   /* headings on light */
  --wine:               #880e4f;   /* deepest shade */
  --bubble-deep:        #d61ba0;

  /* ===== TPSS WORLD · noir + neon magenta ===== */
  --tpss-black:         #0b0312;
  --tpss-panel:         #14041f;
  --neon:               #ff2db6;
  --neon-soft:          #ff7ad4;
  --neon-glow:          0 0 14px rgba(255,45,182,.85), 0 0 44px rgba(255,45,182,.4);

  /* ===== COSMIC DARK (full-bleed galaxy) ===== */
  --void:               #1a0726;
  --void-2:             #2a0f3d;
  --nebula:             #3a1252;
  --cosmic-void:        #0a0014;   /* deepest finale void */
  --nebula-deep:        #1a0a2e;

  /* ===== INK (deep grape on light) ===== */
  --ink:                #4a1148;
  --ink-soft:           #8a4f84;
  --ink-faint:          #b884b2;
  --ink-on-dark:        #ffe9fb;
  --ink-on-dark-soft:   rgba(255,233,251,.74);
  --line:               rgba(255,79,216,.28);
  --line-bright:        rgba(255,79,216,.55);

  /* ===== SISTER SIGNATURES (used only inside a sister's context) ===== */
  --sig-seraphina:      #ff2db6;
  --sig-electra:        #c77dff;
  --sig-electra-spark:  #7cc6ff;
  --sig-prismatica:     #ff5fc4;
  --sig-prismatica-aqua:#10b8c4;
  --sig-radiance:       #1f8fb0;
  --sig-radiance-deep:  #3b3fa8;
  --sig-fuchsia-a:      #a06bff;
  --sig-fuchsia-b:      #ff4fd8;
  --sig-fuchsia-c:      #3ee0e6;
  --sig-magna:          #9a6bd6;
  --holo-silver:        #d9d6f0;   /* Magna Amata · the merged whole */
  --gold:               #e0a93c;

  /* ============================================================
     MATERIAL-3 SCALE - the TPSS noir "world", retuned to brand
     ============================================================ */
  --surface:                    #14071f;
  --surface-dim:                #0e0417;
  --surface-bright:             #3a2540;
  --surface-container-lowest:   #0b0312;   /* canonical noir */
  --surface-container-low:      #180a24;
  --surface-container:          #1e0e2b;
  --surface-container-high:     #271433;
  --surface-container-highest:  #32193f;
  --on-surface:                 #f7e3f4;
  --on-surface-variant:         #e3c4dd;
  --inverse-surface:            #f7e3f4;
  --inverse-on-surface:         #2a1730;
  --outline:                    #c5a9be;
  --outline-variant:            #4a3350;
  --surface-tint:               #ff7ad4;
  --surface-variant:            #32193f;
  --background:                 #0f0518;
  --on-background:              #f7e3f4;

  --primary:                    #ff7ad4;   /* neon-soft · reads on noir */
  --on-primary:                 #4a0033;
  --primary-container:          #ff2db6;   /* neon magenta */
  --on-primary-container:       #2a0018;
  --inverse-primary:            #c2185b;
  --primary-fixed:              #ffd7f5;
  --primary-fixed-dim:          #ff7ad4;
  --on-primary-fixed:           #2a0018;
  --on-primary-fixed-variant:   #a3006f;

  --secondary:                  #c9a3ff;   /* lavender light */
  --on-secondary:               #2e0b52;
  --secondary-container:        #a06bff;   /* lavender */
  --on-secondary-container:     #1c0640;
  --secondary-fixed:            #e9d6ff;
  --secondary-fixed-dim:        #c9a3ff;
  --on-secondary-fixed:         #16042e;
  --on-secondary-fixed-variant: #5a2ba0;

  --tertiary:                   #6be5d8;   /* candy cyan light */
  --on-tertiary:                #00312c;
  --tertiary-container:         #10b8c4;   /* candy cyan */
  --on-tertiary-container:      #002b2f;
  --tertiary-fixed:             #a6f4ea;
  --tertiary-fixed-dim:         #6be5d8;
  --on-tertiary-fixed:          #00201d;
  --on-tertiary-fixed-variant:  #005048;

  --error:                      #ffb4ab;
  --on-error:                   #690005;
  --error-container:            #93000a;
  --on-error-container:         #ffdad6;

  /* ===== LEGACY BRAND ALIASES (retuned to brand canon) ===== */
  --magenta-deep:   #c2185b;
  --magenta-soft:   #ff7ad4;
  --cyan:           #3ee0e6;
  --cyan-soft:      #6be5d8;
  --ultraviolet:    #a06bff;
  --cosmic-blue:    #3b3fa8;
  --gold-accent:    #e0a93c;
  --night:          var(--surface-container-low);
  --plum:           var(--surface-container-high);
  --mist-rose:      #f3d9f0;
  --ether-lavender: #ead1e6;
  --fg-1:           var(--on-surface);
  --fg-2:           rgba(247,227,244,0.78);
  --fg-3:           rgba(227,196,221,0.55);
  --fg-on-pink:     #2a0018;

  --surface-raised: rgba(255,45,182,0.06);
  --surface-glass:  rgba(247,227,244,0.04);
  --border-soft:    rgba(255,45,182,0.18);
  --border-bright:  rgba(255,122,212,0.45);

  /* ===== GRADIENTS (canonical) ===== */
  --grad-candy:          linear-gradient(135deg,#ff4fd8 0%,#a06bff 50%,#3ee0e6 100%); /* @kind color */
  --grad-iris:           linear-gradient(120deg,#ffb3ec 0%,#c9b3ff 32%,#9fe9f2 60%,#ffd9c9 82%,#ffb3ec 100%); /* @kind color */
  --grad-spine:          linear-gradient(120deg,#ff2db6,#ff86db,#ffa3f8); /* @kind color */
  --grad-helix:          linear-gradient(120deg,#a06bff,#ff4fd8 45%,#3ee0e6); /* @kind color */
  --grad-rose:           linear-gradient(120deg,#ff4fd8,#c2185b); /* @kind color */
  --grad-shimmer:        linear-gradient(90deg,#ff2db6,#ffd9f5,#a06bff,#3ee0e6,#ff2db6); /* @kind color */
  --grad-sun:            linear-gradient(120deg,#ffcf5e,#ff7e9d,#ff4fd8); /* @kind color */
  --grad-night-sky:      radial-gradient(ellipse at top,#2a0f3d 0%,#14041f 50%,#0b0312 100%); /* @kind color */
  --grad-cosmic-aura:    radial-gradient(ellipse at 50% 50%,rgba(255,79,216,.30),rgba(160,107,255,.12) 40%,transparent 70%); /* @kind color */
  /* legacy gradient aliases */
  --grad-fuchsia-flame:  var(--grad-helix);
  --grad-holo:           var(--grad-shimmer);
  --grad-text-shimmer:   var(--grad-shimmer);

  /* ===== GLOWS / SHADOWS ===== */
  --celestial-glow:    0 0 40px rgba(255,45,182,0.15), inset 0 0 20px rgba(255,45,182,0.05);
  --glow-magenta:      0 0 24px rgba(255,45,182,0.55), 0 0 48px rgba(255,45,182,0.25);
  --glow-magenta-soft: 0 0 24px rgba(255,122,212,0.40);
  --glow-cyan:         0 0 18px rgba(62,224,230,0.55), 0 0 40px rgba(62,224,230,0.20);
  --glow-violet:       0 0 28px rgba(160,107,255,0.50);
  --glow-tertiary:     0 0 24px rgba(16,184,196,0.45);
  --glow-pink:         0 0 18px rgba(255,79,216,0.25), 0 0 44px rgba(160,107,255,0.14);
  --glow-soft:         0 10px 30px rgba(255,79,216,0.14);
  --shadow-card:       0 12px 34px rgba(255,79,216,0.10), 0 22px 60px rgba(160,107,255,0.08);
  --shadow-float:      0 20px 50px rgba(255,79,216,0.18), 0 28px 72px rgba(160,107,255,0.12);
  --shadow-deep:       0 30px 80px rgba(11,3,18,0.55);

  /* ===== RADII · sharp couture edges (canonical) ===== */
  --r-xs:      2px;
  --r-sm:      2px;
  --r:         3px;
  --r-default: 3px;
  --r-md:      5px;
  --r-lg:      8px;
  --r-xl:      12px;
  --r-pill:    9999px;

  /* ===== SPACING ===== */
  --unit: 8px;
  --container-padding: 64px;
  --gutter: 24px;
  --gap: 24px;
  --section-gap: 120px;
  --page-max: 1180px;
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
  --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px;

  /* ===== TYPE FAMILIES (canonical) ===== */
  --f-display:  'Bodoni Moda', Georgia, serif; /* @kind font */
  --f-serif:    'Bodoni Moda', Georgia, serif; /* @kind font */
  --f-body:     'Montserrat', system-ui, sans-serif; /* @kind font */
  --f-mono:     'Space Mono', monospace; /* @kind font */
  --font-headline:  'Bodoni Moda', Georgia, serif;   /* Display + headlines */
  --font-body:      'Montserrat', system-ui, sans-serif;
  --font-label:     'Montserrat', system-ui, sans-serif;
  --font-mono:      'Space Mono', 'IBM Plex Mono', monospace;
  /* legacy aliases */
  --font-display:   'Bodoni Moda', Georgia, serif;
  --font-couture:   'Bodoni Moda', Georgia, serif;
  --font-editorial: 'Bodoni Moda', Georgia, serif;
  --font-eyebrow:   'Montserrat', sans-serif;
}

/* ===== SEMANTIC TYPE ===== */
.tpss-display-lg {
  font-family: var(--font-headline);
  font-style: italic;
  font-weight: 700;
  font-size: clamp(4rem, 10vw, 120px);
  line-height: 0.92;
  letter-spacing: -0.015em;
  color: var(--on-surface);
}
.tpss-headline-md {
  font-family: var(--font-headline);
  font-weight: 600;
  font-size: clamp(2rem, 4vw, 48px);
  line-height: 1.2;
  letter-spacing: 0;
  color: var(--on-surface);
}
.tpss-headline-italic {
  font-family: var(--font-headline);
  font-style: italic;
  font-weight: 600;
  font-size: clamp(2rem, 4vw, 48px);
  line-height: 1.2;
}
.tpss-body-lg {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 18px;
  line-height: 1.6;
  letter-spacing: 0.01em;
  color: var(--on-surface-variant);
}
.tpss-body {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.6;
  letter-spacing: 0.01em;
  color: var(--on-surface-variant);
}
.tpss-label-sm {
  font-family: var(--font-label);
  font-weight: 600;
  font-size: 12px;
  line-height: 1;
  letter-spacing: 0.44em;
  text-transform: uppercase;
  color: var(--primary);
}
.tpss-mono {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.05em;
  color: var(--primary);
}

/* ===== UTILITY ===== */
.tpss-bg-cosmic {
  background:
    radial-gradient(ellipse at 30% 0%, rgba(255,45,182,0.08), transparent 50%),
    radial-gradient(ellipse at 70% 100%, rgba(160,107,255,0.06), transparent 60%),
    var(--surface);
  color: var(--on-surface);
}
.tpss-glass {
  backdrop-filter: blur(40px);
  -webkit-backdrop-filter: blur(40px);
  background: rgba(20, 7, 31, 0.7);
  border: 1px solid var(--outline-variant);
}
.tpss-celestial-glow {
  box-shadow: var(--celestial-glow);
}
.tpss-text-holo {
  background: var(--grad-shimmer);
  background-size: 280% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: tpss-holo-shimmer 8s linear infinite;
}
@keyframes tpss-holo-shimmer {
  0%   { background-position: 0% 50%; }
  100% { background-position: 280% 50%; }
}

/* ===== COUTURE CONTAINERS (sharp edges) ===== */
.tpss-stadium-tl-br {
  border-radius: var(--r-xl) var(--r-default) var(--r-xl) var(--r-default);
}
.tpss-stadium-tr-bl {
  border-radius: var(--r-default) var(--r-xl) var(--r-default) var(--r-xl);
}

/* ===== COUTURE BUTTONS ===== */
.tpss-btn-primary {
  font-family: var(--font-label);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  background: linear-gradient(135deg, #ff2db6, #ff4fd8);
  color: #fff;
  border: none;
  padding: 17px 36px;
  border-radius: var(--r-sm);
  cursor: pointer;
  box-shadow: 0 6px 24px rgba(255, 45, 182, 0.45);
  transition: all 0.3s cubic-bezier(.4, 0, .2, 1);
}
.tpss-btn-primary:hover {
  box-shadow: 0 10px 36px rgba(255, 45, 182, 0.7);
  transform: translateY(-2px);
}
.tpss-btn-ghost {
  font-family: var(--font-label);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  background: transparent;
  color: var(--on-surface);
  border: 1px solid var(--outline-variant);
  padding: 17px 36px;
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: all 0.3s cubic-bezier(.4, 0, .2, 1);
}
.tpss-btn-ghost:hover {
  border-color: var(--neon);
  box-shadow: 0 0 20px rgba(255, 45, 182, 0.3);
}