/* TripMind design system: theme.css (palette, roles, themes and every token).
   Generated by _tools/design-system/generate.mjs from _tools/design-system/maps/tripmind.mjs (with tripmind.auto.json). Edit the source, then run it again. */
/* How it works
   - The palette is locked. Sections never read it directly, they read roles (--role-*).
   - Roles are set for the Original theme on :root. A theme is <html data-theme="<id>">.
   - Style panel changes go on :root after this file (inline style on <html> or a later <style>).
   - Derived colours, buttons and aliases are declared on ":root, [data-theme]" so they follow the roles. */

/* 1. Named palette (locked) */
:root {
  --color-sand-dune: #f7f1eb;
  --color-shell-white: #fdfcfb;
  --color-linen: #f7f4f0;
  --color-oat: #f2e9e1;
  --color-sage-mist: #e7e6dd;
  --color-driftwood: #ede2d8;
  --color-cedar: #47382a;
  --color-taupe: #a69483;
  --color-black: #000000;
  --color-soft-olive: #8d9970;
  --color-olive-grove: #6c784d;
  --color-white: #ffffff;
  --color-tone-black: #151515;
  --color-tone-grey: #232323;
  --color-tone-white: #f2f2f2;
  --color-error-ink: #3b0b0b;
  --color-error-wash: #f8e4e4;
}

/* 2. Colour roles: Original */
:root {
  --role-ink: var(--color-cedar);
  --role-page: var(--color-sand-dune);
  --role-surface: var(--color-shell-white);
  --role-accent: var(--color-olive-grove);
  --role-accent-deep: var(--color-cedar);
  --role-line: var(--color-driftwood);
  --role-on-photo: var(--color-shell-white);
  --role-overlay: var(--color-black);
  --role-surface-2: var(--color-oat);
  --role-surface-3: var(--color-linen);
  --role-sage: var(--color-sage-mist);
  --role-ink-soft: var(--color-taupe);
  --role-ink-2: var(--color-black);
  --role-accent-soft: var(--color-soft-olive);
}

/* 3. Themes: each sets every role. Photo overlay stays dark in every theme. */
[data-theme="original"] {
  --role-ink: var(--color-cedar);
  --role-page: var(--color-sand-dune);
  --role-surface: var(--color-shell-white);
  --role-accent: var(--color-olive-grove);
  --role-accent-deep: var(--color-cedar);
  --role-line: var(--color-driftwood);
  --role-on-photo: var(--color-shell-white);
  --role-overlay: var(--color-black);
  --role-surface-2: var(--color-oat);
  --role-surface-3: var(--color-linen);
  --role-sage: var(--color-sage-mist);
  --role-ink-soft: var(--color-taupe);
  --role-ink-2: var(--color-black);
  --role-accent-soft: var(--color-soft-olive);
}
[data-theme="santorini"] {
  color-scheme: light;
  --role-ink: #13294b;
  --role-page: #f6f8fb;
  --role-surface: #ffffff;
  --role-accent: #1d5fa8;
  --role-accent-deep: #13294b;
  --role-line: #e1e8f1;
  --role-on-photo: #ffffff;
  --role-overlay: #000000;
  --role-surface-2: #edf2f8;
  --role-surface-3: #f9fbfd;
  --role-sage: #e3ecf4;
  --role-ink-soft: #6f8099;
  --role-ink-2: #0b1b33;
  --role-accent-soft: #7fa3cf;
}
[data-theme="sahara-dusk"] {
  color-scheme: light;
  --role-ink: #3a2216;
  --role-page: #fbf1e6;
  --role-surface: #fffaf4;
  --role-accent: #b0532c;
  --role-accent-deep: #3a2216;
  --role-line: #f0dcc8;
  --role-on-photo: #fffaf4;
  --role-overlay: #000000;
  --role-surface-2: #f6e6d4;
  --role-surface-3: #fcf5ec;
  --role-sage: #f1e3cf;
  --role-ink-soft: #977a62;
  --role-ink-2: #24150d;
  --role-accent-soft: #cf9475;
}
[data-theme="kyoto-moss"] {
  color-scheme: light;
  --role-ink: #2a2d2b;
  --role-page: #f1f3ef;
  --role-surface: #fbfcfa;
  --role-accent: #4f6b3a;
  --role-accent-deep: #2a2d2b;
  --role-line: #dfe4dc;
  --role-on-photo: #fbfcfa;
  --role-overlay: #000000;
  --role-surface-2: #e8ece5;
  --role-surface-3: #f5f7f3;
  --role-sage: #e4e9df;
  --role-ink-soft: #788278;
  --role-ink-2: #161816;
  --role-accent-soft: #8fa37d;
}
[data-theme="fjord-night"] {
  color-scheme: dark;
  --role-ink: #e8eef3;
  --role-page: #121b24;
  --role-surface: #18232e;
  --role-accent: #7fc8c9;
  --role-accent-deep: #e8eef3;
  --role-line: #24313d;
  --role-on-photo: #fdfcfb;
  --role-overlay: #000000;
  --role-surface-2: #1c2834;
  --role-surface-3: #15202a;
  --role-sage: #1e2a35;
  --role-ink-soft: #8d9cab;
  --role-ink-2: #ffffff;
  --role-accent-soft: #5aa5a6;
}
[data-theme="inverted"] {
  color-scheme: dark;
  --role-ink: #f7f1eb;
  --role-page: #1d1610;
  --role-surface: #261d15;
  --role-accent: #a7b47f;
  --role-accent-deep: #f7f1eb;
  --role-line: #3a2e23;
  --role-on-photo: #fdfcfb;
  --role-overlay: #000000;
  --role-surface-2: #2c2219;
  --role-surface-3: #221a13;
  --role-sage: #2f2a20;
  --role-ink-soft: #a69483;
  --role-ink-2: #ffffff;
  --role-accent-soft: #8d9970;
}

/* 4. Derived colours: worked out from roles with color-mix, never stored */
:root,
[data-theme] {
  --tone-white-16: rgb(from var(--color-white) r g b / 16%);
  --tone-overlay-a38: rgb(from var(--role-overlay) r g b / calc(38 / 255));
  --tone-white-20: rgb(from var(--color-white) r g b / 20%);
  --tone-tone-white-90-3-tone-black: color-mix(in srgb, var(--color-tone-white) 90.3%, var(--color-tone-black));
  --tone-ink-2-a26: rgb(from var(--role-ink-2) r g b / calc(26 / 255));
  --tone-overlay-a26: rgb(from var(--role-overlay) r g b / calc(26 / 255));
  --tone-surface-a26: rgb(from var(--role-surface) r g b / calc(26 / 255));
  --tone-on-photo-a26: rgb(from var(--role-on-photo) r g b / calc(26 / 255));
  --tone-white-78-tone-black: color-mix(in srgb, var(--color-white) 78%, var(--color-tone-black));
  --tone-white-a3: rgb(from var(--color-white) r g b / calc(3 / 255));
  --tone-white-a26: rgb(from var(--color-white) r g b / calc(26 / 255));
  --tone-tone-black-86-2-tone-white: color-mix(in srgb, var(--color-tone-black) 86.2%, var(--color-tone-white));
  --tone-white-58-tone-white: color-mix(in srgb, var(--color-white) 58%, var(--color-tone-white));
  --tone-white-76-3-tone-black: color-mix(in srgb, var(--color-white) 76.3%, var(--color-tone-black));
  --tone-overlay-a77: rgb(from var(--role-overlay) r g b / calc(77 / 255));
  --tone-overlay-20: rgb(from var(--role-overlay) r g b / 20%);
  --tone-white-56-2-tone-black: color-mix(in srgb, var(--color-white) 56.2%, var(--color-tone-black));
  --tone-ink-2-40: rgb(from var(--role-ink-2) r g b / 40%);
  --tone-tone-white-58-white: color-mix(in srgb, var(--color-tone-white) 58%, var(--color-white));
  --tone-tone-white-98-tone-black: color-mix(in srgb, var(--color-tone-white) 98%, var(--color-tone-black));
  --tone-white-82-5-tone-grey: color-mix(in srgb, var(--color-white) 82.5%, var(--color-tone-grey));
  --tone-ink-60: rgb(from var(--role-ink) r g b / 60%);
  --tone-ink-2-a13: rgb(from var(--role-ink-2) r g b / calc(13 / 255));
  --tone-ink-2-60: rgb(from var(--role-ink-2) r g b / 60%);
  --tone-tone-white-68-4-ink-2: color-mix(in srgb, var(--color-tone-white) 68.4%, var(--role-ink-2));
  --tone-white-92-1-tone-black: color-mix(in srgb, var(--color-white) 92.1%, var(--color-tone-black));
  --tone-overlay-a64: rgb(from var(--role-overlay) r g b / calc(64 / 255));
  --tone-white-87-4-tone-black: color-mix(in srgb, var(--color-white) 87.4%, var(--color-tone-black));
  --tone-tone-white-87-surface: color-mix(in srgb, var(--color-tone-white) 87%, var(--role-surface));
  --tone-tone-grey-90-tone-black-40: rgb(from color-mix(in srgb, var(--color-tone-grey) 90%, var(--color-tone-black)) r g b / 40%);
  --tone-white-40: rgb(from var(--color-white) r g b / 40%);
  --tone-ink-2-90: rgb(from var(--role-ink-2) r g b / 90%);
  --tone-overlay-a8: rgb(from var(--role-overlay) r g b / calc(8 / 255));
  --tone-white-0: rgb(from var(--color-white) r g b / 0%);
  --tone-ink-2-222: color-mix(in srgb, var(--role-ink-2) 86.6667%, var(--color-white));
  --tone-overlay-92: color-mix(in srgb, var(--role-overlay) 92%, transparent);
}

/* 4b. Photo areas: text inside that reads the page colour reads Text on photos instead (same colour in Original) */
.home1_hero_shadow,
.home1_hero_right,
.hero_highlights_marquee,
.trip_hero_bg,
.section_faq_hero,
.home3_destinations_bg-overlay,
.trips3_card-content,
.destination_hero_bg,
.about_metrics_left,
.home3_hero_shadow,
.home3_benefits_shadow,
.home1_journey_content,
.blog_card-content,
.section_home1_hero,
.destination_hero_wrap,
.trip_hero_wrap,
.trip_banner,
.home2_hero_left,
.home2_destinations_wrap,
.home3_hero_right {
  --role-page: var(--color-sand-dune);
  --role-surface: var(--role-on-photo);
  --button-primary-text: var(--role-surface-outer);
}
:root,
[data-theme] {
  --role-surface-outer: var(--role-surface);
}
:root,
[data-theme] {
  --role-page-outer: var(--role-page);
}
.home1_hero_shadow :is(input, select, textarea),
.home1_hero_right :is(input, select, textarea),
.hero_highlights_marquee :is(input, select, textarea),
.trip_hero_bg :is(input, select, textarea),
.section_faq_hero :is(input, select, textarea),
.home3_destinations_bg-overlay :is(input, select, textarea),
.trips3_card-content :is(input, select, textarea),
.destination_hero_bg :is(input, select, textarea),
.about_metrics_left :is(input, select, textarea),
.home3_hero_shadow :is(input, select, textarea),
.home3_benefits_shadow :is(input, select, textarea),
.home1_journey_content :is(input, select, textarea),
.blog_card-content :is(input, select, textarea),
.section_home1_hero :is(input, select, textarea),
.destination_hero_wrap :is(input, select, textarea),
.trip_hero_wrap :is(input, select, textarea),
.trip_banner :is(input, select, textarea),
.home2_hero_left :is(input, select, textarea),
.home2_destinations_wrap :is(input, select, textarea),
.home3_hero_right :is(input, select, textarea) {
  --role-page: var(--role-page-outer);
  --role-surface: var(--role-surface-outer);
}

/* 5. Fonts */
:root {
  --font-heading: Librecasloncondensed, Arial, sans-serif;
  --font-body: Geist, sans-serif;
  --font-label: "Anonymous Pro", sans-serif;
}

/* 6. Text sizes: three scales (S 0.9, M 1, L 1.1). Every font size is a size token times its scale.
   Tokens keep the unit of the value they replace: px by number (--size-14), other units in the name (--size-1-25rem). */
:root {
  --scale-headings: 1;
  --scale-body: 1;
  --scale-labels: 1;
  --size-h1: 3.5rem;
  --size-h2: 2.5rem;
  --size-h3: 2rem;
  --size-h4: 1.75rem;
  --size-h5: 1.5rem;
  --size-h6: 1.125rem;
  --size-body-regular: 1rem;
  --size-body-small: 1rem;
  --size-body-large: 1.25rem;
  --size-body-tiny: .85rem;
  --size-body-medium: 1.1rem;
  --size-badge: 14px;
  --size-button-normal: .85rem;
  --size-button-small: .85rem;
  --size-0-875rem: .875rem;
  --size-14: 14px;
  --size-2-5rem: 2.5rem;
  --size-1-25rem: 1.25rem;
  --size-10: 10px;
  --size-1rem: 1rem;
  --size-0-75rem: .75rem;
  --size-33: 33px;
  --size-8-75rem: 8.75rem;
  --size-0-85rem: .85rem;
  --size-7rem: 7rem;
  --size-4rem: 4rem;
  --size-2-8rem: 2.8rem;
  --leading-body-small: 150%;
  --leading-h1: 110%;
  --leading-h2: 115%;
  --leading-h3: 120%;
  --leading-h4: 120%;
  --leading-h5: 130%;
  --leading-h6: 130%;
  --leading-body-large: 150%;
  --leading-body-tiny: 150%;
  --leading-body-medium: 150%;
  --leading-button-normal: 150%;
  --leading-button-small: 150%;
  --leading-badge: 140%;
  --leading-140: 1.4;
  --leading-100: 1;
  --leading-150: 1.5;
  --leading-170: 1.7;
  --leading-110: 1.1;
  --leading-0-85rem: .85rem;
  --tracking-0-6: .6px;
  --tracking-0-02em: .02em;
  --tracking-0-02rem: .02rem;
}

/* 7. Spacing: 4px base. Values off the 4px grid keep their own token; rem values keep rem. */
:root {
  --container-width: 1200px;
  --section-spacing: 1;
  --section-padding-medium: 96px;
  --section-padding-large: 144px;
  --section-padding-small: 48px;
  --spacing-2: 2px;
  --spacing-4: 4px;
  --spacing-5: 5px;
  --spacing-6: 6px;
  --spacing-8: 8px;
  --spacing-10: 10px;
  --spacing-12: 12px;
  --spacing-14: 14px;
  --spacing-16: 16px;
  --spacing-20: 20px;
  --spacing-24: 24px;
  --spacing-32: 32px;
  --spacing-40: 40px;
  --spacing-48: 48px;
  --spacing-55: 55px;
  --spacing-60: 60px;
  --spacing-80: 80px;
  --spacing-100: 100px;
  --spacing-1-5rem: 1.5rem;
  --spacing-1rem: 1rem;
  --spacing-2rem: 2rem;
  --spacing-3rem: 3rem;
  --spacing-0-5rem: .5rem;
  --spacing-0-75rem: .75rem;
  --spacing-2-5rem: 2.5rem;
  --spacing-1-25rem: 1.25rem;
  --spacing-6rem: 6rem;
  --spacing-0-375rem: .375rem;
  --spacing-4rem: 4rem;
  --spacing-0-25rem: .25rem;
  --spacing-5rem: 5rem;
  --spacing-3-5rem: 3.5rem;
  --spacing-0-125rem: .125rem;
  --spacing-8rem: 8rem;
  --spacing-0-875rem: .875rem;
  --spacing-0-5625rem: .5625rem;
  --spacing-4-5rem: 4.5rem;
  --spacing-1-75rem: 1.75rem;
  --spacing-12rem: 12rem;
  --spacing-0-3rem: .3rem;
  --spacing-1-125rem: 1.125rem;
  --spacing-3-75rem: 3.75rem;
  --spacing-0-0625rem: .0625rem;
  --spacing-7rem: 7rem;
  --spacing-10rem: 10rem;
  --spacing-0-6rem: .6rem;
}

/* 7b. Breakpoint values for the role sizes, section paddings and other responsive tokens */
@media screen and (max-width: 991px) {
  :root {
    --section-padding-medium: 84px;
    --section-padding-large: 128px;
    --section-padding-small: 44px;
  }
}
@media screen and (max-width: 767px) {
  :root {
    --size-h1: 2.625rem;
    --size-h2: 1.875rem;
    --size-h3: 1.5rem;
    --size-h4: 1.3125rem;
    --size-h5: 1.125rem;
    --size-h6: 1rem;
    --size-body-large: 1.125rem;
    --section-padding-medium: 72px;
    --section-padding-large: 112px;
    --section-padding-small: 40px;
  }
}
@media screen and (max-width: 479px) {
  :root {
    --size-h1: 2.625rem;
    --size-h2: 1.875rem;
    --size-h3: 1.5rem;
    --size-h4: 1.3125rem;
    --size-h5: 1.125rem;
    --size-body-large: 1.125rem;
    --section-padding-medium: 72px;
    --section-padding-large: 112px;
    --section-padding-small: 40px;
  }
}

/* 8. Corners: every corner follows --radius-card in proportion. Pills follow --radius-button.
   rem corners are worked out in px from --radius-card (corners are not text, so they do not need to follow the browser font size). */
:root {
  --radius-card: 6px;
  --radius-button: 50px;
  --radius-pill: var(--radius-button);
  --radius-2: calc(var(--radius-card) * 2 / 6);
  --radius-3: calc(var(--radius-card) * 3 / 6);
  --radius-4: calc(var(--radius-card) * 4 / 6);
  --radius-8: calc(var(--radius-card) * 8 / 6);
  --radius-12: calc(var(--radius-card) * 12 / 6);
  --radius-50: calc(var(--radius-card) * 50 / 6);
  --radius-60: calc(var(--radius-card) * 60 / 6);
  --radius-0-75rem: calc(var(--radius-card) * 12 / 6);
  --radius-0-125rem: calc(var(--radius-card) * 2 / 6);
  --radius-0-25rem: calc(var(--radius-card) * 4 / 6);
  --radius-0-375rem: calc(var(--radius-card) * 6 / 6);
}

/* 9. Buttons: read-only, they follow the roles and --radius-button */
:root,
[data-theme] {
  --button-primary-bg: var(--role-accent);
  --button-primary-text: var(--role-surface);
}

/* 10. Shadows and focus */
:root,
[data-theme] {
  --shadow-1: 0 0 3px 1px var(--role-accent);
  --shadow-2: 0 6px 1.25rem var(--tone-overlay-a8);
  --shadow-3: 0 0 .25rem 0 var(--role-accent);
  --focus-ring: var(--role-accent);
}

/* 11. Motion */
:root {
  --motion-fast: .2s;
  --motion-base: .3s;
  --motion-slow: .6s;
  --motion-calm: .5s;
  --ease-1: cubic-bezier(.22,.61,.36,1);
}

/* 12. Breakpoints (for reference; media queries cannot read custom properties)
   desktop: min-width 992px
   tablet: max-width 991px
   mobile-landscape: max-width 767px
   mobile: max-width 479px */