/* Dwellis design system: theme.css (palette, roles, themes and every token).
   Generated by _tools/design-system/generate.mjs from _tools/design-system/maps/dwellis.mjs (with dwellis.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-oat-cream: #fdf6ee;
  --color-biscuit: #f7f0e8;
  --color-parchment: #f0e6dc;
  --color-linen-line: #f2e6d9;
  --color-wheat: #eddcca;
  --color-toffee-sand: #e8d2bb;
  --color-caramel: #ddbe9c;
  --color-paper-white: #ffffff;
  --color-onyx: #000000;
  --color-cocoa: #3e2407;
  --color-dark-cocoa: #2a1805;
  --color-error-ink: #3b0b0b;
  --color-error-wash: #f8e4e4;
  --color-warning-wash: #fcf8d8;
  --color-warning-ink: #5e5515;
}

/* 2. Colour roles: Original */
:root {
  --role-ink: var(--color-onyx);
  --role-page: var(--color-oat-cream);
  --role-surface: var(--color-biscuit);
  --role-accent: var(--color-cocoa);
  --role-accent-deep: var(--color-dark-cocoa);
  --role-line: var(--color-linen-line);
  --role-on-photo: var(--color-oat-cream);
  --role-overlay: var(--color-onyx);
  --role-surface-2: var(--color-parchment);
  --role-raised: var(--color-paper-white);
  --role-line-strong: var(--color-wheat);
  --role-track: var(--color-toffee-sand);
  --role-focus-line: var(--color-caramel);
}

/* 3. Themes: each sets every role. Photo overlay stays dark in every theme. */
[data-theme="original"] {
  --role-ink: var(--color-onyx);
  --role-page: var(--color-oat-cream);
  --role-surface: var(--color-biscuit);
  --role-accent: var(--color-cocoa);
  --role-accent-deep: var(--color-dark-cocoa);
  --role-line: var(--color-linen-line);
  --role-on-photo: var(--color-oat-cream);
  --role-overlay: var(--color-onyx);
  --role-surface-2: var(--color-parchment);
  --role-raised: var(--color-paper-white);
  --role-line-strong: var(--color-wheat);
  --role-track: var(--color-toffee-sand);
  --role-focus-line: var(--color-caramel);
}
[data-theme="show-flat"] {
  color-scheme: light;
  --role-ink: #111418;
  --role-page: #f3f4f5;
  --role-surface: #eaecee;
  --role-accent: #24384d;
  --role-accent-deep: #172636;
  --role-line: #dde1e5;
  --role-on-photo: #fcfdfe;
  --role-overlay: #000000;
  --role-surface-2: #e9ecef;
  --role-raised: #ffffff;
  --role-line-strong: #cfd5db;
  --role-track: #c5ccd3;
  --role-focus-line: #9aa6b2;
}
[data-theme="garden-courtyard"] {
  color-scheme: light;
  --role-ink: #0c110a;
  --role-page: #f2f4ee;
  --role-surface: #e9ede3;
  --role-accent: #3c5a2f;
  --role-accent-deep: #2a4120;
  --role-line: #dde3d4;
  --role-on-photo: #ffffff;
  --role-overlay: #000000;
  --role-surface-2: #e6ebdf;
  --role-raised: #fbfcf9;
  --role-line-strong: #cfd7c3;
  --role-track: #c2ccb3;
  --role-focus-line: #9aaa86;
}
[data-theme="sunset-terrace"] {
  color-scheme: light;
  --role-ink: #1d0f0a;
  --role-page: #fbf1ec;
  --role-surface: #f5e6de;
  --role-accent: #8a3a1e;
  --role-accent-deep: #6b2a13;
  --role-line: #f0ddd2;
  --role-on-photo: #fffaf7;
  --role-overlay: #000000;
  --role-surface-2: #f4e5dd;
  --role-raised: #fffaf7;
  --role-line-strong: #e7cbbb;
  --role-track: #dfbba6;
  --role-focus-line: #cf9a7e;
}
[data-theme="night-viewing"] {
  color-scheme: dark;
  --role-ink: #f6ede2;
  --role-page: #17130f;
  --role-surface: #211b16;
  --role-accent: #e3b98a;
  --role-accent-deep: #f0cfa8;
  --role-line: #3a3027;
  --role-on-photo: #fdf6ee;
  --role-overlay: #000000;
  --role-surface-2: #2b231c;
  --role-raised: #2a221b;
  --role-line-strong: #4a3d31;
  --role-track: #5a4a3b;
  --role-focus-line: #8a7158;
}
[data-theme="inverted"] {
  color-scheme: dark;
  --role-ink: #fdf6ee;
  --role-page: #0d0d0d;
  --role-surface: #171615;
  --role-accent: #f0e6dc;
  --role-accent-deep: #ffffff;
  --role-line: #2e2b27;
  --role-on-photo: #fdf6ee;
  --role-overlay: #000000;
  --role-surface-2: #22201d;
  --role-raised: #1c1b19;
  --role-line-strong: #3a3631;
  --role-track: #4a453e;
  --role-focus-line: #7a6a58;
}

/* 4. Derived colours: worked out from roles with color-mix, never stored */
:root,
[data-theme] {
  --tone-ink-91-6-raised: color-mix(in srgb, var(--role-ink) 91.6%, var(--role-raised));
  --tone-raised-95-ink: color-mix(in srgb, var(--role-raised) 95%, var(--role-ink));
  --tone-raised-16: color-mix(in srgb, var(--role-raised) 16%, transparent);
  --tone-raised-98-ink: color-mix(in srgb, var(--role-raised) 98%, var(--role-ink));
  --tone-paper-white-98-overlay: color-mix(in srgb, var(--color-paper-white) 98%, var(--role-overlay));
  --tone-raised-60-ink: color-mix(in srgb, var(--role-raised) 60%, var(--role-ink));
  --tone-raised-86-5-ink: color-mix(in srgb, var(--role-raised) 86.5%, var(--role-ink));
  --tone-paper-white-20: color-mix(in srgb, var(--color-paper-white) 20%, transparent);
  --tone-overlay-50-196: color-mix(in srgb, var(--role-overlay) 50.196%, transparent);
  --tone-ink-10-196: color-mix(in srgb, var(--role-ink) 10.196%, transparent);
  --tone-overlay-10-196: color-mix(in srgb, var(--role-overlay) 10.196%, transparent);
  --tone-ink-86-1-raised: color-mix(in srgb, var(--role-ink) 86.1%, var(--role-raised));
  --tone-ink-40: color-mix(in srgb, var(--role-ink) 40%, transparent);
  --tone-overlay-40: color-mix(in srgb, var(--role-overlay) 40%, transparent);
  --tone-raised-80-ink: color-mix(in srgb, var(--role-raised) 80%, var(--role-ink));
  --tone-ink-86-5-raised: color-mix(in srgb, var(--role-ink) 86.5%, var(--role-raised));
  --tone-ink-60: color-mix(in srgb, var(--role-ink) 60%, transparent);
  --tone-overlay-60: color-mix(in srgb, var(--role-overlay) 60%, transparent);
  --tone-ink-80-raised: color-mix(in srgb, var(--role-ink) 80%, var(--role-raised));
  --tone-raised-78-3-ink: color-mix(in srgb, var(--role-raised) 78.3%, var(--role-ink));
  --tone-raised-97-ink: color-mix(in srgb, var(--role-raised) 97%, var(--role-ink));
  --tone-ink-5-098: color-mix(in srgb, var(--role-ink) 5.098%, transparent);
  --tone-overlay-20: color-mix(in srgb, var(--role-overlay) 20%, transparent);
  --tone-raised-88-5-ink: color-mix(in srgb, var(--role-raised) 88.5%, var(--role-ink));
  --tone-raised-93-2-ink: color-mix(in srgb, var(--role-raised) 93.2%, var(--role-ink));
  --tone-raised-95-1-ink: color-mix(in srgb, var(--role-raised) 95.1%, var(--role-ink));
  --tone-ink-86-5-raised-40: color-mix(in srgb, color-mix(in srgb, var(--role-ink) 86.5%, var(--role-raised)) 40%, transparent);
  --tone-raised-40: color-mix(in srgb, var(--role-raised) 40%, transparent);
  --tone-ink-90: color-mix(in srgb, var(--role-ink) 90%, transparent);
  --tone-overlay-3-137: color-mix(in srgb, var(--role-overlay) 3.137%, transparent);
  --tone-overlay-25-098: color-mix(in srgb, var(--role-overlay) 25.098%, transparent);
  --tone-focus-line-51-track: color-mix(in srgb, var(--role-focus-line) 51%, var(--role-track));
  --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_box,
.home1_hero_overlay,
.section_post_header,
.post_header_overlay,
.section_properties1_header,
.properties1_headerr_overlay,
.property_content,
.home1_cta_overlay,
.home1_cta_box,
.home2_hero_box,
.home3_metrics_highlight,
.contact1_hero_info,
.contact1_hero_card,
.contact3_hero_wrapper,
.highlight_marquee,
.highlight_marquee-copy,
.about_team_info,
.blog_featured-content,
.home2_banner_author,
.home1_reviews_name,
.home2_type_card,
.home1_metrics_card {
  --role-page: var(--role-on-photo);
  --button-primary-text: var(--role-page-outer);
  --button-light-text: var(--role-page);
  --button-light-border: var(--role-page);
  --button-light-bg-hover: var(--role-page);
}
:root,
[data-theme] {
  --role-page-outer: var(--role-page);
}
.home1_hero_box :is(input, select, textarea),
.home1_hero_overlay :is(input, select, textarea),
.section_post_header :is(input, select, textarea),
.post_header_overlay :is(input, select, textarea),
.section_properties1_header :is(input, select, textarea),
.properties1_headerr_overlay :is(input, select, textarea),
.property_content :is(input, select, textarea),
.home1_cta_overlay :is(input, select, textarea),
.home1_cta_box :is(input, select, textarea),
.home2_hero_box :is(input, select, textarea),
.home3_metrics_highlight :is(input, select, textarea),
.contact1_hero_info :is(input, select, textarea),
.contact1_hero_card :is(input, select, textarea),
.contact3_hero_wrapper :is(input, select, textarea),
.highlight_marquee :is(input, select, textarea),
.highlight_marquee-copy :is(input, select, textarea),
.about_team_info :is(input, select, textarea),
.blog_featured-content :is(input, select, textarea),
.home2_banner_author :is(input, select, textarea),
.home1_reviews_name :is(input, select, textarea),
.home2_type_card :is(input, select, textarea),
.home1_metrics_card :is(input, select, textarea) {
  --role-page: var(--role-page-outer);
}

/* 5. Fonts */
:root {
  --font-heading: "Funnel Sans", sans-serif;
  --font-body: "Funnel Sans", sans-serif;
  --font-label: "Geist Mono", monospace;
}

/* 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.25rem;
  --size-h6: 1.125rem;
  --size-body-medium: 1rem;
  --size-body-tiny: .755rem;
  --size-body-small: .95rem;
  --size-body-large: 1.125rem;
  --size-body-regular: 1rem;
  --size-button: .875rem;
  --size-badge: .875rem;
  --size-0-875rem: .875rem;
  --size-1-25rem: 1.25rem;
  --size-1rem: 1rem;
  --size-2-5rem: 2.5rem;
  --size-0-75rem: .75rem;
  --size-3-5rem: 3.5rem;
  --size-1-125rem: 1.125rem;
  --size-16: 16px;
  --size-2rem: 2rem;
  --size-1-75rem: 1.75rem;
  --size-11: 11px;
  --size-0-755rem: .755rem;
  --size-0-95rem: .95rem;
  --size-5rem: 5rem;
  --size-8-75rem: 8.75rem;
  --size-0-9rem: .9rem;
  --size-0-85rem: .85rem;
  --size-4-375rem: 4.375rem;
  --leading-20: 20px;
  --leading-140: 1.4;
  --leading-110: 1.1;
  --leading-130: 1.3;
  --leading-120: 1.2;
  --leading-150: 1.5;
  --leading-115: 1.15;
  --leading-18: 18px;
  --leading-0-85rem: .85rem;
  --leading-100: 1;
  --tracking-0-6: .6px;
}

/* 7. Spacing: 4px base. Values off the 4px grid keep their own token; rem values keep rem. */
:root {
  --container-width: 1428px;
  --section-spacing: 1;
  --section-padding-small: 48px;
  --section-padding-large: 144px;
  --section-padding-medium: 96px;
  --spacing-4: 4px;
  --spacing-5: 5px;
  --spacing-6: 6px;
  --spacing-8: 8px;
  --spacing-9: 9px;
  --spacing-10: 10px;
  --spacing-12: 12px;
  --spacing-15: 15px;
  --spacing-16: 16px;
  --spacing-20: 20px;
  --spacing-24: 24px;
  --spacing-64: 64px;
  --spacing-100: 100px;
  --spacing-1rem: 1rem;
  --spacing-1-5rem: 1.5rem;
  --spacing-0-375rem: .375rem;
  --spacing-2rem: 2rem;
  --spacing-0-75rem: .75rem;
  --spacing-0-5rem: .5rem;
  --spacing-3rem: 3rem;
  --spacing-2-5rem: 2.5rem;
  --spacing-0-25rem: .25rem;
  --spacing-1-25rem: 1.25rem;
  --spacing-4rem: 4rem;
  --spacing-6rem: 6rem;
  --spacing-0-125rem: .125rem;
  --spacing-5rem: 5rem;
  --spacing-1-125rem: 1.125rem;
  --spacing-8rem: 8rem;
  --spacing-3-5rem: 3.5rem;
  --spacing-0-5625rem: .5625rem;
  --spacing-0-875rem: .875rem;
  --spacing-3-75rem: 3.75rem;
  --spacing-12rem: 12rem;
  --spacing-0-0625rem: .0625rem;
  --spacing-1-75rem: 1.75rem;
  --spacing-4-5rem: 4.5rem;
  --spacing-0-33em: .33em;
  --spacing-0-3rem: .3rem;
  --spacing-4-75rem: 4.75rem;
  --spacing-10rem: 10rem;
  --spacing-28-75rem: 28.75rem;
  --spacing-20rem: 20rem;
  --spacing-17-5rem: 17.5rem;
}

/* 7b. Breakpoint values for the role sizes, section paddings and other responsive tokens */
@media screen and (max-width: 767px) {
  :root {
    --size-h1: 2.5rem;
    --size-body-large: 1.25rem;
  }
}
@media screen and (max-width: 479px) {
  :root {
    --section-padding-medium: 72px;
  }
}

/* 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: 24px;
  --radius-button: 12px;
  --radius-pill: var(--radius-button);
  --radius-2: calc(var(--radius-card) * 2 / 24);
  --radius-3: calc(var(--radius-card) * 3 / 24);
  --radius-8: calc(var(--radius-card) * 8 / 24);
  --radius-9: calc(var(--radius-card) * 9 / 24);
  --radius-0-75rem: calc(var(--radius-card) * 12 / 24);
  --radius-0-375rem: calc(var(--radius-card) * 6 / 24);
  --radius-0-125rem: calc(var(--radius-card) * 2 / 24);
  --radius-0-25rem: calc(var(--radius-card) * 4 / 24);
  --radius-0-875rem: calc(var(--radius-card) * 14 / 24);
}

/* 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-page);
  --button-secondary-bg: var(--role-surface-2);
  --button-secondary-text: var(--role-ink);
  --button-secondary-border: var(--role-surface-2);
  --button-light-bg: transparent;
  --button-light-text: var(--role-page);
  --button-light-border: var(--role-page);
  --button-light-bg-hover: var(--role-page);
  --button-light-text-hover: var(--role-ink);
}

/* 10. Shadows and focus */
:root,
[data-theme] {
  --shadow-cart: 0 5px 25px var(--tone-overlay-25-098);
  --shadow-focus-soft: 0 0 3px 1px var(--role-accent);
  --shadow-focus-field: 0 0 .25rem 0 var(--role-accent);
  --shadow-dropdown: 0 6px 1.25rem var(--tone-overlay-3-137);
  --focus-ring: var(--role-accent);
}

/* 11. Motion */
:root {
  --motion-fast: .2s;
  --motion-slow: .6s;
  --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 */