/* Loggia design system: theme.css (palette, roles, themes and every token).
   Generated by _tools/design-system/generate.mjs from _tools/design-system/maps/loggia.mjs. 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-limewash: #fcfbf8;
  --color-linen: #f7f5f0;
  --color-oat: #efebe3;
  --color-plaster: #e3ded4;
  --color-travertine: #c9c1b3;
  --color-paper-white: #ffffff;
  --color-night-plaster: #2c2b28;
  --color-charcoal: #1c1b18;
  --color-espresso: #2a2723;
  --color-umber: #433e36;
  --color-walnut: #5e574c;
  --color-driftwood: #8a7f6d;
  --color-taupe: #a89c88;
  --color-olive-grove: #5b6142;
  --color-deep-olive: #434831;
  --color-sand-dune: #dccdb4;
  --color-sage-mist: #e3e4d6;
  --color-brick: #b22921;
  --color-error-ink: #7a2e1c;
  --color-error-wash: #f3e3dc;
}

/* 2. Colour roles: Original */
:root {
  --role-ink: var(--color-charcoal);
  --role-page: var(--color-limewash);
  --role-surface: var(--color-linen);
  --role-accent: var(--color-olive-grove);
  --role-accent-deep: var(--color-deep-olive);
  --role-line: var(--color-plaster);
  --role-on-photo: var(--color-limewash);
  --role-overlay: var(--color-charcoal);
  --role-ink-muted: var(--color-walnut);
  --role-ink-subtle: var(--color-driftwood);
  --role-surface-2: var(--color-oat);
  --role-raised: var(--color-paper-white);
  --role-line-strong: var(--color-travertine);
  --role-highlight: var(--color-sand-dune);
  --role-accent-soft: var(--color-sage-mist);
  --role-on-photo-muted: var(--color-oat);
}

/* 3. Themes: each sets every role. Photo overlay stays dark in every theme. */
[data-theme="original"] {
  --role-ink: var(--color-charcoal);
  --role-page: var(--color-limewash);
  --role-surface: var(--color-linen);
  --role-accent: var(--color-olive-grove);
  --role-accent-deep: var(--color-deep-olive);
  --role-line: var(--color-plaster);
  --role-on-photo: var(--color-limewash);
  --role-overlay: var(--color-charcoal);
  --role-ink-muted: var(--color-walnut);
  --role-ink-subtle: var(--color-driftwood);
  --role-surface-2: var(--color-oat);
  --role-raised: var(--color-paper-white);
  --role-line-strong: var(--color-travertine);
  --role-highlight: var(--color-sand-dune);
  --role-accent-soft: var(--color-sage-mist);
  --role-on-photo-muted: var(--color-oat);
}
[data-theme="morning-viewing"] {
  color-scheme: light;
  --role-ink: #2a1f1b;
  --role-page: #fbf4ef;
  --role-surface: #f4e7de;
  --role-accent: #9e4f35;
  --role-accent-deep: #7c3c27;
  --role-line: #ead6c9;
  --role-on-photo: #fff8f3;
  --role-overlay: #24170f;
  --role-ink-muted: #6a4f45;
  --role-ink-subtle: #80655a;
  --role-surface-2: #ecdacd;
  --role-raised: #fffcfa;
  --role-line-strong: #d2b5a3;
  --role-highlight: #ecc2a6;
  --role-accent-soft: #f3dccf;
  --role-on-photo-muted: #f3e3d8;
}
[data-theme="coastal-listing"] {
  color-scheme: light;
  --role-ink: #13232c;
  --role-page: #eef3f6;
  --role-surface: #e2eaef;
  --role-accent: #215a70;
  --role-accent-deep: #174352;
  --role-line: #c9d6de;
  --role-on-photo: #f6fafc;
  --role-overlay: #0d1a21;
  --role-ink-muted: #3f5562;
  --role-ink-subtle: #566c78;
  --role-surface-2: #d5e1e8;
  --role-raised: #f9fbfc;
  --role-line-strong: #a2b6c1;
  --role-highlight: #e6d6b8;
  --role-accent-soft: #cfe0e8;
  --role-on-photo-muted: #e0e9ee;
}
[data-theme="stone-courtyard"] {
  color-scheme: light;
  --role-ink: #1d1c19;
  --role-page: #e9e6e0;
  --role-surface: #dfdbd3;
  --role-accent: #5c4a30;
  --role-accent-deep: #433623;
  --role-line: #ccc6bb;
  --role-on-photo: #f5f3ef;
  --role-overlay: #181714;
  --role-ink-muted: #4a4740;
  --role-ink-subtle: #5e5a52;
  --role-surface-2: #d4cfc5;
  --role-raised: #f4f2ee;
  --role-line-strong: #a59d8f;
  --role-highlight: #cdb68f;
  --role-accent-soft: #d9d2c2;
  --role-on-photo-muted: #e3dfd8;
}
[data-theme="evening-showing"] {
  color-scheme: dark;
  --role-ink: #f2ece1;
  --role-page: #1a1e2b;
  --role-surface: #222839;
  --role-accent: #d8b878;
  --role-accent-deep: #e8cd98;
  --role-line: #363d54;
  --role-on-photo: #fbf7ef;
  --role-overlay: #0c0e16;
  --role-ink-muted: #c6c0b4;
  --role-ink-subtle: #a09c9c;
  --role-surface-2: #2a3146;
  --role-raised: #262c3f;
  --role-line-strong: #565d78;
  --role-highlight: #7a5d2a;
  --role-accent-soft: #343b52;
  --role-on-photo-muted: #ebe4d7;
}
[data-theme="inverted"] {
  color-scheme: dark;
  --role-ink: #f4f1ea;
  --role-page: #1c1b18;
  --role-surface: #25241f;
  --role-accent: #b8bd96;
  --role-accent-deep: #cfd3b3;
  --role-line: #3b3934;
  --role-on-photo: #fcfbf8;
  --role-overlay: #121110;
  --role-ink-muted: #c2bbad;
  --role-ink-subtle: #a39b8c;
  --role-surface-2: #2d2b27;
  --role-raised: #2a2824;
  --role-line-strong: #5a564d;
  --role-highlight: #7d6844;
  --role-accent-soft: #3b3e2f;
  --role-on-photo-muted: #efebe3;
}

/* 4. Derived colours: worked out from roles with color-mix, never stored */
:root,
[data-theme] {
  --tone-espresso: color-mix(in srgb, var(--role-ink) 79.3%, var(--role-ink-muted));
  --tone-umber: color-mix(in srgb, var(--role-ink-muted) 58.5%, var(--role-ink));
  --tone-taupe: color-mix(in srgb, var(--role-ink-subtle) 55%, var(--role-line-strong));
  --tone-surface-inverted: color-mix(in srgb, var(--role-page) 7%, var(--role-ink));
  --tone-hairline-on-dark: color-mix(in srgb, var(--role-raised) 16%, transparent);
  --tone-hairline-on-light: color-mix(in srgb, var(--role-ink) 12%, transparent);
  --tone-hairline-faint: color-mix(in srgb, var(--role-overlay) 6%, transparent);
  --tone-scrim-30: color-mix(in srgb, var(--role-overlay) 30%, transparent);
  --tone-scrim-42: color-mix(in srgb, var(--role-overlay) 42%, transparent);
  --tone-scrim-45: color-mix(in srgb, var(--role-overlay) 45%, transparent);
  --tone-scrim-92: color-mix(in srgb, var(--role-overlay) 92%, transparent);
  --tone-photo-glass: color-mix(in srgb, var(--role-on-photo) 78%, transparent);
  --tone-photo-glass-strong: color-mix(in srgb, var(--role-on-photo) 96%, transparent);
  --tone-photo-rim: color-mix(in srgb, var(--color-paper-white) 60%, transparent);
  --tone-photo-rim-strong: color-mix(in srgb, var(--color-paper-white) 90.2%, transparent);
  --tone-wash-70: color-mix(in srgb, var(--role-page) 70.2%, transparent);
  --tone-wash-0: color-mix(in srgb, var(--role-page) 0%, transparent);
  --tone-shadow-18: color-mix(in srgb, var(--role-overlay) 18%, transparent);
  --tone-badge-rule: color-mix(in srgb, var(--role-ink) 14.5%, var(--role-raised));
}

/* 5. Fonts */
:root {
  --font-heading: "Instrument Serif", sans-serif;
  --font-body: Geist, sans-serif;
  --font-label: "Geist Mono", 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. */
:root {
  --scale-headings: 1;
  --scale-body: 1;
  --scale-labels: 1;
  --size-display: 6.5rem;
  --size-h1: 4.5rem;
  --size-h2: 3.5rem;
  --size-h3: 1.625rem;
  --size-h4: 1.375rem;
  --size-h5: 1.125rem;
  --size-h6: 1rem;
  --size-number: 2.5rem;
  --size-body-large: 1.125rem;
  --size-body-medium: 1rem;
  --size-body-small: .875rem;
  --size-body-tiny: .75rem;
  --size-badge: .75rem;
  --size-button: .875rem;
  --size-7: 7px;
  --size-9: 9px;
  --size-11: 11px;
  --size-12: 12px;
  --size-13: 13px;
  --size-14: 14px;
  --size-15: 15px;
  --size-16: 16px;
  --size-17: 17px;
  --size-18: 18px;
  --size-20: 20px;
  --size-22: 22px;
  --size-26: 26px;
  --size-44: 44px;
  --size-52: 52px;
  --size-56: 56px;
  --size-64: 64px;
  --size-72: 72px;
  --size-84: 84px;
  --size-88: 88px;
  --size-96: 96px;
  --size-104: 104px;
  --size-110: 110px;
  --size-168: 168px;
  --size-1-25rem: 1.25rem;
  --size-2-5rem: 2.5rem;
  --size-2-8rem: 2.8rem;
  --size-h1-fluid: clamp(3rem, 5vw, 4.5rem);
  --leading-display: 95%;
  --leading-h1: 100%;
  --leading-h2: 105%;
  --leading-h3: 120%;
  --leading-h4: 125%;
  --leading-h5: 130%;
  --leading-h6: 135%;
  --leading-body: 155%;
  --leading-badge: 130%;
  --leading-095: .95;
  --leading-100: 1;
  --leading-105: 1.05;
  --leading-110: 1.1;
  --leading-120: 1.2;
  --leading-125: 1.25;
  --leading-130: 1.3;
  --leading-135: 1.35;
  --leading-140: 1.4;
  --leading-145: 1.45;
  --leading-150: 1.5;
  --leading-155: 1.55;
  --leading-16px: 16px;
  --leading-number: 1;
  --tracking-tighter: -.04em;
  --tracking-tight: -.02em;
  --tracking-snug-plus: -.015em;
  --tracking-snug: -.01em;
  --tracking-snug-minus: -.005em;
  --tracking-wide: .06em;
  --tracking-wider: .08em;
  --tracking-widest: .1em;
  --tracking-tight-px: -.52px;
  --tracking-tight-px-2: -.18px;
  --tracking-wide-px: .6px;
  --tracking-display: var(--tracking-snug);
  --tracking-h1: var(--tracking-snug);
  --tracking-h2: var(--tracking-snug-minus);
  --tracking-h3: var(--tracking-tight);
  --tracking-h4: var(--tracking-snug-plus);
  --tracking-h5: var(--tracking-snug);
  --tracking-h6: 0;
  --tracking-number: var(--tracking-snug);
  --tracking-body-large: 0;
  --tracking-body-medium: 0;
  --tracking-body-small: 0;
  --tracking-body-tiny: 0;
  --tracking-badge: var(--tracking-widest);
  --tracking-button: 0;
}
@media screen and (max-width: 991px) {
  :root {
    --size-display: 4.5rem;
    --size-h1: 3.5rem;
    --size-h2: 2.75rem;
    --size-h3: 1.5rem;
    --size-number: 2.25rem;
    --section-padding-large: 96px;
    --section-padding-medium: 84px;
    --section-padding-small: 44px;
  }
}
@media screen and (max-width: 767px) {
  :root {
    --size-display: 3.5rem;
    --size-h1: 2.875rem;
    --size-h2: 2.25rem;
    --size-h3: 1.375rem;
    --size-h4: 1.25rem;
    --size-h5: 1.0625rem;
    --size-number: 2rem;
    --size-body-large: 1.0625rem;
    --section-padding-large: 80px;
    --section-padding-medium: 72px;
    --section-padding-small: 40px;
  }
}
@media screen and (max-width: 479px) {
  :root {
    --size-display: 3.25rem;
    --size-h1: 2.625rem;
    --size-h2: 2.125rem;
    --size-h3: 1.375rem;
    --size-h4: 1.25rem;
    --size-h5: 1.0625rem;
    --size-number: 2rem;
    --size-body-large: 1.0625rem;
    --section-padding-large: 72px;
    --section-padding-medium: 72px;
    --section-padding-small: 40px;
  }
}

/* 7. Spacing: 4px base. Values off the 4px grid keep their own token. */
:root {
  --container-width: 1380px;
  --section-spacing: 1;
  --section-padding-large: 112px;
  --section-padding-medium: 96px;
  --section-padding-small: 48px;
  --spacing-2: 2px;
  --spacing-3: 3px;
  --spacing-4: 4px;
  --spacing-5: 5px;
  --spacing-6: 6px;
  --spacing-7: 7px;
  --spacing-8: 8px;
  --spacing-9: 9px;
  --spacing-10: 10px;
  --spacing-12: 12px;
  --spacing-14: 14px;
  --spacing-16: 16px;
  --spacing-18: 18px;
  --spacing-20: 20px;
  --spacing-22: 22px;
  --spacing-24: 24px;
  --spacing-27: 27px;
  --spacing-28: 28px;
  --spacing-32: 32px;
  --spacing-33: 33px;
  --spacing-36: 36px;
  --spacing-39: 39px;
  --spacing-40: 40px;
  --spacing-44: 44px;
  --spacing-48: 48px;
  --spacing-52: 52px;
  --spacing-56: 56px;
  --spacing-60: 60px;
  --spacing-64: 64px;
  --spacing-72: 72px;
  --spacing-78: 78px;
  --spacing-80: 80px;
  --spacing-84: 84px;
  --spacing-88: 88px;
  --spacing-96: 96px;
  --spacing-104: 104px;
  --spacing-110: 110px;
  --spacing-112: 112px;
  --spacing-116: 116px;
  --spacing-120: 120px;
  --spacing-140: 140px;
  --spacing-160: 160px;
  --spacing-200: 200px;
  --spacing-240: 240px;
  --spacing-320: 320px;
  --spacing-360: 360px;
  --spacing-0-375rem: .375rem;
  --spacing-0-5rem: .5rem;
  --spacing-0-5625rem: .5625rem;
  --spacing-0-6rem: .6rem;
  --spacing-0-75rem: .75rem;
  --spacing-1rem: 1rem;
  --spacing-1-25rem: 1.25rem;
  --spacing-1-5rem: 1.5rem;
  --spacing-2rem: 2rem;
}

/* 8. Corners: every corner follows --radius-card in proportion. Pills follow --radius-button. */
:root {
  --radius-card: 24px;
  --radius-button: 999px;
  --radius-pill: var(--radius-button);
  --radius-2: calc(var(--radius-card) * 2 / 24);
  --radius-3: calc(var(--radius-card) * 3 / 24);
  --radius-4: calc(var(--radius-card) * 4 / 24);
  --radius-5: calc(var(--radius-card) * 5 / 24);
  --radius-8: calc(var(--radius-card) * 8 / 24);
  --radius-10: calc(var(--radius-card) * 10 / 24);
  --radius-11: calc(var(--radius-card) * 11 / 24);
  --radius-12: calc(var(--radius-card) * 12 / 24);
  --radius-14: calc(var(--radius-card) * 14 / 24);
  --radius-16: calc(var(--radius-card) * 16 / 24);
  --radius-18: calc(var(--radius-card) * 18 / 24);
  --radius-20: calc(var(--radius-card) * 20 / 24);
  --radius-28: calc(var(--radius-card) * 28 / 24);
}

/* 9. Buttons */
:root,
[data-theme] {
  --button-primary-bg: var(--role-accent);
  --button-primary-text: var(--role-raised);
  --button-primary-border: var(--role-accent);
  --button-primary-bg-hover: var(--role-accent-deep);
  --button-secondary-bg: transparent;
  --button-secondary-text: var(--role-ink);
  --button-secondary-border: var(--role-ink);
  --button-secondary-bg-hover: var(--role-ink);
  --button-secondary-text-hover: var(--role-page);
  --button-light-bg: var(--role-raised);
  --button-light-text: var(--role-ink);
  --button-light-border: var(--role-line);
  --button-light-bg-hover: var(--role-surface);
  --button-light-border-hover: var(--role-line-strong);
}

/* 10. Shadows and focus */
:root,
[data-theme] {
  --shadow-dropdown: 0 24px 48px -32px var(--tone-shadow-18);
  --shadow-menu: 0 24px 60px -24px #1f24203d;
  --shadow-card: 0 18px 40px #141e142e;
  --shadow-focus: 0 0 0 1px var(--role-accent);
  --shadow-focus-soft: 0 0 3px 1px var(--role-accent);
  --shadow-selected: inset 0 0 0 .5px var(--role-ink);
  --shadow-badge: 0 2px 0 0 var(--role-page), 0 -2px 0 0 var(--tone-badge-rule);
  --focus-ring: var(--role-accent);
  --focus-ring-button: var(--role-accent-deep);
}

/* 11. Motion */
:root {
  --motion-fast: .2s;
  --motion-quick: .25s;
  --motion-base: .3s;
  --motion-slow: .6s;
  --ease-loggia: cubic-bezier(.22, 1, .36, 1);
  --ease-card-zoom: 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 */