/* ============================================================================
   Friendship Ambassador — purple, pink, blue and green; deep plum for text.
   Playful rounded display face (Fredoka) with Nunito for small text.
   Every token is scoped to the screen ([data-theme="friendship"]) so a leaving
   slide keeps its colours through the cross-fade.
   ============================================================================ */

/* the focus ring is scoped per screen below (white on the deep surfaces, plum on the lilac one) */

[data-theme="friendship"] {
  --font: var(--font-ft);
  --font-display: var(--font-fd);
  --ink: #FFFFFF;
  --outline: #2D1B4E;
  --ring: #FFFFFF;
  --plane-fill: #FFFFFF;
  --plane-fold: #E6DBFF;
  --plane-stroke: #2D1B4E;
  --kicker-accent: #FFD166;
  --bd-blend: multiply;
  --bd-alpha: .55;
  --tint-alpha: .35;
}
[data-theme="friendship"] .question { font-weight: 700; letter-spacing: 0; line-height: 1.08; }
[data-theme="friendship"] .bullet { font-weight: 600; letter-spacing: 0; }
[data-theme="friendship"] .next, [data-theme="friendship"] .home-link, [data-theme="friendship"] .chip-name { font-weight: 700; letter-spacing: .01em; }
[data-theme="friendship"] .mark { border-radius: 50% !important; }

/* Slide 1 — deep purple → orchid surface, linked pinkies in a speech bubble */
[data-theme="friendship"][data-n="1"] {
  --surface: #5B3CC4;
  --surface-grad: linear-gradient(160deg, #5B3CC4 0%, #6A45CF 48%, #8C4BCB 100%);
  --veil-a: rgba(91, 60, 196, .9);
  --veil-b: rgba(91, 60, 196, .5);
  --surface-2: #7E5CE6;
  --blob-a: #FF7BAC;
  --blob-b: #62B6F5;
  --blob-c: #6EDC8C;
  --ink: #FFFFFF;
  --btn-bg: #FF7BAC;
  --btn-fg: #2A1650;
  --btn-shade: #C24C7E;
  --chip-bg: rgba(255, 255, 255, .18);
  --chip-fg: #FFFFFF;
  --step: rgba(255, 255, 255, .35);
  --step-on: #FFFFFF;
  --ring-a: rgba(255, 255, 255, .7);
  --ring-b: rgba(255, 255, 255, .4);
  --vignette: rgba(45, 27, 78, .5);
  --plane-trail: rgba(255, 255, 255, .85);
  --mk-1: #FF7BAC;
  --mk-2: #3FB26A;
  --mk-3: #3A9BE0;
  --grade: linear-gradient(160deg, rgba(150, 90, 240, .85) 0%, rgba(255, 255, 255, 0) 45%, rgba(255, 120, 175, .8) 100%);
  --tint: linear-gradient(160deg, #8E6BEF 0%, #FF7BAC 60%, #62B6F5 100%);
  --light: radial-gradient(circle at 50% 8%, rgba(255, 220, 150, .6), rgba(255, 220, 150, 0) 36%), radial-gradient(circle at 12% 78%, rgba(140, 235, 180, .45), rgba(140, 235, 180, 0) 40%), radial-gradient(circle at 88% 70%, rgba(120, 190, 255, .4), rgba(120, 190, 255, 0) 38%);
  --doodle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 20' preserveAspectRatio='none'%3E%3Cpath d='M3 14 C28 2 40 20 70 9 S110 2 140 12 S180 18 197 7' fill='none' stroke='%23FF7BAC' stroke-width='7' stroke-linecap='round'/%3E%3C/svg%3E");
}

/* Slide 2 — lilac → candy pink surface, trainers circle in a wide blob */
[data-theme="friendship"][data-n="2"] {
  --surface: #DFCFFF;
  --surface-grad: linear-gradient(160deg, #DCCBFF 0%, #E8C9F6 50%, #FFC6DC 100%);
  --veil-a: rgba(222, 205, 255, .92);
  --veil-b: rgba(222, 205, 255, .55);
  --surface-2: #C9B3FF;
  --blob-a: #8E6BEF;
  --blob-b: #6EDC8C;
  --blob-c: #62B6F5;
  --ink: #2D1B4E;
  --btn-bg: #6A3FCB;
  --btn-fg: #FFFFFF;
  --btn-shade: #45208F;
  --chip-bg: rgba(45, 27, 78, .13);
  --chip-fg: #2D1B4E;
  --step: rgba(45, 27, 78, .28);
  --step-on: #6A3FCB;
  --ring: #2D1B4E;
  --ring-a: rgba(45, 27, 78, .45);
  --ring-b: rgba(45, 27, 78, .25);
  --vignette: rgba(45, 27, 78, .42);
  --plane-trail: rgba(45, 27, 78, .6);
  --mk-1: #6A3FCB;
  --mk-2: #3FB26A;
  --mk-3: #E0508A;
  --grade: linear-gradient(160deg, rgba(255, 130, 185, .75) 0%, rgba(255, 255, 255, 0) 45%, rgba(120, 90, 230, .75) 100%);
  --tint: linear-gradient(160deg, #FF9EC2 0%, #B48CFF 55%, #62B6F5 100%);
  --light: radial-gradient(circle at 80% 18%, rgba(255, 170, 215, .55), rgba(255, 170, 215, 0) 38%), radial-gradient(circle at 18% 80%, rgba(160, 235, 190, .45), rgba(160, 235, 190, 0) 40%);
  --bd-blend: normal;
  --bd-alpha: .42;
  --tint-alpha: .5;
  --doodle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 20' preserveAspectRatio='none'%3E%3Cpath d='M3 14 C28 2 40 20 70 9 S110 2 140 12 S180 18 197 7' fill='none' stroke='%236A3FCB' stroke-width='7' stroke-linecap='round'/%3E%3C/svg%3E");
}

/* Slide 3 — indigo → blue-violet twilight surface, sunset run in a pebble */
[data-theme="friendship"][data-n="3"] {
  --surface: #33287A;
  --surface-grad: linear-gradient(160deg, #2F2470 0%, #3D37A0 55%, #4E5AD3 100%);
  --veil-a: rgba(49, 38, 118, .9);
  --veil-b: rgba(49, 38, 118, .5);
  --surface-2: #5A4FC8;
  --blob-a: #FF7BAC;
  --blob-b: #6EDC8C;
  --blob-c: #B48CFF;
  --ink: #FFFFFF;
  --btn-bg: #FF7BAC;
  --btn-fg: #2A1650;
  --btn-shade: #C24C7E;
  --chip-bg: rgba(255, 255, 255, .18);
  --chip-fg: #FFFFFF;
  --step: rgba(255, 255, 255, .35);
  --step-on: #FFFFFF;
  --ring-a: rgba(255, 255, 255, .7);
  --ring-b: rgba(255, 255, 255, .4);
  --vignette: rgba(45, 27, 78, .5);
  --plane-trail: rgba(255, 255, 255, .85);
  --mk-1: #6EDC8C;
  --mk-2: #FF7BAC;
  --mk-3: #62B6F5;
  --grade: linear-gradient(160deg, rgba(140, 90, 240, .8) 0%, rgba(255, 255, 255, 0) 45%, rgba(110, 220, 140, .6) 100%);
  --tint: linear-gradient(160deg, #8E6BEF 0%, #FF7BAC 55%, #6EDC8C 100%);
  --light: radial-gradient(circle at 50% 45%, rgba(255, 200, 120, .55), rgba(255, 200, 120, 0) 30%), radial-gradient(circle at 85% 15%, rgba(190, 120, 255, .45), rgba(190, 120, 255, 0) 40%);
  --doodle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 20' preserveAspectRatio='none'%3E%3Cpath d='M3 14 C28 2 40 20 70 9 S110 2 140 12 S180 18 197 7' fill='none' stroke='%236EDC8C' stroke-width='7' stroke-linecap='round'/%3E%3C/svg%3E");
}

/* Friendship half of the home poster */
.half[data-theme="friendship"] {
  --h-font: var(--font-ft);
  --h-display: var(--font-fd);
  --h-ink: #FFFFFF;
  --h-hand: #FFE4EE; /* pale blush, over the plum pool behind the words */
  --h-bg: linear-gradient(200deg, #5B3CC4 0%, #7E5CE6 38%, #C86DD7 70%, #FF8DBB 100%);
  --surface-grad: var(--h-bg);
  --h-btn-bg: #FF7BAC;
  --h-btn-fg: #2A1650;
  --h-btn-shade: #C24C7E;
  --h-ring: #FFFFFF;
  --surface-2: #7E5CE6;
  --blob-a: #62B6F5;
  --blob-b: #6EDC8C;
  --blob-c: #FF7BAC;
  --ring-a: rgba(255, 255, 255, .7);
  --ring-b: rgba(255, 255, 255, .4);
  --vignette: rgba(45, 27, 78, .5);
  --tape: rgba(110, 220, 140, .86);
  --grade: linear-gradient(160deg, rgba(150, 90, 240, .8) 0%, rgba(255, 255, 255, 0) 45%, rgba(255, 120, 175, .8) 100%);
  --tint: linear-gradient(160deg, #8E6BEF 0%, #FF7BAC 60%, #62B6F5 100%);
  --light: radial-gradient(circle at 75% 20%, rgba(255, 150, 200, .55), rgba(255, 150, 200, 0) 40%), radial-gradient(circle at 20% 80%, rgba(140, 230, 180, .45), rgba(140, 230, 180, 0) 40%);
}
.half[data-theme="friendship"] .pname { font-weight: 700; letter-spacing: 0; }
.half[data-theme="friendship"] .begin { font-weight: 700; }

/* Home-wide tokens */
body.theme-home { --ring: #2D1B4E; }
.home {
  --font: var(--font-eco);
  --ink: #2D1B4E;
  --ring: #2D1B4E;
  --title-bg: #2D1B4E;
  --title-fg: #FFFFFF;
  --seam-stitch: #FF7BAC;
}