/* ============================================
   CPM 3D — "POP" brand tokens (v2)
   Drawn from the CPM 3D sticker logo:
   navy outlines, teal/mint/yellow/red candy fills,
   cream paper, chunky rounded everything.
   ============================================ */

@import url('https://fonts.googleapis.com/css2?family=Lilita+One&family=Baloo+2:wght@500;600;700;800&family=Fredoka:wght@400;500;600;700&display=swap');

:root {
  /* Core palette — sampled from the logo */
  --ink:        #1B2A4A;   /* outline navy */
  --ink-deep:   #131F38;
  --teal:       #2FA8BE;
  --mint:       #56C7B0;
  --yellow:     #F6B92B;
  --orange:     #F0921B;
  --red:        #EA4A3B;
  --cream:      #F4EFE2;
  --paper:      #FFFFFF;
  --bg:         #FAF5EA;
  --bg-tint:    #F1E9d6;

  /* Roles */
  --text:        var(--ink);
  --text-soft:   #5A6378;
  --band:        var(--ink);
  --band-deep:   var(--ink-deep);
  --accent:      var(--yellow);
  --accent-2:    var(--teal);
  --accent-3:    var(--red);
  --accent-4:    var(--mint);
  --line:        #E3D9C2;

  /* Type */
  --font-display: 'Lilita One', 'Baloo 2', sans-serif;
  --font-text:    'Fredoka', sans-serif;
  --font-mono:    ui-monospace, 'SF Mono', Menlo, monospace;

  /* Sticker construction */
  --ow: 2.5px;                 /* outline width */
  --pop: 5px;                  /* hard-shadow offset */
  --radius-lg: 26px;
  --radius-md: 16px;
  --radius-sm: 10px;
  --radius-pill: 999px;
}

[data-fonts="baloo"] {
  --font-display: 'Baloo 2', sans-serif;
}
[data-fonts="lilita"] {
  --font-display: 'Lilita One', sans-serif;
}

/* Sticker building blocks */
.stk {
  border: var(--ow) solid var(--ink);
  box-shadow: var(--pop) var(--pop) 0 var(--ink);
}
.stk-hover { transition: transform 0.16s ease, box-shadow 0.16s ease; }
.stk-hover:hover {
  transform: translate(-2px, -2px);
  box-shadow: calc(var(--pop) + 2px) calc(var(--pop) + 2px) 0 var(--ink);
}

/* Multi-color letter helpers (logo letter colors) */
.c-teal { color: var(--teal); }
.c-mint { color: var(--mint); }
.c-yellow { color: var(--yellow); }
.c-red { color: var(--red); }
.c-cream { color: var(--cream); }
.c-orange { color: var(--orange); }

/* Outlined display text (sticker letters) */
.poptext {
  font-family: var(--font-display);
  -webkit-text-stroke: 0;
  text-shadow:
    2px 0 0 var(--ink), -2px 0 0 var(--ink), 0 2px 0 var(--ink), 0 -2px 0 var(--ink),
    2px 2px 0 var(--ink), -2px 2px 0 var(--ink), 2px -2px 0 var(--ink), -2px -2px 0 var(--ink),
    4px 5px 0 var(--ink);
}

/* Logo image helpers (source PNG has a white background) */
.logo-blend { mix-blend-mode: multiply; }
.logo-card {
  background: #FFFFFF;
  border: var(--ow) solid var(--ink);
  box-shadow: var(--pop) var(--pop) 0 rgba(0, 0, 0, 0.35);
}

/* Placeholder treatment — warm stripes + sticker caption */
.ph {
  position: relative;
  background:
    repeating-linear-gradient(
      -38deg,
      rgba(126, 106, 70, 0.10) 0 14px,
      rgba(126, 106, 70, 0.04) 14px 28px
    ),
    var(--cream);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.ph .ph-tag {
  font-style: normal;
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.06em;
  color: var(--ink);
  background: #FFFFFF;
  border: 2px solid var(--ink);
  box-shadow: 3px 3px 0 var(--ink);
  padding: 5px 11px;
  border-radius: 999px;
  white-space: nowrap;
}