/* Meccano 0.12.0. Generated from packages/tokens/src/theme.json by scripts/generate-theme.mjs.
   Do not edit this file directly. Run npm run tokens:generate. */

:root {
  color-scheme: light;
  --soto-color-surface-base: #ECEEDD;
  --soto-color-surface-raised: #FFFFFF;
  --soto-color-surface-sunken: #DEE0CD;
  --soto-color-surface-natural: #E4E5D7;
  --soto-color-text-primary: #34504E;
  --soto-color-text-secondary: rgb(52 80 78 / 0.72);
  --soto-color-text-muted: rgb(52 80 78 / 0.58);
  --soto-color-text-inverse: #F0F0EA;
  --soto-color-link-default: #34504E;
  --soto-color-link-hover: #223B39;
  --soto-color-link-decoration: rgb(52 80 78 / 0.4);
  --soto-color-link-decoration-hover: #223B39;
  --soto-color-link-on-dark: #EDF867;
  --soto-color-link-on-dark-hover: #FFFFFF;
  --soto-color-brand-primary: #34504E;
  --soto-color-brand-primary-hover: #3C5654;
  --soto-color-brand-accent: #DF441B;
  --soto-color-brand-earth: #643C37;
  --soto-color-brand-yellow: #EDF867;
  --soto-color-brand-blue: #3235F3;
  --soto-color-brand-pink: #F0BEC8;
  --soto-color-brand-selection: #EDF867;
  --soto-color-brand-surface-forest-background: #163E39;
  --soto-color-brand-surface-forest-headline: #EDF867;
  --soto-color-brand-surface-forest-foreground: #FFFFFF;
  --soto-color-brand-surface-blue-background: #3235F3;
  --soto-color-brand-surface-blue-headline: #EDF867;
  --soto-color-brand-surface-blue-foreground: #FFFFFF;
  --soto-color-brand-surface-orange-background: #C63812;
  --soto-color-brand-surface-orange-headline: #FFFFFF;
  --soto-color-brand-surface-orange-foreground: #FFFFFF;
  --soto-color-brand-surface-yellow-background: #EDF867;
  --soto-color-brand-surface-yellow-headline: #B52F0B;
  --soto-color-brand-surface-yellow-foreground: #34504E;
  --soto-color-button-primary-face: #34504E;
  --soto-color-button-primary-base: #223B39;
  --soto-color-button-primary-foreground: #FFFFFF;
  --soto-color-button-secondary-face: #E7E6DC;
  --soto-color-button-secondary-base: #CFCDD8;
  --soto-color-button-secondary-foreground: #34504E;
  --soto-color-button-outline-face: #F0F0EA;
  --soto-color-button-outline-base: #D6D5DE;
  --soto-color-button-outline-foreground: #34504E;
  --soto-color-button-outline-border: #D6D5DE;
  --soto-color-button-destructive-face: #EADDD4;
  --soto-color-button-destructive-base: #B85D47;
  --soto-color-button-destructive-foreground: #B03312;
  --soto-color-button-on-dark-face: rgb(0 0 0 / 0.1);
  --soto-color-button-on-dark-base: rgb(0 0 0 / 0.32);
  --soto-color-button-on-dark-foreground: #FFFFFF;
  --soto-color-button-on-dark-border: rgb(255 255 255 / 0.35);
  --soto-color-button-on-dark-hover: rgb(255 255 255 / 0.14);
  --soto-color-button-on-dark-ring: rgb(255 255 255 / 0.55);
  --soto-color-button-on-light-face: rgb(255 255 255 / 0.1);
  --soto-color-button-on-light-base: rgb(255 255 255 / 0.32);
  --soto-color-button-on-light-foreground: #142220;
  --soto-color-button-on-light-border: rgb(0 0 0 / 0.35);
  --soto-color-button-on-light-hover: rgb(0 0 0 / 0.14);
  --soto-color-button-on-light-ring: rgb(0 0 0 / 0.55);
  --soto-color-badge-default-background: #E7E6DC;
  --soto-color-badge-default-foreground: #34504E;
  --soto-color-badge-outline-background: #F1EEE5;
  --soto-color-badge-outline-foreground: #34504E;
  --soto-color-badge-outline-border: rgb(52 80 78 / 0.3);
  --soto-color-badge-success-background: #257A72;
  --soto-color-badge-success-foreground: #FFFFFF;
  --soto-color-badge-warning-background: #7E6B00;
  --soto-color-badge-warning-foreground: #F0F0EA;
  --soto-color-badge-error-background: #B03312;
  --soto-color-badge-error-foreground: #F0F0EA;
  --soto-color-border-subtle: rgb(52 80 78 / 0.12);
  --soto-color-border-default: rgb(52 80 78 / 0.15);
  --soto-color-border-strong: rgb(52 80 78 / 0.3);
  --soto-color-feedback-success: #257A72;
  --soto-color-feedback-error: #B03312;
  --soto-color-feedback-info: #4E5FA6;
  --soto-color-feedback-warning: #7E6B00;
  --soto-color-overlay-backdrop: rgb(20 34 32 / 0.16);
  --soto-color-overlay-backdrop-strong: rgb(20 34 32 / 0.55);
  --soto-color-overlay-media: rgb(0 0 0 / 0.65);
  --soto-color-overlay-media-foreground: #FFFFFF;
  --soto-color-category-adults-background: #3235F3;
  --soto-color-category-adults-foreground: #FFFFFF;
  --soto-color-category-children-background: #D1E2FF;
  --soto-color-category-children-foreground: #34504E;
  --soto-color-category-event-background: #F0BEC8;
  --soto-color-category-event-foreground: #34504E;
  --soto-color-category-schedule-background: #EDF867;
  --soto-color-category-schedule-foreground: #34504E;
  --soto-color-modes-dark-surface-base: #142220;
  --soto-color-modes-dark-surface-raised: #1E302D;
  --soto-color-modes-dark-surface-sunken: #10201E;
  --soto-color-modes-dark-surface-natural: #263835;
  --soto-color-modes-dark-text-primary: #F0F0EA;
  --soto-color-modes-dark-text-secondary: #C8D0CB;
  --soto-color-modes-dark-text-muted: #9BA9A4;
  --soto-color-modes-dark-text-inverse: #142220;
  --soto-color-modes-dark-link-default: #C4D8D2;
  --soto-color-modes-dark-link-hover: #D7E6E2;
  --soto-color-modes-dark-link-decoration: rgb(196 216 210 / 0.45);
  --soto-color-modes-dark-link-decoration-hover: #D7E6E2;
  --soto-color-modes-dark-link-on-dark: #EDF867;
  --soto-color-modes-dark-link-on-dark-hover: #FFFFFF;
  --soto-color-modes-dark-brand-primary: #C4D8D2;
  --soto-color-modes-dark-brand-primary-hover: #D7E6E2;
  --soto-color-modes-dark-brand-accent: #FF8769;
  --soto-color-modes-dark-brand-earth: #C69A92;
  --soto-color-modes-dark-brand-yellow: #EDF867;
  --soto-color-modes-dark-brand-blue: #8587FF;
  --soto-color-modes-dark-brand-pink: #F0BEC8;
  --soto-color-modes-dark-brand-selection: #4D50A8;
  --soto-color-modes-dark-brand-surface-forest-background: #102E2A;
  --soto-color-modes-dark-brand-surface-forest-headline: #EDF867;
  --soto-color-modes-dark-brand-surface-forest-foreground: #F0F0EA;
  --soto-color-modes-dark-brand-surface-blue-background: #2629C7;
  --soto-color-modes-dark-brand-surface-blue-headline: #EDF867;
  --soto-color-modes-dark-brand-surface-blue-foreground: #FFFFFF;
  --soto-color-modes-dark-brand-surface-orange-background: #A82F12;
  --soto-color-modes-dark-brand-surface-orange-headline: #FFFFFF;
  --soto-color-modes-dark-brand-surface-orange-foreground: #FFFFFF;
  --soto-color-modes-dark-brand-surface-yellow-background: #B4BF45;
  --soto-color-modes-dark-brand-surface-yellow-headline: #762006;
  --soto-color-modes-dark-brand-surface-yellow-foreground: #162523;
  --soto-color-modes-dark-button-primary-face: #C4D8D2;
  --soto-color-modes-dark-button-primary-base: #28564F;
  --soto-color-modes-dark-button-primary-foreground: #162523;
  --soto-color-modes-dark-button-secondary-face: #10201E;
  --soto-color-modes-dark-button-secondary-base: #304743;
  --soto-color-modes-dark-button-secondary-foreground: #F0F0EA;
  --soto-color-modes-dark-button-outline-face: #162523;
  --soto-color-modes-dark-button-outline-base: #52635F;
  --soto-color-modes-dark-button-outline-foreground: #F0F0EA;
  --soto-color-modes-dark-button-outline-border: #52635F;
  --soto-color-modes-dark-button-destructive-face: #453931;
  --soto-color-modes-dark-button-destructive-base: #6E463B;
  --soto-color-modes-dark-button-destructive-foreground: #FF8769;
  --soto-color-modes-dark-badge-default-background: #263835;
  --soto-color-modes-dark-badge-default-foreground: #F0F0EA;
  --soto-color-modes-dark-badge-outline-background: #142220;
  --soto-color-modes-dark-badge-outline-foreground: #F0F0EA;
  --soto-color-modes-dark-badge-outline-border: rgb(240 240 234 / 0.32);
  --soto-color-modes-dark-badge-success-background: #66C8BD;
  --soto-color-modes-dark-badge-success-foreground: #142220;
  --soto-color-modes-dark-badge-warning-background: #E1CB62;
  --soto-color-modes-dark-badge-warning-foreground: #142220;
  --soto-color-modes-dark-badge-error-background: #FF8769;
  --soto-color-modes-dark-badge-error-foreground: #142220;
  --soto-color-modes-dark-border-subtle: rgb(240 240 234 / 0.1);
  --soto-color-modes-dark-border-default: rgb(240 240 234 / 0.16);
  --soto-color-modes-dark-border-strong: rgb(240 240 234 / 0.32);
  --soto-color-modes-dark-feedback-success: #66C8BD;
  --soto-color-modes-dark-feedback-error: #FF8769;
  --soto-color-modes-dark-feedback-info: #A7B4E2;
  --soto-color-modes-dark-feedback-warning: #E1CB62;
  --soto-color-modes-dark-overlay-backdrop: rgb(0 0 0 / 0.36);
  --soto-color-modes-dark-overlay-backdrop-strong: rgb(0 0 0 / 0.62);
  --soto-color-modes-dark-overlay-media: rgb(0 0 0 / 0.65);
  --soto-color-modes-dark-overlay-media-foreground: #FFFFFF;
  --soto-color-modes-dark-category-adults-background: #8587FF;
  --soto-color-modes-dark-category-adults-foreground: #162523;
  --soto-color-modes-dark-category-children-background: #3E5E79;
  --soto-color-modes-dark-category-children-foreground: #F0F0EA;
  --soto-color-modes-dark-category-event-background: #875764;
  --soto-color-modes-dark-category-event-foreground: #F0F0EA;
  --soto-color-modes-dark-category-schedule-background: #B4BF45;
  --soto-color-modes-dark-category-schedule-foreground: #162523;
  --soto-typography-family-body: "Inter Variable", Inter, ui-sans-serif, system-ui, sans-serif;
  --soto-typography-family-display: var(--font-editorial-local), "PP Editorial New", Georgia, serif;
  --soto-typography-weight-regular: 400;
  --soto-typography-weight-medium: 500;
  --soto-typography-weight-semibold: 600;
  --soto-typography-weight-bold: 700;
  --soto-typography-weight-display: 800;
  --soto-typography-style-display-size: clamp(4rem, 12vw, 9rem);
  --soto-typography-style-display-line-height: 0.88;
  --soto-typography-style-display-letter-spacing: -0.045em;
  --soto-typography-style-display-weight: 800;
  --soto-typography-style-heading1-size: 2.5rem;
  --soto-typography-style-heading1-line-height: 1.05;
  --soto-typography-style-heading1-letter-spacing: -0.035em;
  --soto-typography-style-heading1-weight: 800;
  --soto-typography-style-heading2-size: 1.75rem;
  --soto-typography-style-heading2-line-height: 1.1;
  --soto-typography-style-heading2-letter-spacing: -0.025em;
  --soto-typography-style-heading2-weight: 800;
  --soto-typography-style-body-size: 1rem;
  --soto-typography-style-body-line-height: 1.625rem;
  --soto-typography-style-body-weight: 400;
  --soto-typography-style-snippet-size: 0.875rem;
  --soto-typography-style-snippet-line-height: 1.25rem;
  --soto-typography-style-snippet-weight: 400;
  --soto-typography-style-meta-size: 0.75rem;
  --soto-typography-style-meta-line-height: 1rem;
  --soto-typography-style-meta-weight: 500;
  --soto-typography-style-button-size: 0.9375rem;
  --soto-typography-style-button-line-height: 1.25rem;
  --soto-typography-style-button-weight: 600;
  --soto-space-1: 0.25rem;
  --soto-space-2: 0.5rem;
  --soto-space-3: 0.75rem;
  --soto-space-4: 1rem;
  --soto-space-5: 1.25rem;
  --soto-space-6: 1.5rem;
  --soto-space-8: 2rem;
  --soto-space-10: 2.5rem;
  --soto-space-12: 3rem;
  --soto-radius-control: 0.75rem;
  --soto-radius-surface: 1rem;
  --soto-radius-overlay: 1.5rem;
  --soto-radius-full: 999px;
  --soto-shadow-card: 0 1px 2px rgb(52 80 78 / 0.06);
  --soto-shadow-sheet: 0 8px 24px rgb(52 80 78 / 0.12);
  --soto-shadow-soft: 0 20px 70px rgb(24 36 35 / 0.10);
  --soto-effect-paper-light: radial-gradient(circle at 16% -8%, rgb(255 255 255 / 0.34), transparent 34rem), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180' viewBox='0 0 180 180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' seed='8' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' fill='%238C7C63' filter='url(%23n)' opacity='.062'/%3E%3C/svg%3E");
  --soto-effect-paper-dark: radial-gradient(circle at 18% -10%, rgb(208 198 178 / 0.05), transparent 38rem), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180' viewBox='0 0 180 180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' seed='8' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' fill='%23E8E0D2' filter='url(%23n)' opacity='.038'/%3E%3C/svg%3E");
  --soto-effect-paper-size: auto, 180px 180px;
  --soto-layout-screen-margin: 1.25rem;
  --soto-layout-reading-max-width: 37.5rem;
  --soto-layout-content-max-width: 90rem;
  --soto-layout-touch-target: 2.75rem;
  --soto-icon-size: 1.5rem;
  --soto-icon-stroke-width: 1.75;
  --soto-motion-fast: 120ms;
  --soto-motion-normal: 180ms;
  --soto-motion-slow: 280ms;
  --soto-motion-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --soto-density-small-control-height: 2rem;
  --soto-density-small-control-padding-inline: 0.625rem;
  --soto-density-small-control-text: 0.75rem;
  --soto-density-small-inset: 0.75rem;
  --soto-density-small-stack: 0.25rem;
  --soto-density-small-icon: 1rem;
  --soto-density-small-tap-target: 2.25rem;
  --soto-density-small-body-text: 0.8125rem;
  --soto-density-small-body-line-height: 1.35rem;
  --soto-density-small-meta-text: 0.625rem;
  --soto-density-small-nav-text: 0.65rem;
  --soto-density-small-display-size: clamp(3.25rem, 9vw, 6.75rem);
  --soto-density-small-section-heading-size: clamp(2rem, 4.5vw, 4rem);
  --soto-density-small-panel-heading-size: 1.25rem;
  --soto-density-small-section-space: clamp(2.5rem, 5vw, 4.5rem);
  --soto-density-small-header-height: 4.25rem;
  --soto-density-small-control-radius: 0.5rem;
  --soto-density-small-surface-radius: 0.75rem;
  --soto-density-small-overlay-radius: 1rem;
  --soto-density-medium-control-height: 2.75rem;
  --soto-density-medium-control-padding-inline: 1rem;
  --soto-density-medium-control-text: 0.9375rem;
  --soto-density-medium-inset: 1.25rem;
  --soto-density-medium-stack: 0.75rem;
  --soto-density-medium-icon: 1.5rem;
  --soto-density-medium-tap-target: 2.75rem;
  --soto-density-medium-body-text: 1rem;
  --soto-density-medium-body-line-height: 1.625rem;
  --soto-density-medium-meta-text: 0.75rem;
  --soto-density-medium-nav-text: 0.78rem;
  --soto-density-medium-display-size: clamp(4rem, 12vw, 9rem);
  --soto-density-medium-section-heading-size: clamp(2.5rem, 6vw, 5.5rem);
  --soto-density-medium-panel-heading-size: 1.65rem;
  --soto-density-medium-section-space: clamp(4rem, 8vw, 7rem);
  --soto-density-medium-header-height: 5.5rem;
  --soto-density-medium-control-radius: 0.75rem;
  --soto-density-medium-surface-radius: 1rem;
  --soto-density-medium-overlay-radius: 1.5rem;
  --soto-density-large-control-height: 3.5rem;
  --soto-density-large-control-padding-inline: 1.375rem;
  --soto-density-large-control-text: 1rem;
  --soto-density-large-inset: 1.75rem;
  --soto-density-large-stack: 1.25rem;
  --soto-density-large-icon: 1.625rem;
  --soto-density-large-tap-target: 3.5rem;
  --soto-density-large-body-text: 1.0625rem;
  --soto-density-large-body-line-height: 1.75rem;
  --soto-density-large-meta-text: 0.8125rem;
  --soto-density-large-nav-text: 0.875rem;
  --soto-density-large-display-size: clamp(4.5rem, 12vw, 9.5rem);
  --soto-density-large-section-heading-size: clamp(3rem, 6vw, 6rem);
  --soto-density-large-panel-heading-size: 1.875rem;
  --soto-density-large-section-space: clamp(5rem, 9vw, 8rem);
  --soto-density-large-header-height: 6rem;
  --soto-density-large-control-radius: 0.75rem;
  --soto-density-large-surface-radius: 1rem;
  --soto-density-large-overlay-radius: 1.5rem;
  --soto-density-compact-control-height: var(--soto-density-small-control-height);
  --soto-density-compact-control-padding-inline: var(--soto-density-small-control-padding-inline);
  --soto-density-compact-control-text: var(--soto-density-small-control-text);
  --soto-density-compact-inset: var(--soto-density-small-inset);
  --soto-density-compact-stack: var(--soto-density-small-stack);
  --soto-density-compact-icon: var(--soto-density-small-icon);
  --soto-density-compact-tap-target: var(--soto-density-small-tap-target);
  --soto-density-compact-body-text: var(--soto-density-small-body-text);
  --soto-density-compact-body-line-height: var(--soto-density-small-body-line-height);
  --soto-density-compact-meta-text: var(--soto-density-small-meta-text);
  --soto-density-compact-nav-text: var(--soto-density-small-nav-text);
  --soto-density-compact-display-size: var(--soto-density-small-display-size);
  --soto-density-compact-section-heading-size: var(--soto-density-small-section-heading-size);
  --soto-density-compact-panel-heading-size: var(--soto-density-small-panel-heading-size);
  --soto-density-compact-section-space: var(--soto-density-small-section-space);
  --soto-density-compact-header-height: var(--soto-density-small-header-height);
  --soto-density-compact-control-radius: var(--soto-density-small-control-radius);
  --soto-density-compact-surface-radius: var(--soto-density-small-surface-radius);
  --soto-density-compact-overlay-radius: var(--soto-density-small-overlay-radius);
  --soto-density-wide-control-height: var(--soto-density-large-control-height);
  --soto-density-wide-control-padding-inline: var(--soto-density-large-control-padding-inline);
  --soto-density-wide-control-text: var(--soto-density-large-control-text);
  --soto-density-wide-inset: var(--soto-density-large-inset);
  --soto-density-wide-stack: var(--soto-density-large-stack);
  --soto-density-wide-icon: var(--soto-density-large-icon);
  --soto-density-wide-tap-target: var(--soto-density-large-tap-target);
  --soto-density-wide-body-text: var(--soto-density-large-body-text);
  --soto-density-wide-body-line-height: var(--soto-density-large-body-line-height);
  --soto-density-wide-meta-text: var(--soto-density-large-meta-text);
  --soto-density-wide-nav-text: var(--soto-density-large-nav-text);
  --soto-density-wide-display-size: var(--soto-density-large-display-size);
  --soto-density-wide-section-heading-size: var(--soto-density-large-section-heading-size);
  --soto-density-wide-panel-heading-size: var(--soto-density-large-panel-heading-size);
  --soto-density-wide-section-space: var(--soto-density-large-section-space);
  --soto-density-wide-header-height: var(--soto-density-large-header-height);
  --soto-density-wide-control-radius: var(--soto-density-large-control-radius);
  --soto-density-wide-surface-radius: var(--soto-density-large-surface-radius);
  --soto-density-wide-overlay-radius: var(--soto-density-large-overlay-radius);
  --soto-radius-card: var(--soto-radius-surface);
  --soto-radius-sheet: var(--soto-radius-overlay);
  --soto-radius-media: var(--soto-radius-surface);
  --soto-radius-pill: var(--soto-radius-full);
  --background: var(--soto-color-surface-base);
  --foreground: var(--soto-color-text-primary);
  --card: var(--soto-color-surface-raised);
  --card-foreground: var(--soto-color-text-primary);
  --popover: var(--soto-color-surface-raised);
  --popover-foreground: var(--soto-color-text-primary);
  --primary: var(--soto-color-brand-primary);
  --primary-foreground: var(--soto-color-text-inverse);
  --link: var(--soto-color-link-default);
  --link-hover: var(--soto-color-link-hover);
  --link-decoration: var(--soto-color-link-decoration);
  --link-decoration-hover: var(--soto-color-link-decoration-hover);
  --link-on-dark: var(--soto-color-link-on-dark);
  --link-on-dark-hover: var(--soto-color-link-on-dark-hover);
  --secondary: var(--soto-color-surface-sunken);
  --secondary-foreground: var(--soto-color-text-primary);
  --muted: var(--soto-color-surface-natural);
  --muted-foreground: var(--soto-color-text-muted);
  --accent: var(--soto-color-brand-accent);
  --accent-foreground: var(--soto-color-text-inverse);
  --destructive: var(--soto-color-feedback-error);
  --destructive-foreground: #FFFFFF;
  --brand-button-destructive-face: initial;
  --brand-button-destructive-hover: initial;
  --brand-button-destructive-base: initial;
  --brand-button-destructive-foreground: initial;
  --border: var(--soto-color-border-default);
  --input: var(--soto-color-border-default);
  --ring: var(--soto-color-brand-primary);
  --button-large-primary-face: var(--soto-color-button-primary-face);
  --button-large-primary-base: var(--soto-color-button-primary-base);
  --button-large-primary-foreground: var(--soto-color-button-primary-foreground);
  --button-large-secondary-face: var(--soto-color-button-secondary-face);
  --button-large-secondary-base: var(--soto-color-button-secondary-base);
  --button-large-secondary-foreground: var(--soto-color-button-secondary-foreground);
  --button-large-outline-face: var(--soto-color-button-outline-face);
  --button-large-outline-base: var(--soto-color-button-outline-base);
  --button-large-outline-foreground: var(--soto-color-button-outline-foreground);
  --button-large-outline-border: var(--soto-color-button-outline-border);
  --button-large-destructive-face: var(--soto-color-button-destructive-face);
  --button-large-destructive-base: var(--soto-color-button-destructive-base);
  --button-large-destructive-foreground: var(--soto-color-button-destructive-foreground);
  --button-wide-primary-face: var(--button-large-primary-face);
  --button-wide-primary-base: var(--button-large-primary-base);
  --button-wide-primary-foreground: var(--button-large-primary-foreground);
  --button-wide-secondary-face: var(--button-large-secondary-face);
  --button-wide-secondary-base: var(--button-large-secondary-base);
  --button-wide-secondary-foreground: var(--button-large-secondary-foreground);
  --button-wide-outline-face: var(--button-large-outline-face);
  --button-wide-outline-base: var(--button-large-outline-base);
  --button-wide-outline-foreground: var(--button-large-outline-foreground);
  --button-wide-outline-border: var(--button-large-outline-border);
  --button-wide-destructive-face: var(--button-large-destructive-face);
  --button-wide-destructive-base: var(--button-large-destructive-base);
  --button-wide-destructive-foreground: var(--button-large-destructive-foreground);
  --radius: var(--soto-radius-control);
  --font-body: var(--soto-typography-family-body);
  --font-display: var(--soto-typography-family-display);
  --control-height: var(--soto-density-medium-control-height);
  --control-padding-inline: var(--soto-density-medium-control-padding-inline);
  --control-text: var(--soto-density-medium-control-text);
  --inset: var(--soto-density-medium-inset);
  --stack: var(--soto-density-medium-stack);
  --icon-size: var(--soto-density-medium-icon);
  --tap-target: var(--soto-density-medium-tap-target);
  --density-body-size: var(--soto-density-medium-body-text);
  --density-body-line-height: var(--soto-density-medium-body-line-height);
  --density-meta-size: var(--soto-density-medium-meta-text);
  --density-nav-size: var(--soto-density-medium-nav-text);
  --density-display-size: var(--soto-density-medium-display-size);
  --density-section-heading-size: var(--soto-density-medium-section-heading-size);
  --density-panel-heading-size: var(--soto-density-medium-panel-heading-size);
  --density-section-space: var(--soto-density-medium-section-space);
  --density-header-height: var(--soto-density-medium-header-height);
  --soto-radius-control: var(--soto-density-medium-control-radius);
  --soto-radius-surface: var(--soto-density-medium-surface-radius);
  --soto-radius-overlay: var(--soto-density-medium-overlay-radius);
}

[data-theme="light"] {
  color-scheme: light;
}

[data-theme="dark"] {
  color-scheme: dark;
  --soto-color-surface-base: #142220;
  --soto-color-surface-raised: #1E302D;
  --soto-color-surface-sunken: #10201E;
  --soto-color-surface-natural: #263835;
  --soto-color-text-primary: #F0F0EA;
  --soto-color-text-secondary: #C8D0CB;
  --soto-color-text-muted: #9BA9A4;
  --soto-color-text-inverse: #142220;
  --soto-color-link-default: #C4D8D2;
  --soto-color-link-hover: #D7E6E2;
  --soto-color-link-decoration: rgb(196 216 210 / 0.45);
  --soto-color-link-decoration-hover: #D7E6E2;
  --soto-color-link-on-dark: #EDF867;
  --soto-color-link-on-dark-hover: #FFFFFF;
  --soto-color-brand-primary: #C4D8D2;
  --soto-color-brand-primary-hover: #D7E6E2;
  --soto-color-brand-accent: #FF8769;
  --soto-color-brand-earth: #C69A92;
  --soto-color-brand-yellow: #EDF867;
  --soto-color-brand-blue: #8587FF;
  --soto-color-brand-pink: #F0BEC8;
  --soto-color-brand-selection: #4D50A8;
  --soto-color-brand-surface-forest-background: #102E2A;
  --soto-color-brand-surface-forest-headline: #EDF867;
  --soto-color-brand-surface-forest-foreground: #F0F0EA;
  --soto-color-brand-surface-blue-background: #2629C7;
  --soto-color-brand-surface-blue-headline: #EDF867;
  --soto-color-brand-surface-blue-foreground: #FFFFFF;
  --soto-color-brand-surface-orange-background: #A82F12;
  --soto-color-brand-surface-orange-headline: #FFFFFF;
  --soto-color-brand-surface-orange-foreground: #FFFFFF;
  --soto-color-brand-surface-yellow-background: #B4BF45;
  --soto-color-brand-surface-yellow-headline: #762006;
  --soto-color-brand-surface-yellow-foreground: #162523;
  --soto-color-button-primary-face: #C4D8D2;
  --soto-color-button-primary-base: #28564F;
  --soto-color-button-primary-foreground: #162523;
  --soto-color-button-secondary-face: #10201E;
  --soto-color-button-secondary-base: #304743;
  --soto-color-button-secondary-foreground: #F0F0EA;
  --soto-color-button-outline-face: #162523;
  --soto-color-button-outline-base: #52635F;
  --soto-color-button-outline-foreground: #F0F0EA;
  --soto-color-button-outline-border: #52635F;
  --soto-color-button-destructive-face: #453931;
  --soto-color-button-destructive-base: #6E463B;
  --soto-color-button-destructive-foreground: #FF8769;
  --soto-color-badge-default-background: #263835;
  --soto-color-badge-default-foreground: #F0F0EA;
  --soto-color-badge-outline-background: #142220;
  --soto-color-badge-outline-foreground: #F0F0EA;
  --soto-color-badge-outline-border: rgb(240 240 234 / 0.32);
  --soto-color-badge-success-background: #66C8BD;
  --soto-color-badge-success-foreground: #142220;
  --soto-color-badge-warning-background: #E1CB62;
  --soto-color-badge-warning-foreground: #142220;
  --soto-color-badge-error-background: #FF8769;
  --soto-color-badge-error-foreground: #142220;
  --soto-color-border-subtle: rgb(240 240 234 / 0.1);
  --soto-color-border-default: rgb(240 240 234 / 0.16);
  --soto-color-border-strong: rgb(240 240 234 / 0.32);
  --soto-color-feedback-success: #66C8BD;
  --soto-color-feedback-error: #FF8769;
  --soto-color-feedback-info: #A7B4E2;
  --soto-color-feedback-warning: #E1CB62;
  --soto-color-overlay-backdrop: rgb(0 0 0 / 0.36);
  --soto-color-overlay-backdrop-strong: rgb(0 0 0 / 0.62);
  --soto-color-overlay-media: rgb(0 0 0 / 0.65);
  --soto-color-overlay-media-foreground: #FFFFFF;
  --soto-color-category-adults-background: #8587FF;
  --soto-color-category-adults-foreground: #162523;
  --soto-color-category-children-background: #3E5E79;
  --soto-color-category-children-foreground: #F0F0EA;
  --soto-color-category-event-background: #875764;
  --soto-color-category-event-foreground: #F0F0EA;
  --soto-color-category-schedule-background: #B4BF45;
  --soto-color-category-schedule-foreground: #162523;
}

.meccano-surface-base {
  background-color: var(--soto-color-surface-base);
  background-image: var(--soto-effect-paper-light);
  background-attachment: fixed;
  background-size: var(--soto-effect-paper-size);
}

[data-theme="dark"] .meccano-surface-base {
  background-image: var(--soto-effect-paper-dark);
}

/* Public link contract. Any anchor can opt in — inline prose, mailto:, tel: — and the icons inside
   inherit the link colour through currentColor. Use data-variant="on-dark" on forest, blue, orange
   or any brand surface. Never paint links with the brand primary: it carries CTA backgrounds. */

.meccano-link {
  color: var(--link);
  text-decoration-line: underline;
  text-decoration-color: var(--link-decoration);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
  transition:
    color var(--soto-motion-fast) var(--soto-motion-ease),
    text-decoration-color var(--soto-motion-fast) var(--soto-motion-ease);
}

.meccano-link:hover {
  color: var(--link-hover);
  text-decoration-color: var(--link-decoration-hover);
  text-decoration-thickness: 2px;
}

.meccano-link:focus-visible {
  border-radius: 3px;
  outline: 2px solid var(--ring);
  outline-offset: 2px;
}

.meccano-link[data-variant="on-dark"] {
  color: var(--link-on-dark);
  text-decoration-color: color-mix(in srgb, var(--link-on-dark) 45%, transparent);
}

.meccano-link[data-variant="on-dark"]:hover {
  color: var(--link-on-dark-hover);
  text-decoration-color: var(--link-on-dark-hover);
}

.meccano-link[data-variant="on-dark"]:focus-visible {
  outline-color: var(--soto-color-button-on-dark-ring);
}

@media (prefers-reduced-motion: reduce) {
  .meccano-link {
    transition: none;
  }
}

/* Canonical densities are small, medium and large. Previous Meccano and Ingest selectors are
   deprecated and kept for the migration window. */

[data-density="small"],
[data-density="compact"],
[data-density="compacta"] {
  --control-height: var(--soto-density-small-control-height);
  --control-padding-inline: var(--soto-density-small-control-padding-inline);
  --control-text: var(--soto-density-small-control-text);
  --inset: var(--soto-density-small-inset);
  --stack: var(--soto-density-small-stack);
  --icon-size: var(--soto-density-small-icon);
  --tap-target: var(--soto-density-small-tap-target);
  --density-body-size: var(--soto-density-small-body-text);
  --density-body-line-height: var(--soto-density-small-body-line-height);
  --density-meta-size: var(--soto-density-small-meta-text);
  --density-nav-size: var(--soto-density-small-nav-text);
  --density-display-size: var(--soto-density-small-display-size);
  --density-section-heading-size: var(--soto-density-small-section-heading-size);
  --density-panel-heading-size: var(--soto-density-small-panel-heading-size);
  --density-section-space: var(--soto-density-small-section-space);
  --density-header-height: var(--soto-density-small-header-height);
  --soto-radius-control: var(--soto-density-small-control-radius);
  --soto-radius-surface: var(--soto-density-small-surface-radius);
  --soto-radius-overlay: var(--soto-density-small-overlay-radius);
}

[data-density="medium"],
[data-density="media"] {
  --control-height: var(--soto-density-medium-control-height);
  --control-padding-inline: var(--soto-density-medium-control-padding-inline);
  --control-text: var(--soto-density-medium-control-text);
  --inset: var(--soto-density-medium-inset);
  --stack: var(--soto-density-medium-stack);
  --icon-size: var(--soto-density-medium-icon);
  --tap-target: var(--soto-density-medium-tap-target);
  --density-body-size: var(--soto-density-medium-body-text);
  --density-body-line-height: var(--soto-density-medium-body-line-height);
  --density-meta-size: var(--soto-density-medium-meta-text);
  --density-nav-size: var(--soto-density-medium-nav-text);
  --density-display-size: var(--soto-density-medium-display-size);
  --density-section-heading-size: var(--soto-density-medium-section-heading-size);
  --density-panel-heading-size: var(--soto-density-medium-panel-heading-size);
  --density-section-space: var(--soto-density-medium-section-space);
  --density-header-height: var(--soto-density-medium-header-height);
  --soto-radius-control: var(--soto-density-medium-control-radius);
  --soto-radius-surface: var(--soto-density-medium-surface-radius);
  --soto-radius-overlay: var(--soto-density-medium-overlay-radius);
}

[data-density="large"],
[data-density="wide"],
[data-density="amplia"] {
  --control-height: var(--soto-density-large-control-height);
  --control-padding-inline: var(--soto-density-large-control-padding-inline);
  --control-text: var(--soto-density-large-control-text);
  --inset: var(--soto-density-large-inset);
  --stack: var(--soto-density-large-stack);
  --icon-size: var(--soto-density-large-icon);
  --tap-target: var(--soto-density-large-tap-target);
  --density-body-size: var(--soto-density-large-body-text);
  --density-body-line-height: var(--soto-density-large-body-line-height);
  --density-meta-size: var(--soto-density-large-meta-text);
  --density-nav-size: var(--soto-density-large-nav-text);
  --density-display-size: var(--soto-density-large-display-size);
  --density-section-heading-size: var(--soto-density-large-section-heading-size);
  --density-panel-heading-size: var(--soto-density-large-panel-heading-size);
  --density-section-space: var(--soto-density-large-section-space);
  --density-header-height: var(--soto-density-large-header-height);
  --soto-radius-control: var(--soto-density-large-control-radius);
  --soto-radius-surface: var(--soto-density-large-surface-radius);
  --soto-radius-overlay: var(--soto-density-large-overlay-radius);
}

[data-density="large"] [data-slot="button"]:not([data-variant="outline"]):not([data-variant="on-dark"]),
[data-density="wide"] [data-slot="button"]:not([data-variant="outline"]):not([data-variant="on-dark"]),
[data-density="amplia"] [data-slot="button"]:not([data-variant="outline"]):not([data-variant="on-dark"]) {
  border-width: 0;
}

.meccano-shell-header {
  border-bottom: 1px solid color-mix(in srgb, var(--soto-color-border-default) 42%, transparent);
  background: color-mix(in srgb, var(--soto-color-surface-base) 82%, transparent);
  backdrop-filter: blur(20px) saturate(1.08);
}

[data-theme="dark"] .meccano-shell-header {
  border-bottom-color: color-mix(in srgb, var(--soto-color-border-default) 34%, transparent);
  background: color-mix(in srgb, var(--soto-color-surface-base) 76%, transparent);
}

@theme inline {
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --color-card: var(--card);
  --color-card-foreground: var(--card-foreground);
  --color-popover: var(--popover);
  --color-popover-foreground: var(--popover-foreground);
  --color-primary: var(--primary);
  --color-primary-foreground: var(--primary-foreground);
  --color-link: var(--link);
  --color-link-hover: var(--link-hover);
  --color-link-decoration: var(--link-decoration);
  --color-link-decoration-hover: var(--link-decoration-hover);
  --color-link-on-dark: var(--link-on-dark);
  --color-link-on-dark-hover: var(--link-on-dark-hover);
  --color-secondary: var(--secondary);
  --color-secondary-foreground: var(--secondary-foreground);
  --color-muted: var(--muted);
  --color-muted-foreground: var(--muted-foreground);
  --color-accent: var(--accent);
  --color-accent-foreground: var(--accent-foreground);
  --color-destructive: var(--destructive);
  --color-destructive-foreground: var(--destructive-foreground);
  --color-border: var(--border);
  --color-input: var(--input);
  --color-ring: var(--ring);
  --color-surface-base: var(--soto-color-surface-base);
  --color-surface-raised: var(--soto-color-surface-raised);
  --color-surface-sunken: var(--soto-color-surface-sunken);
  --color-brand-primary: var(--soto-color-brand-primary);
  --color-brand-accent: var(--soto-color-brand-accent);
  --font-sans: var(--font-body);
  --font-display: var(--soto-typography-family-display);
  --radius-surface: var(--soto-radius-surface);
  --radius-control: var(--soto-radius-control);
  --radius-overlay: var(--soto-radius-overlay);
  --radius-full: var(--soto-radius-full);
  --radius-card: var(--soto-radius-card);
  --radius-sheet: var(--soto-radius-sheet);
  --radius-media: var(--soto-radius-media);
  --radius-pill: var(--soto-radius-pill);
  --shadow-card: var(--soto-shadow-card);
  --shadow-sheet: var(--soto-shadow-sheet);
  --spacing-control: var(--control-height);
  --spacing-control-x: var(--control-padding-inline);
  --spacing-inset: var(--inset);
  --spacing-stack: var(--stack);
  --spacing-icon: var(--icon-size);
  --spacing-tap: var(--tap-target);
  --text-control: var(--control-text);
  --text-body: var(--soto-typography-style-body-size);
  --text-body--line-height: var(--soto-typography-style-body-line-height);
  --text-snippet: var(--soto-typography-style-snippet-size);
  --text-snippet--line-height: var(--soto-typography-style-snippet-line-height);
  --text-meta: var(--soto-typography-style-meta-size);
  --text-meta--line-height: var(--soto-typography-style-meta-line-height);
}