/* ============================================================
   SM.Studio design system
   Generated file, do not edit by hand
   system version 1.0.0
   build date 2026-07-15
   build hash a09fa926036ac65c
   profile hola
   brand Hola CasaClara, token prefix sm
   Built by SM.Studio, https://saadminhas.studio
   ============================================================ */

:root {

  /* brand layer */
  --sm-primitive-color-dark-surface-page: #2C3635;
  --sm-primitive-color-dark-surface-card: #343E3D;
  --sm-primitive-color-dark-surface-card-strong: #3D4847;
  --sm-primitive-color-dark-surface-control: #454E4D;
  --sm-primitive-color-dark-surface-fill: rgba(255, 255, 255, 0.08);
  --sm-primitive-color-dark-surface-code: #232B2A;
  --sm-primitive-color-dark-surface-raised: #343E3D;
  --sm-primitive-color-dark-text-primary: #FFFFFF;
  --sm-primitive-color-dark-text-secondary: #B9BDBC;
  --sm-primitive-color-dark-accent-base: #DBE64C;
  --sm-primitive-color-dark-accent-surface: #3D4847;
  --sm-primitive-color-dark-border-default: rgba(255, 255, 255, 0.14);
  --sm-primitive-color-dark-border-separator: rgba(255, 255, 255, 0.14);
  --sm-primitive-color-dark-border-hover: rgba(255, 255, 255, 0.28);
  --sm-primitive-color-dark-focus-ring: #DBE64C;
  --sm-primitive-color-dark-feedback-pass: #30D158;
  --sm-primitive-color-dark-feedback-pass-surface: #28311B;
  --sm-primitive-color-dark-feedback-pass-text: #4AD968;
  --sm-primitive-color-dark-feedback-warn: #FF9230;
  --sm-primitive-color-dark-feedback-warn-surface: #3A2C1F;
  --sm-primitive-color-dark-feedback-warn-text: #FFA056;
  --sm-primitive-color-dark-feedback-caution: #FFD600;
  --sm-primitive-color-dark-feedback-caution-surface: #332E1B;
  --sm-primitive-color-dark-feedback-caution-text: #FEDF43;
  --sm-primitive-color-dark-feedback-red: #FF4245;
  --sm-primitive-color-dark-feedback-red-surface: #42221F;
  --sm-primitive-color-dark-feedback-red-text: #FF6165;
  --sm-primitive-color-dark-feedback-info: #0091FF;
  --sm-primitive-color-dark-feedback-info-surface: #1C2B42;
  --sm-primitive-color-dark-feedback-info-text: #5CB8FF;
  --sm-primitive-color-dark-text-inverse: #2C3635;
  --sm-primitive-color-dark-accent-hover: #E5EE6B;
  --sm-primitive-color-dark-accent-pressed: #C4CE3E;
  --sm-primitive-color-neutral-0: #FFFFFF;
  --sm-primitive-color-neutral-100: #F6F8ED;
  --sm-primitive-color-neutral-200: #F1EAD8;
  --sm-primitive-color-neutral-300: #D6C7B0;
  --sm-primitive-color-neutral-400: #A8A29E;
  --sm-primitive-color-neutral-500: #78716C;
  --sm-primitive-color-neutral-600: #57534E;
  --sm-primitive-color-neutral-700: #44403C;
  --sm-primitive-color-neutral-800: #454E4D;
  --sm-primitive-color-neutral-900: #2C3635;
  --sm-primitive-color-neutral-1000: #2A2A26;
  --sm-primitive-color-neutral-1100: #1C1917;
  --sm-primitive-color-neutral-1200: #000000;
  --sm-primitive-color-ink-400: #A8A29E;
  --sm-primitive-color-ink-600: #57534E;
  --sm-primitive-color-ink-800: #3A3A35;
  --sm-primitive-color-ink-900: #2A2A26;
  --sm-primitive-color-ink-1000: #2A2A26;
  --sm-primitive-color-surface-page: #F6F8ED;
  --sm-primitive-color-surface-line: rgba(42, 42, 38, 0.12);
  --sm-primitive-color-surface-code: #F1EAD8;
  --sm-primitive-color-accent-base: #485946;
  --sm-primitive-color-accent-surface: #F1EAD8;
  --sm-primitive-color-accent-focus-ring: rgba(72, 89, 70, 0.35);
  --sm-primitive-color-accent-hover: #3A4738;
  --sm-primitive-color-accent-active: #2D372C;
  --sm-primitive-color-status-pass: #34C759;
  --sm-primitive-color-status-pass-text: #008430;
  --sm-primitive-color-status-warn: #FF8D28;
  --sm-primitive-color-status-warn-text: #BD5000;
  --sm-primitive-color-status-caution: #FFCC00;
  --sm-primitive-color-status-caution-text: #9B6600;
  --sm-primitive-color-status-red: #FF383C;
  --sm-primitive-color-status-red-text: #E0142B;
  --sm-primitive-color-status-info: #0088FF;
  --sm-primitive-color-status-info-text: #1D6AEA;
  --sm-primitive-color-shell-surface: #485946;
  --sm-primitive-color-shell-active: #5E6D5C;
  --sm-primitive-color-shell-subactive: #3A4544;
  --sm-primitive-color-shell-cream: #F1EAD8;
  --sm-primitive-color-shell-divider: #2C3635;
  --sm-primitive-color-shell-mark: #FF6E4F;
  --sm-primitive-color-shell-header: #485946;
  --sm-primitive-color-shell-scrim: rgba(44, 54, 53, 0.46);
  --sm-primitive-color-white: #FFFFFF;
  --sm-primitive-color-contrast-light: #FAFAFA;
  --sm-primitive-color-contrast-dark: #040403;
  --sm-primitive-color-alpha-white78: rgba(255, 255, 255, 0.78);
  --sm-primitive-color-alpha-white94: rgba(255, 255, 255, 0.94);
  --sm-primitive-color-alpha-white72: rgba(255, 255, 255, 0.72);
  --sm-primitive-color-alpha-white70: rgba(255, 255, 255, 0.7);
  --sm-primitive-color-alpha-white60: #F1EAD8;
  --sm-primitive-color-alpha-white54: #E5E1D8;
  --sm-primitive-color-alpha-white24: rgba(255, 255, 255, 0.24);
  --sm-primitive-color-alpha-white18: rgba(255, 255, 255, 0.18);
  --sm-primitive-color-alpha-white08: rgba(255, 255, 255, 0.08);
  --sm-primitive-color-alpha-ink04: rgba(42, 42, 38, 0.04);
  --sm-primitive-color-alpha-ink10: rgba(42, 42, 38, 0.1);
  --sm-primitive-color-alpha-ink16: rgba(42, 42, 38, 0.16);
  --sm-primitive-color-alpha-black04: rgba(0, 0, 0, 0.04);
  --sm-primitive-color-alpha-focus: rgba(72, 89, 70, 0.35);
  --sm-primitive-font-sans: "DM Sans", sans-serif;
  --sm-primitive-font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  --sm-primitive-font-display: "Momo Trust Sans", sans-serif;
  --sm-primitive-font-body: "DM Sans", sans-serif;
  --sm-primitive-radius-none: 0;
  --sm-primitive-radius-sm: 4px;
  --sm-primitive-radius-soft: 6px;
  --sm-primitive-radius-md: 8px;
  --sm-primitive-radius-pill: 9999px;
  --sm-asset-logo-primary: "assets/logos/hola-casa-clara-logo-primary.svg";
  --sm-asset-logo-mark: "assets/avatar-1.svg";
  --sm-asset-logo-cover: "assets/cover-graphic.svg";

  /* semantic layer */
  --sm-color-surface-page: var(--sm-primitive-color-surface-page);
  --sm-color-surface-card: var(--sm-primitive-color-alpha-white78);
  --sm-color-surface-card-strong: var(--sm-primitive-color-alpha-white94);
  --sm-color-surface-control: var(--sm-primitive-color-alpha-white72);
  --sm-color-surface-fill: var(--sm-primitive-color-alpha-ink04);
  --sm-color-surface-code: var(--sm-primitive-color-surface-code);
  --sm-color-surface-raised: var(--sm-primitive-color-white);
  --sm-color-surface-sidebar: var(--sm-primitive-color-shell-surface);
  --sm-color-surface-sidebar-active: var(--sm-primitive-color-shell-active);
  --sm-color-surface-sidebar-highlight: var(--sm-primitive-color-shell-subactive);
  --sm-color-surface-gradient: var(--sm-primitive-color-alpha-white70);
  --sm-color-text-primary: var(--sm-primitive-color-neutral-1000);
  --sm-color-text-secondary: var(--sm-primitive-color-neutral-800);
  --sm-color-text-muted: var(--sm-primitive-color-ink-400);
  --sm-color-text-inverse: var(--sm-primitive-color-white);
  --sm-color-text-inverse-muted: var(--sm-primitive-color-alpha-white54);
  --sm-color-text-inverse-soft: var(--sm-primitive-color-alpha-white60);
  --sm-color-text-on-bold: var(--sm-primitive-color-white);
  --sm-color-text-contrast-light: var(--sm-primitive-color-contrast-light);
  --sm-color-text-contrast-dark: var(--sm-primitive-color-contrast-dark);
  --sm-color-accent: var(--sm-primitive-color-accent-base);
  --sm-color-accent-surface: var(--sm-primitive-color-accent-surface);
  --sm-color-accent-hover: var(--sm-primitive-color-accent-hover);
  --sm-color-accent-active: var(--sm-primitive-color-accent-active);
  --sm-color-border-default: var(--sm-primitive-color-surface-line);
  --sm-color-border-separator: var(--sm-primitive-color-alpha-ink10);
  --sm-color-border-hover: var(--sm-primitive-color-alpha-ink16);
  --sm-color-border-inverse: var(--sm-primitive-color-alpha-white18);
  --sm-color-border-faint: var(--sm-primitive-color-alpha-black04);
  --sm-color-focus-ring: var(--sm-primitive-color-accent-focus-ring);
  --sm-color-focus-ring-inverse: var(--sm-primitive-color-alpha-white24);
  --sm-color-feedback-pass: var(--sm-primitive-color-status-pass);
  --sm-color-feedback-pass-surface: #F3FCF5; /* derived from primitive.color.status.pass, contrast gated */
  --sm-color-feedback-pass-text: var(--sm-primitive-color-status-pass-text);
  --sm-color-feedback-warn: var(--sm-primitive-color-status-warn);
  --sm-color-feedback-warn-surface: #FFF8F2; /* derived from primitive.color.status.warn, contrast gated */
  --sm-color-feedback-warn-text: var(--sm-primitive-color-status-warn-text);
  --sm-color-feedback-caution: var(--sm-primitive-color-status-caution);
  --sm-color-feedback-caution-surface: #FFFCF0; /* derived from primitive.color.status.caution, contrast gated */
  --sm-color-feedback-caution-text: var(--sm-primitive-color-status-caution-text);
  --sm-color-feedback-red: var(--sm-primitive-color-status-red);
  --sm-color-feedback-red-surface: #FFF3F3; /* derived from primitive.color.status.red, contrast gated */
  --sm-color-feedback-red-text: var(--sm-primitive-color-status-red-text);
  --sm-color-feedback-info: var(--sm-primitive-color-status-info);
  --sm-color-feedback-info-surface: #F0F8FF; /* derived from primitive.color.status.info, contrast gated */
  --sm-color-feedback-info-text: var(--sm-primitive-color-status-info-text);
  --sm-motion-duration-standard: 160ms;
  --sm-motion-duration-quick: 140ms;
  --sm-motion-easing-standard: ease;
  --sm-radius-none: var(--sm-primitive-radius-none);
  --sm-radius-sm: var(--sm-primitive-radius-sm);
  --sm-radius-soft: var(--sm-primitive-radius-soft);
  --sm-radius-md: var(--sm-primitive-radius-md);
  --sm-radius-pill: var(--sm-primitive-radius-pill);
  --sm-shadow-panel: 0 12px 24px rgba(0, 0, 0, 0.02);
  --sm-shadow-card: 0 1px 2px rgba(0, 0, 0, 0.06), 0 12px 32px rgba(0, 0, 0, 0.04);
  --sm-shadow-card-hover: 0 2px 6px rgba(0, 0, 0, 0.08), 0 18px 44px rgba(0, 0, 0, 0.06);
  --sm-shadow-swatch-hover: 0 7px 18px rgba(19, 25, 39, 0.12);
  --sm-shadow-swatch-focus: 0 7px 18px rgba(19, 25, 39, 0.14);
  --sm-size-icon-100: 16px;
  --sm-size-icon-200: 18px;
  --sm-size-icon-300: 20px;
  --sm-size-icon-400: 24px;
  --sm-size-icon-500: 32px;
  --sm-size-border-thin: 1px;
  --sm-size-border-emphasis: 2px;
  --sm-size-focus-offset: 3px;
  --sm-space-1: 4px;
  --sm-space-2: 8px;
  --sm-space-3: 12px;
  --sm-space-4: 16px;
  --sm-space-5: 20px;
  --sm-space-6: 24px;
  --sm-space-7: 28px;
  --sm-space-8: 32px;
  --sm-space-10: 40px;
  --sm-space-12: 48px;
  --sm-space-14: 56px;
  --sm-space-16: 64px;
  --sm-space-20: 80px;
  --sm-space-22: 88px;
  --sm-space-24: 96px;
  --sm-space-28: 112px;
  --sm-space-05: 2px;
  --sm-type-family-sans: var(--sm-primitive-font-sans);
  --sm-type-family-mono: var(--sm-primitive-font-mono);
  --sm-type-family-display: var(--sm-primitive-font-display);
  --sm-type-family-body: var(--sm-primitive-font-body);
  --sm-type-scale-100: 11px;
  --sm-type-scale-200: 12px;
  --sm-type-scale-300: 13px;
  --sm-type-scale-400: 14px;
  --sm-type-scale-500: 15px;
  --sm-type-scale-600: 16px;
  --sm-type-scale-700: 20px;
  --sm-type-scale-800: 22px;
  --sm-type-scale-900: 28px;
  --sm-type-scale-1000: 64px;
  --sm-type-weight-regular: 400;
  --sm-type-weight-medium: 500;
  --sm-type-weight-semibold: 600;
  --sm-type-weight-bold: 700;
  --sm-type-weight-heavy: 800;
  --sm-type-leading-100: 0.98;
  --sm-type-leading-200: 1;
  --sm-type-leading-300: 1.02;
  --sm-type-leading-400: 1.12;
  --sm-type-leading-500: 1.2;
  --sm-type-leading-600: 1.31;
  --sm-type-leading-700: 1.4;
  --sm-type-leading-800: 1.45;
  --sm-type-leading-900: 1.5;
  --sm-type-leading-1000: 1.55;

  /* component layer */
  --sm-iconbadge-size: var(--sm-space-8);
  --sm-iconbadge-radius: var(--sm-radius-none);
  --sm-button-height: 32px;
  --sm-button-height-compact: 24px;
  --sm-button-pad-block: 6px;
  --sm-button-pad-block-compact: 2px;
  --sm-button-pad-inline: 12px;
  --sm-button-radius: 6px;
  --sm-button-radius-compact: 4px;
  --sm-button-gap: 4px;
  --sm-button-gap-icon: 6px;
  --sm-button-border-width: 1px;
  --sm-button-transition-duration: 150ms;
  --sm-button-primary-hover-bg: var(--sm-color-accent-hover);
  --sm-button-primary-active-bg: var(--sm-color-accent-active);
  --sm-button-warning-bg: #FBC828;
  --sm-button-warning-hover-bg: #FCA700;
  --sm-button-warning-active-bg: #F68909;
  --sm-button-warning-text: var(--sm-color-text-contrast-dark);
  --sm-button-download-icon-size: var(--sm-size-icon-100);
  --sm-button-download-gap: 6px;
  --sm-card-pad-x: var(--sm-space-8);
  --sm-card-pad-top: 30px; /* exception, approved off grid value */
  --sm-card-pad-bottom: 29px; /* exception, approved off grid value */
  --sm-card-content-gap: 11px; /* exception, approved off grid value */
  --sm-card-grid-gap: var(--sm-space-4);
  --sm-chip-height: var(--sm-space-6);
  --sm-chip-pad-inline: 9px; /* exception, approved off grid value */
  --sm-chip-radius: var(--sm-radius-sm);
  --sm-chip-bg: var(--sm-color-surface-control);
  --sm-chip-text-size: var(--sm-type-scale-200);
  --sm-chip-text-weight: var(--sm-type-weight-medium);
  --sm-code-header-height: 44px;
  --sm-code-bg: var(--sm-color-surface-code);
  --sm-code-font: var(--sm-type-family-mono);
  --sm-code-text-size: var(--sm-type-scale-400);
  --sm-code-text-leading: var(--sm-type-leading-1000);
  --sm-code-copy-button-height: var(--sm-space-8);
  --sm-cover-action-width: 300px;
  --sm-cover-action-height: 56px;
  --sm-cover-gutter-min: 72px;
  --sm-cover-gutter-max: 160px;
  --sm-cover-top-min: 56px;
  --sm-cover-top-max: 72px;
  --sm-cover-title-size-min: 48px;
  --sm-cover-title-size-max: 84px;
  --sm-cover-title-weight: var(--sm-type-weight-regular);
  --sm-cover-title-gap-min: 22px;
  --sm-cover-title-gap-max: 40px;
  --sm-cover-title-height: 166px;
  --sm-cover-copy-height: 90px;
  --sm-cover-divider-width: 2px;
  --sm-cover-version-width: 194px;
  --sm-cover-version-height: 22px;
  --sm-cover-footer-height: 52px;
  --sm-cover-region-width: 1116px;
  --sm-cover-content-offset-x: 120px;
  --sm-cover-content-offset-y: 120px;
  --sm-cover-copy-max-width: 840px;
  --sm-cover-asterisk-band-height: 275px;
  --sm-cover-asterisk-band-aspect: 1112 / 275;
  --sm-cover-sidebar-client-top: 126px;
  --sm-cover-header-chip-radius: var(--sm-radius-pill);
  --sm-cover-header-chip-pad-y: 6px; /* exception, approved off grid value */
  --sm-cover-header-chip-pad-x: 10px; /* exception, approved off grid value */
  --sm-cover-header-chip-height: 28px;
  --sm-cover-copy-size-min: 24px;
  --sm-cover-copy-size-max: 42px;
  --sm-cover-copy-color: rgba(229, 225, 216, 0.6);
  --sm-cover-action-gap-min: 24px;
  --sm-cover-action-gap-max: 40px;
  --sm-cover-footer-band-min: 88px;
  --sm-cover-footer-band-max: 120px;
  --sm-cover-graphic-width-min: 320px;
  --sm-cover-graphic-width-max: 543px;
  --sm-cover-graphic-aspect: 543 / 422;
  --sm-cover-version-offset: 35px; /* exception, approved off grid value */
  --sm-cover-short-top: 56px;
  --sm-cover-short-title-size: 48px;
  --sm-cover-short-copy-size: 24px;
  --sm-cover-short-title-gap: 20px;
  --sm-cover-short-action-gap: 24px;
  --sm-cover-short-footer-band: 88px;
  --sm-cover-short-graphic-width-min: 260px;
  --sm-cover-short-graphic-width-max: 420px;
  --sm-font-display: 700 64px/0.98 "Momo Trust Sans", sans-serif;
  --sm-font-display-cover: 400 64px/0.98 "Momo Trust Sans", sans-serif;
  --sm-font-heading-xxlarge: 600 32px/36px "Momo Trust Sans", sans-serif;
  --sm-font-heading-xlarge: 600 28px/32px "Momo Trust Sans", sans-serif;
  --sm-font-heading-large: 600 24px/28px "Momo Trust Sans", sans-serif;
  --sm-font-heading-medium: 600 20px/24px "Momo Trust Sans", sans-serif;
  --sm-font-heading-small: 600 16px/20px "Momo Trust Sans", sans-serif;
  --sm-font-heading-xsmall: 600 14px/20px "Momo Trust Sans", sans-serif;
  --sm-font-heading-xxsmall: 600 12px/16px "Momo Trust Sans", sans-serif;
  --sm-font-body: 400 14px/20px "DM Sans", sans-serif;
  --sm-font-body-large: 400 16px/24px "DM Sans", sans-serif;
  --sm-font-body-small: 400 12px/16px "DM Sans", sans-serif;
  --sm-font-label: 500 14px/20px "DM Sans", sans-serif;
  --sm-font-code: 400 14px/20px ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --sm-health-chip-pad-block: 6px;
  --sm-health-chip-pad-inline: 12px;
  --sm-health-chip-radius: 4px;
  --sm-health-chip-height: 28px;
  --sm-health-chip-gap: 4px;
  --sm-health-chip-font-size: 12px;
  --sm-health-chip-line-height: 16px;
  --sm-health-chip-icon-size: 16px;
  --sm-health-chip-pass-bg: #D3F5EB;
  --sm-health-chip-pass-icon: #15B686;
  --sm-health-chip-pass-text: #0E7959;
  --sm-health-chip-warn-bg: #FFF0DA;
  --sm-health-chip-warn-icon: #E8A239;
  --sm-health-chip-warn-text: #966111;
  --sm-health-chip-red-bg: #FFF0F3;
  --sm-health-chip-red-icon: #EE4925;
  --sm-health-chip-red-text: #CF3210;
  --sm-health-card-min-height: 230px;
  --sm-health-card-icon-size: 32px;
  --sm-health-card-heading-size: 22px;
  --sm-health-card-heading-line-height: 22px;
  --sm-health-card-body-size: 16px;
  --sm-health-card-body-line-height: 21px;
  --sm-health-card-pass-border: rgba(21, 182, 134, 0.22);
  --sm-health-card-pass-bg: #E3F6F0;
  --sm-health-card-pass-text: #0D7254;
  --sm-health-card-warn-border: rgba(255, 170, 0, 0.24);
  --sm-health-card-warn-bg: #FFF1D6;
  --sm-health-card-warn-text: #7D582B;
  --sm-health-card-red-border: rgba(238, 68, 63, 0.22);
  --sm-health-card-red-bg: #FDE9E8;
  --sm-health-card-red-text: #B5312D;
  --sm-icon-search-width: 420px;
  --sm-icon-search-height: 42px;
  --sm-icon-search-pad-block: 10px;
  --sm-icon-search-pad-inline: 14px;
  --sm-icon-search-font-size: 14px;
  --sm-icon-search-line-height: 20px;
  --sm-icon-count-font-size: 13px;
  --sm-icon-count-line-height: 19px;
  --sm-icon-library-tile-size: 72px;
  --sm-icon-library-size: 24px;
  --sm-icon-library-card-shadow-hover: 0 8px 18px rgba(19, 25, 39, 0.08);
  --sm-icon-library-transition-duration: 0.15s;
  --sm-icon-library-lift: -1px;
  --sm-nav-item-height: 44px;
  --sm-nav-item-text-size: var(--sm-type-scale-400);
  --sm-nav-subnav-height: 36px;
  --sm-nav-subnav-text-size: var(--sm-type-scale-300);
  --sm-nav-width: 276px;
  --sm-nav-subnav-width: 264px;
  --sm-nav-offset-top: 164px;
  --sm-nav-idle-text: var(--sm-color-text-inverse-soft);
  --sm-nav-active-bg: var(--sm-color-surface-sidebar-active);
  --sm-nav-subnav-active-bg: var(--sm-color-surface-sidebar-highlight);
  --sm-nav-focus-outline: var(--sm-color-focus-ring-inverse);
  --sm-nav-footer-gap: 14px;
  --sm-nav-logo-slot-width: 150px;
  --sm-nav-logo-slot-height: 46px;
  --sm-nav-logo-slot-text: var(--sm-color-text-inverse-muted);
  --sm-nav-logo-studio-width: 219px;
  --sm-nav-logo-studio-height: 22px;
  --sm-palette-text-light: var(--sm-color-text-contrast-light);
  --sm-palette-text-dark: var(--sm-color-text-contrast-dark);
  --sm-palette-contrast-threshold: 0.45;
  --sm-palette-shadow-hover: var(--sm-shadow-swatch-hover);
  --sm-palette-shadow-focus: var(--sm-shadow-swatch-focus);
  --sm-panel-min-height: 230px;
  --sm-panel-radius: var(--sm-radius-md);
  --sm-panel-blur: 18px;
  --sm-panel-bg: var(--sm-color-surface-card);
  --sm-panel-bg-strong: var(--sm-color-surface-card-strong);
  --sm-panel-shadow: var(--sm-shadow-card);
  --sm-panel-shadow-hover: var(--sm-shadow-card-hover);
  --sm-panel-title-size: var(--sm-type-scale-800);
  --sm-panel-title-weight: var(--sm-type-weight-bold);
  --sm-panel-title-leading: var(--sm-type-leading-200);
  --sm-panel-body-size: var(--sm-type-scale-600);
  --sm-panel-body-leading: 21px;
  --sm-preview-min-height: 280px;
  --sm-preview-grid-size: var(--sm-space-8);
  --sm-preview-grid-line: var(--sm-color-border-faint);
  --sm-page-gradient-tint: var(--sm-color-surface-gradient);
  --sm-quicktip-bg: var(--sm-color-feedback-info-surface);
  --sm-quicktip-accent: var(--sm-color-feedback-info-text);
  --sm-quicktip-text: var(--sm-color-text-primary);
  --sm-quicktip-radius: var(--sm-radius-soft);
  --sm-status-chip-pass-bg: var(--sm-color-feedback-pass-surface);
  --sm-status-chip-pass-fg: var(--sm-color-feedback-pass-text);
  --sm-status-chip-warn-bg: var(--sm-color-feedback-warn-surface);
  --sm-status-chip-warn-fg: var(--sm-color-feedback-warn-text);
  --sm-status-chip-red-bg: var(--sm-color-feedback-red-surface);
  --sm-status-chip-red-fg: var(--sm-color-feedback-red-text);
  --sm-status-chip-info-bg: var(--sm-color-feedback-info-surface);
  --sm-status-chip-info-fg: var(--sm-color-feedback-info-text);
  --sm-status-panel-pass-bg: var(--sm-color-feedback-pass-surface);
  --sm-status-panel-pass-accent: var(--sm-color-feedback-pass);
  --sm-status-panel-pass-text: var(--sm-color-feedback-pass-text);
  --sm-status-panel-warn-bg: var(--sm-color-feedback-warn-surface);
  --sm-status-panel-warn-accent: var(--sm-color-feedback-warn);
  --sm-status-panel-warn-text: var(--sm-color-feedback-warn-text);
  --sm-status-panel-red-bg: var(--sm-color-feedback-red-surface);
  --sm-status-panel-red-accent: var(--sm-color-feedback-red);
  --sm-status-panel-red-text: var(--sm-color-feedback-red-text);
  --sm-status-panel-info-bg: var(--sm-color-feedback-info-surface);
  --sm-status-panel-info-accent: var(--sm-color-feedback-info);
  --sm-status-panel-info-text: var(--sm-color-feedback-info-text);
  --sm-status-bar-height: 44px;
  --sm-table-cell-pad: var(--sm-space-4);
  --sm-table-header-size: var(--sm-type-scale-300);
  --sm-table-min-width: 760px;

  /* layout layer */
  --sm-layout-canvas-width: 1440px;
  --sm-layout-canvas-height: 1024px;
  --sm-layout-sidebar-width: 324px;
  --sm-layout-sidebar-width-narrow: 292px;
  --sm-layout-sidebar-pad: var(--sm-space-6);
  --sm-layout-content-max: 1180px;
  --sm-layout-content-max-wide: 1320px;
  --sm-layout-content-drawn-width: 956px;
  --sm-layout-content-column-width: 632px;
  --sm-layout-header-height: 72px;
  --sm-layout-module-gap: var(--sm-space-12);
  --sm-layout-page-pad-x: var(--sm-space-20);
  --sm-layout-page-pad-x-narrow: var(--sm-space-12);
  --sm-layout-page-pad-x-wide: var(--sm-space-28);
  --sm-layout-page-pad-top: var(--sm-space-14);
  --sm-layout-page-pad-bottom: var(--sm-space-28);
  --sm-layout-page-pad-bottom-short: var(--sm-space-24);
  --sm-layout-ratio-image: 1.5;
  --sm-layout-ratio-feature: 1.55;
  --sm-layout-ratio-slide: 16 / 9;
  --sm-layout-deck-canvas-width: 1920px;
  --sm-layout-deck-canvas-height: 1080px;
  --sm-layout-deck-columns: 4;
  --sm-layout-deck-rows: 6;
  --sm-layout-deck-margin: var(--sm-space-16);
  --sm-layout-deck-gutter: var(--sm-space-8);
  --sm-layout-bento-stat-min-height: 180px;
  --sm-layout-bento-feature-min-height: 240px;
  --sm-layout-bento-step-min-height: 120px;
  --sm-layout-bento-summary-min-height: 230px;
  --sm-breakpoint-large: 1600px;
  --sm-breakpoint-content: 1180px;
  --sm-breakpoint-wide: 1920px;
  --sm-breakpoint-desktop: 1440px;
  --sm-breakpoint-laptop: 1024px;
  --sm-breakpoint-tablet: 810px;
  --sm-breakpoint-phone: 390px;
  --sm-breakpoint-height-short: 820px;
}