/*
 * tokens.css — GENERATED FILE. DO NOT EDIT.
 *
 * Source of truth: tero-app/src/theme/variables.css
 * Regenerate with: node scripts/sync-design-library.mjs
 *
 * These are the live Tero design tokens. Mockups must use --tero-* tokens only.
 */

:root {
    --side-menu-width: 15.5625rem;
    --side-menu-width-collapsed: 3.75rem;
    --tero-palette-blue: #011830;
    --tero-palette-light-blue: #0090D9;
    --tero-palette-gray: #D2D9E1;
    /* Semantic color aliases (literal values; formerly bridged to the Ionic palette) */
    --tero-color-primary: #1E2A3A;
    --tero-color-primary-contrast: #FAFAFA;
    --tero-color-danger: #E12661;
    --tero-color-secondary: #00B3C2;
    --tero-color-tertiary: #0090D9;
    --tero-color-success: #22C55E;
    --tero-color-warning: #E19326;
    --tero-color-medium: #AFAFAF;
    --tero-color-light: #F7F7F7;
    --tero-color-dark: #2A2A2A;
    --tero-color-on-danger: #fff;
    --tero-color-toggle-knob: #fff;
    /* RGB triplets for rgba() usage in pill backgrounds */
    --tero-color-primary-rgb: 13, 53, 88;
    --tero-color-secondary-rgb: 0, 179, 194;
    --tero-color-tertiary-rgb: 0, 144, 217;
    --tero-color-success-rgb: 34, 197, 94;
    --tero-color-warning-rgb: 225, 147, 38;
    --tero-color-danger-rgb: 225, 38, 97;
    --tero-color-medium-rgb: 175, 175, 175;
    --tero-color-dark-rgb: 42, 42, 42;
    /* Shade variants for text on colored backgrounds */
    --tero-color-primary-shade: #2a5a83;  /* ~12% darker than #3470a4 */
    --tero-color-primary-tint: #5a8fba;  /* ~10% lighter than #3470a4 */
    --tero-color-secondary-shade: #009fae;
    --tero-color-tertiary-shade: #0080c0;
    --tero-color-success-shade: #166534;
    --tero-color-warning-shade: #92400e;
    --tero-color-danger-shade: #9f1239;
    --tero-color-medium-shade: #9a9a9a;
    --tero-color-light-shade: #d9d9d9;
    /* Theme-dependent successors to the retired --ion-* pairs (dark halves in body.dark).
       Not foldable into the same-named aliases above - those are theme-static by measurement;
       these must flip with the theme for their element-level consumers (reset.css, 2FA/OTP). */
    /* Equals --tero-palette-blue by value in the light half only - do NOT alias it: the dark half is #e0e0e0. */
    --tero-color-brand-ink: #011830;           /* ex --ion-color-primary (brand navy ink) */
    /* Themed (light/dark) border token. NOT the StatusChip neutral palette (--tero-color-neutral-bg/-text below). */
    --tero-color-neutral-shade: #d9d9d9;       /* ex --ion-color-light-shade (the alias above is static) */
    /* Document ground: the body background. NOT --tero-bg-white - same values today, different contract. */
    --tero-bg-body: #ffffff;                   /* ex --ion-background-color (document ground, reset.css body) */
    /* Document ground: the body text colour. NOT --tero-text-primary - a different value in the light half. */
    --tero-text-body: #1a1a1a;                 /* ex --ion-text-color (document text, reset.css body) */
    /* Selection — an item chosen out of a group of options (dropdown/menu rows, filter facets, etc.).
       Deliberately NOT --tero-color-primary: that navy is reserved for brand framing (logo, AG Grid
       header) and quick-attention primary actions (the Create button); using it for "selected" dilutes
       that and stacks harshly when several options are selected at once (multi-select). */
    --tero-color-selected: #6a7788;  /* muted slate-blue; white text clears WCAG AA (4.6:1) */
    --tero-color-selected-contrast: #ffffff;
    --tero-color-selected-shade: #616c7b;  /* ~10% darker than #6a7788 — hover on an already-selected row (5.3:1) */
    /* Intent light tint backgrounds (palette A2 icon containers, StatusChip, etc.) */
    --tero-color-primary-light: #e5f3fb;
    --tero-color-success-light: #e6f4ea;
    --tero-color-warning-light: #fef7e0;
    --tero-color-danger-light: #fce8e6;
    --tero-color-secondary-light: #e0f5f7;
    /* StatusChip neutral palette, theme-static. A different family from the themed --tero-color-neutral-shade above. */
    --tero-color-neutral-bg: #f1f5f9;
    --tero-color-neutral-text: #475569;
    /* Status intent colors — semantic aliases for PillCellRenderer color maps.
       Used as --pill-color (text + color-mix background tint). */
    --tero-status-warning: var(--tero-color-warning);    /* #E19326 */
    --tero-status-primary: var(--tero-color-primary);    /* #1E2A3A */
    --tero-status-success: var(--tero-color-success);    /* #22C55E */
    --tero-status-medium: var(--tero-color-medium);      /* #AFAFAF */
    --tero-status-danger: #dc2626;
    --tero-status-info: #2563eb;
    /* Status background tints — light washes behind icon containers */
    --tero-status-success-bg: #f0fdf4;
    --tero-status-warning-bg: #fffbeb;
    --tero-status-danger-bg: #fef2f2;
    --tero-status-info-bg: #eff6ff;
    --tero-status-info-border: rgba(37, 99, 235, 0.35);   /* faded info-blue hairline; #2563eb @ 35% */
    --tero-skeleton-bg: #d8dde3;
    /* Focus ring — semi-transparent primary for :focus-visible box-shadow */
    --tero-focus-ring: rgba(30, 42, 58, 0.2);
    /* Focus ring — danger variant for error-state inputs */
    --tero-focus-ring-danger: color-mix(in srgb, var(--tero-color-danger) 20%, transparent);
    --white-background: #FAFAFA;
    --background-clear: var(--white-background);
    --background-grey: #F9FBFC;
    --border-grey: #E2E8F0;
    --border-color: #E2E8F0;
    /* ========================================
       TERO DESIGN SYSTEM - Additional Variables
       ======================================== */
    /* Spacing Scale
       8px base scale following common design system patterns */
    --tero-spacing-xs: 0.25rem;    /* 4px */
    --tero-spacing-sm: 0.5rem;     /* 8px */
    --tero-spacing-md: 0.75rem;    /* 12px */
    --tero-spacing-lg: 1rem;       /* 16px */
    --tero-spacing-xl: 1.5rem;     /* 24px */
    --tero-spacing-2xl: 2rem;      /* 32px */
    --tero-spacing-3xl: 3rem;      /* 48px */
    /* Fine-grained spacing — sub-4px. Use sparingly. */
    --tero-spacing-pill-seam: 2px;   /* gap between pill segments / tight vertical stacks */
    --tero-spacing-icon-gap: 6px;    /* icon-to-label gap on buttons and inline icon rows */
    /* Z-Index Scale
       Consistent layering hierarchy */
    --tero-z-base: 1;
    --tero-z-dropdown: 1000;
    --tero-z-sticky: 1020;
    --tero-z-fixed: 1030;
    --tero-z-modal-backdrop: 1040;
    --tero-z-modal: 1050;
    --tero-z-popover: 1060;
    /* Base UI Menu positioner — must clear the side panel (--tero-z-side-panel, 1050) so in-panel
       menus paint above it; tiers with Popover (1060), below dialog tiers (10000+ / 25000). */
    --tero-z-menu: 1060;
    --tero-z-tooltip: 1070;
    --tero-z-toast: 1080;
    --tero-z-overlay: 1090;
    --tero-z-cell-editor-menu: var(--tero-z-dropdown);  /* 1000 — portaled select menus in cell editors (Combobox zTier='cell', Phase-4 stage 7) */
    /* TODO(z-rescale): lower in the deliberate follow-up of css-architecture.md section 5.6
       ("z-index scale governance"). Target scale, consumer census, owner decisions and the
       verification matrix live in docs/plans/2026-08-21-z-index-rescale.md. The former blocker -
       the legacy IonModal SidePanel (~20000) - is gone (Ionic exit, 2026-08-20), so the trigger has
       fired; per section 5.6 the rescale is its own change, with every consumer verified, never
       folded into unrelated work. */
    --tero-z-confirm: 25000;  /* minted above the removed IonModal tier (~20000); see the TODO above */
    /* TODO(z-rescale): reduce alongside --tero-z-confirm in the section-5.6 follow-up */
    --tero-z-confirm-select: 25001;  /* select popups portaled from within confirm-level dialogs — Combobox zTier='dialog' (menuZIndex callers) */
    /* SidePanel layers */
    --tero-z-side-panel-backdrop: 1040;
    --tero-z-side-panel: 1050;
    /* Portal modals opened from SidePanel - above panel (1050), below confirm (25000).
       TODO(z-rescale): the 10000 tier dates from clearing the removed IonModal range (~20000);
       flatten per css-architecture.md section 5.6 (plan cited at --tero-z-confirm above). */
    --tero-z-above-panel: 10000;
    --tero-z-select-menu: 10001;  /* select popups (Combobox default zTier) — must render above SidePanel */
    /* Text Colors
       Semantic text color aliases */
    --tero-text-primary: #2A2A2A;  /* Default UI text. NOT --tero-text-body, the document ground (#1a1a1a light). */
    --tero-text-secondary: #525252;  /* Strong de-emphasis — darker than muted; use for supporting labels and metadata */
    --tero-text-tertiary: #8a8a8a;  /* Lightest text — decorative/large text only, see WCAG note below */
    --tero-text-muted: #666666;     /* Soft de-emphasis — lighter than secondary; use for hints, placeholders, disabled */
    --tero-text-light: #848d9a;
    --tero-text-link: #0090D9;
    --tero-text-inverse: #ffffff;  /* White text for use on colored backgrounds (pills, bars) */
    --tero-text-error: #B91C4B;    /* Darker, stronger red */
    --tero-text-success: #15803D;  /* Slightly deeper green for balance */
    --tero-text-warning: #D97706;  /* Slightly darker amber, lighter than error */
    /* Background Colors
       Extended background color palette */
    --tero-bg-white: #fff;  /* Surface white. NOT --tero-bg-body, the document ground - same values, different contract. */
    --tero-bg-lightest: #fafafa;
    --tero-bg-lighter: #f8f9fa;
    --tero-bg-light: #f1f3f5;
    --tero-bg-grey: var(--background-grey);
    --tero-bg-dark: #e9ecef;
    --tero-bg-darker: #dee2e6;
    --tero-bg-overlay: rgba(0, 0, 0, 0.5);
    --tero-bg-scrim: rgba(255, 255, 255, 0.9);  /* Full-screen frosted status scrim (Overlay) — white-frost, not the dark modal backdrop */
    /* Interactive surface tokens */
    --tero-bg-surface: var(--tero-bg-white);       /* Default container background (dropdowns, cards) */
    --tero-bg-hover: var(--tero-bg-light);         /* Interactive item hover state */
    --tero-ghost-hover-bg: rgba(0, 0, 0, 0.05);   /* Ghost button hover background */
    --tero-border-default: var(--tero-border-light); /* Standard component border */
    /* Overlay tokens */
    --tero-overlay-light: rgba(255, 255, 255, 0.2);        /* Light overlay on dark surfaces */
    --tero-overlay-light-strong: rgba(255, 255, 255, 0.35); /* Stronger light overlay — active/pressed states */
    --tero-overlay-dark-strong: rgba(0, 0, 0, 0.85);       /* Heavy dark overlay — lightbox backdrop */
    --tero-bg-brand-dark: #1a1a2e;  /* Dark navy – panel accent bar */
    /* On-dark surface tokens — for interactive elements on --tero-bg-brand-dark */
    --tero-on-dark-text: rgba(255, 255, 255, 0.7);
    --tero-on-dark-text-hover: #fff;
    --tero-on-dark-text-muted: rgba(255, 255, 255, 0.25);  /* inactive/disabled state on dark surfaces */
    --tero-on-dark-hover-bg: rgba(255, 255, 255, 0.12);
    --tero-on-dark-separator: rgba(255, 255, 255, 0.2);
    /* Border Colors
       Consistent border color palette */
    --tero-border-lightest: #f1f3f5;
    --tero-border-light: var(--border-grey);
    --tero-border-medium: #cbd5e0;
    --tero-border-dark: #a0aec0;
    --tero-border-darker: #718096;
    --tero-border-grid: rgba(1, 24, 48, 0.15);  /* Brand navy at 15% — AG Grid row/cell borders */
    --tero-border-width-pinned: 2px;  /* Pinned column separator width in AG Grid */
    /* Shadow Scale
       Elevation system for depth */
    --tero-shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --tero-shadow-sm: 0 2px 4px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
    --tero-shadow-md: 0px 4px 6px -1px rgba(0, 0, 0, 0.1), 0px 2px 4px -2px rgba(0, 0, 0, 0.1);
    --tero-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    --tero-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    --tero-shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    --tero-shadow-dropdown: 0 4px 12px rgba(0, 0, 0, 0.1);  /* soft single-layer shadow for portaled dropdowns and menus */
    --tero-shadow-lift: 0 1px 3px rgba(1, 24, 48, 0.08), 0 4px 12px rgba(1, 24, 48, 0.04);  /* subtle double shadow for elevated panels */
    /* Downward-only shadows — for bars/headers that cast shadow onto content below.
       Pair with clip-path: inset(0 0 -Xpx 0) on the element to clip lateral bleed. */
    --tero-shadow-down-sm: 0 2px 4px rgba(0, 0, 0, 0.15);
    --tero-shadow-down-md: 0 2px 8px rgba(0, 0, 0, 0.5);
    /* Border Radius Scale
       Consistent rounding */
    --tero-radius-none: 0;
    --tero-radius-sm: 0.25rem;   /* 4px */
    --tero-radius-md: 0.375rem;  /* 6px */
    --tero-radius-lg: 0.5rem;    /* 8px */
    --tero-radius-xl: 0.75rem;   /* 12px */
    --tero-radius-2xl: 1rem;     /* 16px */
    --tero-radius-full: 9999px;
    /* Font Sizes
       Type scale — --tero-text-base (14px) is the app's body size */
    --tero-text-xxs: 0.625rem;   /* 10px */
    --tero-text-2xs: 0.6875rem;  /* 11px — badge labels, compact nav, timeline labels */
    --tero-text-xs: 0.75rem;     /* 12px */
    --tero-text-sm-plus: 0.8125rem; /* 13px — timeline entry labels, between text-xs and text-base */
    --tero-text-base: 0.875rem;  /* 14px — app body size */
    --tero-text-md: 1rem;        /* 16px — headings, leads */
    --tero-text-lg: 1.125rem;    /* 18px */
    --tero-text-xl: 1.25rem;     /* 20px */
    --tero-text-2xl: 1.5rem;     /* 24px */
    --tero-text-3xl: 1.875rem;   /* 30px */
    --tero-text-4xl: 2.25rem;    /* 36px */
    /* DEPRECATED: --tero-text-sm aliases --tero-text-base. Use --tero-text-base for new code. */
    --tero-text-sm: var(--tero-text-base);
    /* Font Family */
    --tero-font-family: 'DM Sans', ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    /* Font Weights */
    --tero-font-light: 300;
    --tero-font-normal: 400;
    --tero-font-medium: 500;
    --tero-font-semibold: 600;
    --tero-font-bold: 700;
    --tero-font-black: 900;
    /* Line Height (Leading) */
    --tero-leading-normal: 1.4;    /* Body text, descriptions, form labels */
    --tero-leading-relaxed: 1.5;   /* Dialog body text, multi-line content */
    --tero-leading-loose: 1.6;     /* Long-form content, announcements */
    /* Letter Spacing */
    --tero-letter-spacing-label: 0.5px;
    /* Component sizing */
    --tero-size-icon-button: 1.75rem;      /* 28px — compact icon-only buttons */
    --tero-size-icon-pill: 0.875rem;       /* 14px — icons inside pills / segmented controls */
    --tero-size-icon-badge: 0.75rem;       /* 12px — icons inside badges / inline status pills */
    --tero-size-control-height: 2.125rem;  /* 34px — filter controls, small inputs */
    /* Form controls — standard inputs (36px). See --tero-size-control-height for compact controls (34px). */
    --tero-size-form-control-height: 2.25rem;  /* 36px */
    /* Dialog width — canonical fixed width for all modal dialogs */
    --tero-size-dialog-width: 28rem;
    --tero-size-dialog-width-wide: 36.5rem;  /* 584px */
    --tero-size-input-compact-md: 4.5rem;    /* 72px — compact numeric inputs in dialogs */
    --tero-size-menu-min-width: 8.75rem;   /* 140px — dropdown menus */
    --tero-size-pill-height: 1.375rem;     /* 22px — compact pill max height */
    --tero-size-spinner: 0.875rem;         /* 14px — inline loading spinner */
    --tero-size-search-min-width: 200px;   /* search input minimum width */
    --tero-size-ag-header-height: 32px;    /* AG Grid header row height */
    --tero-size-panel-accent-bar: 2.5rem;
    --tero-size-panel-separator: 1.125rem;
    --tero-size-side-panel-width: 40rem;
    /* Page layout */
    --tero-size-page-narrow: 37.5rem;          /* 600px */
    /* Avatar */
    --tero-size-avatar-md: 3rem;               /* 48px */
    /* Toggle switch */
    --tero-size-toggle-width: 2.75rem;         /* 44px */
    --tero-size-toggle-height: 1.5rem;         /* 24px */
    --tero-size-toggle-knob: 1.25rem;          /* 20px */
    --tero-size-toggle-knob-offset: 0.125rem;  /* 2px */
    /* Breakpoint (documented; cannot be used in @media directly) */
    --tero-breakpoint-sm: 30rem;               /* 480px */
    /* Selection */
    --tero-bg-selected: #e4e7eb;  /* Light grey, darker than row hover */
    /* Table header */
    --tero-bg-table-header: #1E2A3A;  /* AG Grid header — dark blue-grey */
    /* Transitions
       Consistent animation timing */
    --tero-transition-fast: 150ms ease;
    --tero-transition-base: 200ms ease;
    --tero-transition-slow: 300ms ease;
    --tero-transition-slower: 500ms ease;
    /* SidePanel motion */
    --tero-transition-panel-enter: 250ms ease-out;
    --tero-transition-panel-exit: 200ms ease-out;
    --tero-transition-panel-content: 150ms ease-out;  /* mode-swap fade */
    --tero-transition-panel-slide: 200ms ease-out;     /* stack push/pop */
    --tero-transition-expand: 240ms cubic-bezier(0.05, 0.7, 0.1, 1.0);   /* MD3 emphasizedDecelerate */
    --tero-transition-collapse: 180ms cubic-bezier(0.3, 0.0, 0.8, 0.15); /* MD3 emphasizedAccelerate */
    --tero-transition-highlight: 600ms ease-out;       /* section nav feedback flash */
    /* Modal motion */
    --tero-transition-modal-enter: 200ms ease-out;
    --tero-transition-modal-exit: 150ms ease-in;
    /* Anchored popup motion (Base UI Popover/Menu surface — PopupSurface.module.css) */
    --tero-transition-popup: 120ms ease;
    /* Scrollbar */
    --tero-scrollbar-thumb: #b0b0b0;
    --tero-scrollbar-thumb-hover: #999999;
    /* Overlay */
    --tero-bg-overlay-light: rgba(0, 0, 0, 0.4);
}

/* Dark theme — apply by adding class="dark" to <body>. */
body.dark {
    --tero-color-primary: #1e3a5c;
    --tero-color-primary-tint: #2a4f78;
    /* Dark halves of the theme-dependent --ion-* successors declared in :root */
    --tero-color-brand-ink: #e0e0e0;
    --tero-color-neutral-shade: #383838;
    --tero-bg-body: #161616;
    --tero-text-body: #e4e4e4;
    /* Core backgrounds */
    --white-background: #161616;
    --background-clear: #161616;
    --background-grey: #1e1e1e;
    /* Tero background tokens */
    --tero-bg-white: #161616;
    --tero-bg-lightest: #1a1a1a;
    --tero-bg-lighter: #1e1e1e;
    --tero-bg-light: #262626;
    --tero-bg-grey: #222222;
    --tero-bg-dark: #333333;
    --tero-bg-darker: #444444;
    --tero-bg-overlay: rgba(0, 0, 0, 0.7);
    --tero-bg-scrim: rgba(22, 22, 22, 0.9);  /* dark frosted status scrim (Overlay) */
    /* Interactive surface tokens */
    --tero-bg-surface: var(--tero-bg-lighter);       /* dark container bg */
    --tero-bg-hover: var(--tero-bg-light);           /* dark hover state */
    --tero-ghost-hover-bg: rgba(255, 255, 255, 0.08); /* ghost hover on dark backgrounds */
    --tero-border-default: var(--tero-border-light); /* dark border */
    /* Overlay tokens — dark mode */
    --tero-overlay-dark-strong: rgba(0, 0, 0, 0.92);  /* heavier in dark mode */
    --tero-bg-brand-dark: #0f0f1e;  /* Dark navy – panel accent bar (darker in dark mode) */
    /* On-dark surface tokens — same values work on the darker dark-mode accent bar */
    --tero-on-dark-text: rgba(255, 255, 255, 0.7);
    --tero-on-dark-text-hover: #fff;
    --tero-on-dark-text-muted: rgba(255, 255, 255, 0.25);
    --tero-on-dark-hover-bg: rgba(255, 255, 255, 0.12);
    --tero-on-dark-separator: rgba(255, 255, 255, 0.2);
    /* Tero text tokens */
    --tero-text-primary: #e4e4e4;
    --tero-text-secondary: #b0b0b0;  /* Strong de-emphasis — brighter than muted in dark mode; use for supporting labels and metadata */
    --tero-text-tertiary: #707070;   /* Lightest text — decorative/large text only, fails AA for body text on dark backgrounds */
    --tero-text-inverse: #1a1a1a;  /* Dark text for use on colored backgrounds in dark mode */
    --tero-text-muted: #888888;      /* Soft de-emphasis — dimmer than secondary; use for hints, placeholders, disabled */
    --tero-text-light: #7a7f88;
    --tero-text-error: #FB7185;    /* Bright but not neon pink */
    --tero-text-warning: #FBBF24;  /* Warm amber, clearly distinct */
    --tero-text-success: #4ade80;  /* Bright green for dark backgrounds */
    /* Tero border tokens */
    --border-grey: #333333;
    --border-color: #333333;
    --tero-border-lightest: #282828;
    --tero-border-light: #333333;
    --tero-border-medium: #444444;
    --tero-border-dark: #555555;
    --tero-border-darker: #666666;
    /* Tero scrollbar */
    --tero-scrollbar-thumb: #505050;
    --tero-scrollbar-thumb-hover: #666666;
    /* Status tokens — dark mode overrides */
    --tero-status-danger: #f87171;
    --tero-status-info: #60a5fa;
    --tero-status-success-bg: rgba(34, 197, 94, 0.15);
    --tero-status-warning-bg: rgba(245, 158, 11, 0.15);
    --tero-status-danger-bg: rgba(248, 113, 113, 0.15);
    --tero-status-info-bg: rgba(96, 165, 250, 0.15);
    --tero-status-info-border: rgba(96, 165, 250, 0.35);  /* faded info-blue hairline; #60a5fa @ 35% */
    /* Urgency shade tokens — dark mode overrides (lighter for readability on dark bg) */
    --tero-color-danger-shade: #f87171;   /* matches --tero-status-danger */
    --tero-color-warning-shade: #f59e0b;  /* amber-500 — visible on dark bg */
    /* Skeleton */
    --tero-skeleton-bg: #333333;
    /* Focus ring — lighter for dark backgrounds */
    --tero-focus-ring: rgba(200, 210, 220, 0.25);
    /* Focus ring — danger variant; slightly stronger mix for visibility on dark bg */
    --tero-focus-ring-danger: color-mix(in srgb, var(--tero-color-danger) 30%, transparent);
    /* Selection */
    --tero-bg-selected: rgba(0, 144, 217, 0.15);
    /* Table header */
    --tero-bg-table-header: var(--tero-color-primary);
    /* Shadows — stronger for dark backgrounds */
    --tero-shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.4), 0 1px 2px 0 rgba(0, 0, 0, 0.3);
    --tero-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -1px rgba(0, 0, 0, 0.3);
    --tero-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.4), 0 4px 6px -2px rgba(0, 0, 0, 0.2);
    --tero-shadow-down-sm: 0 2px 4px rgba(0, 0, 0, 0.25);
    --tero-shadow-down-md: 0 2px 8px rgba(0, 0, 0, 0.6);
    /* Overlay */
    --tero-bg-overlay-light: rgba(0, 0, 0, 0.5);
}