/* ============================================================================
   Eco Ambassador — blush pink, sky blue, leaf green; deep navy for text.
   Clean, simple sans (Plus Jakarta Sans), strong weight contrast.
   Every token is scoped to the screen ([data-theme="eco"]) so a leaving slide
   keeps its colours through the cross-fade; nothing depends on the body class.
   ============================================================================ */

body.theme-eco { --ring: #14304C; }

[data-theme="eco"] {
  --font: var(--font-eco);
  --font-display: var(--font-eco);
  --ink: #14304C;
  --outline: #14304C;
  --ring: #14304C;
  --btn-bg: #14304C;
  --btn-fg: #FFFFFF;
  --btn-shade: #08182A;
  --chip-bg: rgba(20, 48, 76, .13);
  --chip-fg: #14304C;
  --step: rgba(20, 48, 76, .28);
  --step-on: #14304C;
  --ring-a: rgba(20, 48, 76, .45);
  --ring-b: rgba(20, 48, 76, .28);
  --vignette: rgba(20, 48, 76, .42);
  --plane-trail: rgba(20, 48, 76, .6);
  --plane-fill: #FFFFFF;
  --plane-fold: #CFE8FA;
  --plane-stroke: #14304C;
  --kicker-accent: #E8548C;
  --bd-blend: normal;
  --bd-alpha: .5;
  --tint-alpha: .5;
}

/* Slide 1 — blush → sky surface, river at dawn in a blob */
[data-theme="eco"][data-n="1"] {
  --surface: #FFD9E3;
  --surface-grad: linear-gradient(160deg, #FFDDE7 0%, #FFD3E0 38%, #D7E9FA 100%);
  --veil-a: rgba(255, 218, 228, .92);
  --veil-b: rgba(255, 218, 228, .55);
  --surface-2: #F9BCD0;
  --blob-a: #8FD6F5;
  --blob-b: #9FE2A2;
  --blob-c: #FFAFC9;
  --mk-1: #2F8FD6;
  --mk-2: #3FA75A;
  --mk-3: #EE5F93;
  --grade: linear-gradient(165deg, rgba(255, 140, 185, .8) 0%, rgba(255, 255, 255, 0) 45%, rgba(60, 170, 110, .8) 100%);
  --tint: linear-gradient(160deg, #FF9EC2 0%, #8FD6F5 55%, #7ED47F 100%);
  --light: radial-gradient(circle at 22% 18%, rgba(255, 170, 205, .7), rgba(255, 170, 205, 0) 40%), radial-gradient(circle at 80% 80%, rgba(140, 215, 255, .5), rgba(140, 215, 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 12 C30 3 52 18 82 10 S132 3 162 12 S190 15 197 8' fill='none' stroke='%232F8FD6' stroke-width='6' stroke-linecap='round'/%3E%3C/svg%3E");
}

/* Slide 2 — sky → mint surface, planting hands in an arch rising from the floor */
[data-theme="eco"][data-n="2"] {
  --surface: #CDEAFA;
  --surface-grad: linear-gradient(160deg, #D3EBFB 0%, #C3E4F8 45%, #C9F0D3 100%);
  --veil-a: rgba(205, 234, 250, .92);
  --veil-b: rgba(205, 234, 250, .55);
  --surface-2: #A6DBF6;
  --blob-a: #FFC3D7;
  --blob-b: #A5E7A8;
  --blob-c: #6FC3EE;
  --mk-1: #EE5F93;
  --mk-2: #2F8FD6;
  --mk-3: #3FA75A;
  /* skin and soil: a warm, gentle grade so hands stay warm and the earth stays dark */
  --grade: linear-gradient(165deg, rgba(255, 190, 170, .7) 0%, rgba(255, 255, 255, 0) 48%, rgba(110, 210, 150, .75) 100%);
  --tint: linear-gradient(160deg, #FFC3D7 0%, #A6DBF6 60%, #A5E7A8 100%);
  --light: radial-gradient(circle at 70% 15%, rgba(255, 220, 170, .6), rgba(255, 220, 170, 0) 40%), radial-gradient(circle at 20% 80%, rgba(150, 230, 190, .35), rgba(150, 230, 190, 0) 40%);
  --tint-alpha: .55;
  --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 12 C30 3 52 18 82 10 S132 3 162 12 S190 15 197 8' fill='none' stroke='%23EE5F93' stroke-width='6' stroke-linecap='round'/%3E%3C/svg%3E");
}
[data-theme="eco"][data-n="2"] .shape .tint { opacity: .1; }

/* Slide 3 — leaf → blush surface, pink meadow in a leaf */
[data-theme="eco"][data-n="3"] {
  --surface: #A9E6A9;
  --surface-grad: linear-gradient(160deg, #B4EAB6 0%, #A9E6A9 40%, #D6EFC9 72%, #F9D6E1 100%);
  --veil-a: rgba(172, 231, 173, .92);
  --veil-b: rgba(172, 231, 173, .55);
  --surface-2: #7ED47F;
  --blob-a: #FFC3D7;
  --blob-b: #8FD6F5;
  --blob-c: #5FC46B;
  --ink: #0F3A2A;
  --btn-bg: #0F3A2A;
  --btn-shade: #061F15;
  --chip-bg: rgba(15, 58, 42, .14);
  --chip-fg: #0F3A2A;
  --step: rgba(15, 58, 42, .28);
  --step-on: #0F3A2A;
  --ring-a: rgba(15, 58, 42, .45);
  --ring-b: rgba(15, 58, 42, .28);
  --vignette: rgba(15, 58, 42, .42);
  --mk-1: #EE5F93;
  --mk-2: #2F8FD6;
  --mk-3: #2F8B4E;
  --grade: linear-gradient(160deg, rgba(120, 190, 250, .7) 0%, rgba(255, 255, 255, 0) 45%, rgba(255, 140, 190, .8) 100%);
  --tint: linear-gradient(160deg, #8FD6F5 0%, #FFC3D7 100%);
  --light: radial-gradient(circle at 78% 20%, rgba(255, 245, 200, .65), rgba(255, 245, 200, 0) 36%), radial-gradient(circle at 20% 75%, rgba(255, 160, 205, .45), rgba(255, 160, 205, 0) 42%);
  --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 12 C30 3 52 18 82 10 S132 3 162 12 S190 15 197 8' fill='none' stroke='%23EE5F93' stroke-width='6' stroke-linecap='round'/%3E%3C/svg%3E");
}

/* Eco half of the home poster */
.half[data-theme="eco"] {
  --h-font: var(--font-eco);
  --h-display: var(--font-eco);
  --h-ink: #14304C;
  --h-hand: #0D3F6E; /* deep ocean blue: ≥ 4.5:1 on every pastel and blob behind it */
  --h-bg: linear-gradient(165deg, #FFD9E3 0%, #F6C6DA 28%, #C6E6FA 62%, #B4EBC2 100%);
  --surface-grad: var(--h-bg);
  --h-btn-bg: #14304C;
  --h-btn-fg: #FFFFFF;
  --h-btn-shade: #08182A;
  --h-ring: #14304C;
  --surface-2: #F9BCD0;
  --blob-a: #8FD6F5;
  --blob-b: #9FE2A2;
  --blob-c: #FFAFC9;
  --tape: rgba(143, 214, 245, .86);
  --grade: linear-gradient(165deg, rgba(255, 140, 185, .8) 0%, rgba(255, 255, 255, 0) 42%, rgba(70, 160, 110, .7) 100%);
  --tint: linear-gradient(160deg, #FF9EC2 0%, #8FD6F5 55%, #7ED47F 100%);
  --light: radial-gradient(circle at 25% 20%, rgba(255, 170, 205, .7), rgba(255, 170, 205, 0) 40%), radial-gradient(circle at 78% 82%, rgba(140, 215, 255, .5), rgba(140, 215, 255, 0) 40%);
  --tint-alpha: .55;
}
/* the canopy photo has a grey sky: multiply a sky-blue → rose gradient down into it so it reads as daylight */
.half[data-theme="eco"] .shape .tint { opacity: .55; background: linear-gradient(to bottom, #4FA3E3 0%, #8FD6F5 42%, #FFB3C9 78%, #FFD9E3 100%); }
.half[data-theme="eco"] .shape .grade { background: linear-gradient(to bottom, rgba(80, 160, 230, .9) 0%, rgba(255, 255, 255, 0) 55%, rgba(60, 170, 110, .7) 100%); }