/* ==========================================================================
   Marilla Moodboard Design Tokens
   Retro-editorial + kawaii-sticker. Two surface modes: TEAL and CREAM.
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Bowlby+One&family=Alfa+Slab+One&family=DM+Sans:wght@400;500;600;700&family=Caveat:wght@500;700&display=swap');

:root {
  /* Palette — pulled from the mood board */
  --teal-900: #0F4A4A;
  --teal-800: #134E5E;
  --teal-700: #186060;
  --teal-600: #1F8A8A;
  --teal-500: #2EA8A0;
  --teal-300: #78A890;
  --cream-100: #FBF4E2;
  --cream-200: #F3E9D2;
  --cream-300: #E8D8B8;
  --paper-line: rgba(28, 28, 28, 0.18);
  --paper-line-strong: rgba(28, 28, 28, 0.45);
  --white-line: rgba(255, 255, 255, 0.85);
  --white-line-soft: rgba(255, 255, 255, 0.35);

  --red:        #C8442C;
  --orange:    #F08A3E;
  --yellow:    #F2C14E;
  --blush:     #F2A6B6;
  --forest:    #2E6B5E;
  --mushroom:  #A86A3D;
  --ink:       #1C1C1C;
  --ink-soft:  #3A3A3A;
  --ink-muted: #6B6B6B;

  /* Type */
  --font-display: 'Bowlby One', 'Alfa Slab One', 'Impact', sans-serif;
  --font-display-alt: 'Alfa Slab One', 'Bowlby One', serif;
  --font-body: 'DM Sans', -apple-system, BlinkMacSystemFont, 'SF Pro Text', system-ui, sans-serif;
  --font-hand: 'Caveat', 'Marker Felt', cursive;

  /* Radii — slightly rounded, not pill-y */
  --r-sm: 4px;
  --r-md: 8px;
  --r-lg: 14px;
  --r-xl: 22px;

  /* Outline strokes */
  --stroke: 1.5px;
  --stroke-strong: 2.5px;

  /* Sticker shadow — die-cut white border + soft drop */
  --sticker-shadow: 0 2px 0 rgba(0,0,0,0.10), 0 6px 14px rgba(0,0,0,0.18);
  --sticker-border: 3px solid #FFFFFF;
}

/* ============== Headline treatment (retro 3D drop) ============== */
.headline {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  line-height: 0.95;
  /* Layered drop-shadow gives the cinema-poster 3D feel */
  text-shadow:
    1px 1px 0 var(--ink),
    3px 3px 0 var(--ink),
    5px 5px 0 rgba(28,28,28,0.5);
}
.headline--cream  { color: var(--cream-200); }
.headline--red    { color: var(--red); }
.headline--orange { color: var(--orange); }
.headline--teal   { color: var(--teal-700); }
.headline--ink    { color: var(--ink); }
.headline--no-shadow { text-shadow: none; }

/* echo variant — colored shadow instead of black */
.headline--echo-red    { text-shadow: 3px 3px 0 var(--red),    5px 5px 0 rgba(200,68,44,0.45); }
.headline--echo-orange { text-shadow: 3px 3px 0 var(--orange), 5px 5px 0 rgba(240,138,62,0.45); }
.headline--echo-teal   { text-shadow: 3px 3px 0 var(--teal-700), 5px 5px 0 rgba(15,74,74,0.45); }

/* ============== Sticker chip — circular icon with white die-cut border ============== */
.sticker {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  border: var(--sticker-border);
  background: var(--blush);
  color: var(--ink);
  font-size: 22px;
  line-height: 1;
  box-shadow: var(--sticker-shadow);
  flex: 0 0 auto;
}
.sticker--lg { width: 56px; height: 56px; font-size: 30px; }
.sticker--xl { width: 76px; height: 76px; font-size: 42px; }
.sticker--sm { width: 28px; height: 28px; font-size: 16px; border-width: 2px; }
.sticker--red     { background: var(--red); }
.sticker--orange  { background: var(--orange); }
.sticker--yellow  { background: var(--yellow); }
.sticker--blush   { background: var(--blush); }
.sticker--forest  { background: var(--forest); color: var(--cream-200); }
.sticker--mushroom{ background: var(--mushroom); color: var(--cream-200); }
.sticker--teal    { background: var(--teal-600); color: var(--cream-200); }
.sticker--cream   { background: var(--cream-200); }

/* ============== Outlined containers ============== */
.outline-card {
  border: var(--stroke) solid var(--white-line);
  border-radius: var(--r-md);
  background: transparent;
  padding: 18px 20px;
}
.outline-card--ink {
  border-color: var(--ink);
}
.outline-card--dashed {
  border-style: dashed;
  border-color: var(--white-line);
}
.outline-card--cream {
  border-color: var(--paper-line-strong);
  background: var(--cream-100);
}

/* ============== Tag pill — outline only ============== */
.tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  border: var(--stroke) solid currentColor;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1.4;
}
.tag--dashed { border-style: dashed; }

/* ============== Buttons ============== */
.btn {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 10px 18px;
  border-radius: 999px;
  border: var(--stroke-strong) solid var(--ink);
  background: var(--cream-200);
  color: var(--ink);
  cursor: pointer;
  box-shadow: 3px 3px 0 var(--ink);
  transition: transform .1s ease, box-shadow .1s ease;
}
.btn:hover { transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--ink); }
.btn:active { transform: translate(2px, 2px); box-shadow: 0 0 0 var(--ink); }
.btn--red    { background: var(--red); color: var(--cream-100); }
.btn--orange { background: var(--orange); }
.btn--teal   { background: var(--teal-600); color: var(--cream-100); }

/* ============== Paper grain / noise (subtle) ============== */
.paper-grain {
  background-image:
    radial-gradient(rgba(28,28,28,0.04) 1px, transparent 1px),
    radial-gradient(rgba(28,28,28,0.03) 1px, transparent 1px);
  background-size: 3px 3px, 7px 7px;
  background-position: 0 0, 1px 2px;
}
</content>
</invoke>