/* ===========================================================================
   LazyOlie theme
   Pink + White by day, Pink + Black by night, switchable from the top bar.
   Every colour is a token, so a plugin only ever refers to var(--...).
   =========================================================================== */

@font-face {
  font-family: 'Pacifico';
  src: url('/fonts/Pacifico.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'Lobster Two';
  src: url('/fonts/LobsterTwo-BoldItalic.woff2') format('woff2');
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Yellowtail';
  src: url('/fonts/Yellowtail.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}

:root {
  /* --- The Barbie wordmark font. Swap this one line to restyle the logo: ---
     'Pacifico'     bubbly retro script  (default - reads best on a phone)
     'Lobster Two'  bold slanted fashion script
     'Yellowtail'   flowing brush script                                   */
  --font-logo: 'Pacifico', 'Lobster Two', 'Brush Script MT', cursive;

  /* Everything that is not the logo is Tahoma, as specified. */
  --font-body: Tahoma, Verdana, Geneva, 'DejaVu Sans', sans-serif;

  /* --- Brand pinks (identical in both themes so the brand never shifts) --- */
  --pink-50:  #FFF0F7;
  --pink-100: #FFDCEC;
  --pink-200: #FFB8D9;
  --pink-300: #FF8CC2;
  --pink-400: #FF5BAA;
  --pink-500: #FF2D8E;   /* primary */
  --pink-600: #E0218A;   /* classic Barbie */
  --pink-700: #B81572;
  --pink-glow: rgba(255, 45, 142, 0.35);

  --grad-pink: linear-gradient(135deg, #FF6EC7 0%, #FF2D8E 55%, #E0218A 100%);
  --grad-pink-soft: linear-gradient(135deg, #FFE3F1 0%, #FFD0E6 100%);

  --radius-sm: 10px;
  --radius: 16px;
  --radius-lg: 22px;
  --radius-tile: 26px;
  --radius-pill: 999px;

  --tap: 52px;              /* minimum comfortable thumb target */
  --header-h: 58px;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ------------------------------ light theme ------------------------------ */
:root,
:root[data-theme='light'] {
  color-scheme: light;

  --bg: #FFF5FA;
  --bg-pattern: radial-gradient(1200px 600px at 50% -12%, #FFE1F1 0%, rgba(255, 225, 241, 0) 62%);
  --surface: #FFFFFF;
  --surface-2: #FFF7FB;
  --surface-sunken: #FDEEF6;
  --border: #F3D7E7;
  --border-strong: #E9BDD6;

  --text: #22161D;
  --text-muted: #8A7481;
  --text-faint: #B9A4AF;
  --on-pink: #FFFFFF;

  --shadow-sm: 0 1px 2px rgba(184, 21, 114, 0.08);
  --shadow: 0 6px 18px rgba(184, 21, 114, 0.10);
  --shadow-lg: 0 16px 40px rgba(184, 21, 114, 0.16);

  /* The soft pink panel used for hero cards and callouts. Defined in all three
     theme branches so a component never has to write its own dark override -
     getting that wrong leaves light text on a light panel in system-dark. */
  --panel-soft-bg: var(--grad-pink-soft);
  --panel-soft-border: var(--pink-200);
  --panel-soft-text: #8A1259;

  --logo-fill: var(--grad-pink);
  --logo-stroke: #FFFFFF;
  --logo-shadow: 0 3px 0 rgba(184, 21, 114, 0.22);

  --overlay: rgba(34, 22, 29, 0.42);
  --danger: #D92D50;
  --success: #17966B;
}

/* ------------------------------- dark theme ------------------------------- */
:root[data-theme='dark'] {
  color-scheme: dark;

  --bg: #0F0A0E;
  --bg-pattern: radial-gradient(1100px 560px at 50% -14%, rgba(255, 45, 142, 0.20) 0%, rgba(255, 45, 142, 0) 64%);
  --surface: #1B1219;
  --surface-2: #241822;
  --surface-sunken: #150E14;
  --border: #35232F;
  --border-strong: #4A3040;

  --text: #FBF2F7;
  --text-muted: #B49CA9;
  --text-faint: #7C6470;
  --on-pink: #FFFFFF;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5);
  --shadow: 0 8px 22px rgba(0, 0, 0, 0.55);
  --shadow-lg: 0 20px 46px rgba(0, 0, 0, 0.65);

  --panel-soft-bg: color-mix(in srgb, var(--pink-500) 14%, transparent);
  --panel-soft-border: color-mix(in srgb, var(--pink-400) 36%, transparent);
  --panel-soft-text: var(--pink-200);

  --logo-fill: linear-gradient(135deg, #FF9AD5 0%, #FF4FA3 55%, #FF2D8E 100%);
  --logo-stroke: rgba(255, 255, 255, 0.9);
  --logo-shadow: 0 0 24px rgba(255, 45, 142, 0.5);

  --overlay: rgba(0, 0, 0, 0.62);
  --danger: #FF6B86;
  --success: #4ADE9B;
}

/* Follow the phone until the user picks a side themselves. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    color-scheme: dark;

    --bg: #0F0A0E;
    --bg-pattern: radial-gradient(1100px 560px at 50% -14%, rgba(255, 45, 142, 0.20) 0%, rgba(255, 45, 142, 0) 64%);
    --surface: #1B1219;
    --surface-2: #241822;
    --surface-sunken: #150E14;
    --border: #35232F;
    --border-strong: #4A3040;

    --text: #FBF2F7;
    --text-muted: #B49CA9;
    --text-faint: #7C6470;

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5);
    --shadow: 0 8px 22px rgba(0, 0, 0, 0.55);
    --shadow-lg: 0 20px 46px rgba(0, 0, 0, 0.65);

    --panel-soft-bg: color-mix(in srgb, var(--pink-500) 14%, transparent);
    --panel-soft-border: color-mix(in srgb, var(--pink-400) 36%, transparent);
    --panel-soft-text: var(--pink-200);

    --logo-fill: linear-gradient(135deg, #FF9AD5 0%, #FF4FA3 55%, #FF2D8E 100%);
    --logo-stroke: rgba(255, 255, 255, 0.9);
    --logo-shadow: 0 0 24px rgba(255, 45, 142, 0.5);

    --overlay: rgba(0, 0, 0, 0.62);
    --danger: #FF6B86;
    --success: #4ADE9B;
  }
}