/*
 * Omnx Flow — design tokens (token-native from day one)
 * ---------------------------------------------------------------------------
 * The single source of truth for design tokens. Every colour, spacing, radius,
 * shadow, z-index and duration the app paints with is declared HERE and
 * consumed everywhere else through var(--*).
 *
 * DESIGN LANGUAGE v2 (owner directive 2026-09-17, stream design-language-v2):
 * the etcX pastel-Material dark look is replaced by one near-black system
 * shared by every surface -- console, admin, staff PWA, setup, onboarding,
 * sign-in and feedback:
 *
 *   ELEVATION, NOT BORDERS. Four surface steps (canvas, bar, tile, card)
 *   say what is a card; the hairline (--line) is a whisper kept only for
 *   interactive edges and nested containers.
 *   ONE ACCENT. --primary is the one blue, used for the action that matters
 *   on a screen, the active item and links. Buttons FILL with --accent-fill,
 *   a deeper step of the same hue that carries white text at AA (4.8:1);
 *   --primary itself is for text and icons on a dark ground (5:1).
 *   STATUS MEANS A VERDICT. Green / amber / red are never a series, never
 *   decoration: a covered night, a breach, an overdue item.
 *   SHIFT FAMILIES. A shift pill wears a calm categorical hue by its window
 *   (day / late / night / leave), the same on the console grid, the phone's
 *   week strip and the calendar, so a person learns one vocabulary.
 *   BIG TABULAR NUMBERS, SMALL LABELS. The type scale is used top to bottom;
 *   caveats survive as captions at --text-xs, never at body size.
 *
 * Four layers, as before:
 *   1. The canonical --md-sys-* palette (the names the sheets consume).
 *   2. A short alias layer (--primary / --text-primary / --surface / ...).
 *   3. Semantic + control tokens (status colours, form & button controls).
 *   4. The app's own families (accent tints, legacy surfaces, chart layer,
 *      shift families).
 * Section 6 restates every family for the LIGHT theme.
 *
 * RULE: this is the ONLY stylesheet allowed to contain raw hex / rgba palette
 * literals. Every other sheet must consume var(--*) tokens.
 */

:root {
  /* ---- 1. Canonical palette -------------------------------------------- */
  --md-sys-color-primary: #4f8ff7;
  --md-sys-color-on-primary: #ffffff;
  --md-sys-color-primary-container: #1b3765;
  --md-sys-color-on-primary-container: #d6e4ff;

  --md-sys-color-secondary: #a3a9b1;
  --md-sys-color-on-secondary: #17191c;
  --md-sys-color-secondary-container: #2a3139;
  --md-sys-color-on-secondary-container: #d9dee4;

  --md-sys-color-tertiary: #c58af9;
  --md-sys-color-on-tertiary: #2b1741;
  --md-sys-color-tertiary-container: #3d2a58;
  --md-sys-color-on-tertiary-container: #ecdcff;

  /* The four surface STEPS. surface = the canvas; the ramp climbs from it. */
  --md-sys-color-surface: #0c0f13;
  --md-sys-color-surface-dim: #08090b;
  --md-sys-color-surface-bright: #2a3037;

  --md-sys-color-surface-container-lowest: #0c0f13;
  --md-sys-color-surface-container-low: #12161b;
  --md-sys-color-surface-container: #171c22;
  --md-sys-color-surface-container-high: #1d232a;
  --md-sys-color-surface-container-highest: #252c34;

  --md-sys-color-on-surface: #e8eaed;
  --md-sys-color-on-surface-variant: #a3a9b1;
  --md-sys-color-outline: #6e757e;
  --md-sys-color-outline-variant: #242a31;

  --md-sys-elevation-1: 0 1px 2px rgba(0, 0, 0, 0.35);
  --md-sys-elevation-2: 0 2px 8px rgba(0, 0, 0, 0.35);
  --md-sys-elevation-3: 0 4px 12px rgba(0, 0, 0, 0.40);
  --md-sys-elevation-4: 0 6px 10px 4px rgba(0, 0, 0, 0.18), 0 2px 3px rgba(0, 0, 0, 0.30);
  --md-sys-elevation-5: 0 8px 12px 6px rgba(0, 0, 0, 0.18), 0 4px 4px rgba(0, 0, 0, 0.30);

  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --spacing-xl: 32px;
  /* The steps BETWEEN the named rungs, named by value. Measured 2026-09-09:
   * 232 declarations sat on 2/6/10/12/14/20px because the five names above
   * had no rung there. Do NOT add a rung for a value that is not already in
   * use -- round to a step. */
  --space-2: 2px;
  --space-6: 6px;
  --space-10: 10px;
  --space-12: 12px;
  --space-14: 14px;
  --space-20: 20px;

  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 28px;
  --radius-pill: 999px;

  /* Motion primitives — durations and easing split out so @keyframes-based
   * animation: lines can consume them too (transition-* bundles them). */
  --duration-fast: 150ms;
  --duration-normal: 250ms;
  --duration-slow: 350ms;
  --duration-slower: 600ms;   /* a ripple, a settle */
  --duration-loop: 1.4s;      /* one cycle of an indefinite spinner or shimmer */
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --transition-fast: var(--duration-fast) var(--ease-standard);
  --transition-normal: var(--duration-normal) var(--ease-standard);
  --transition-slow: var(--duration-slow) var(--ease-standard);

  /* Type scale — the ONLY font sizes component sheets may use. Weights ride
   * Roboto's 400/500/700 (600 falls back to 700 for labels). Headings carry
   * --tracking-tight; uppercase micro-labels carry --tracking-caps. */
  --text-2xs: 10px;   /* chart axis text, chip labels */
  --text-xs: 11px;    /* uppercase table headers, KPI labels, captions */
  --text-sm: 12px;    /* secondary body, notes, badges */
  --text-md: 13px;    /* primary UI body (tables, forms, buttons) */
  --text-base: 14px;  /* prose body, inputs on desktop */
  --text-lg: 16px;    /* card titles, emphasised body */
  --text-xl: 18px;    /* section headings */
  --text-2xl: 20px;   /* page/modal headings */
  --text-3xl: 24px;   /* hero numbers (KPI values, login title) */
  --text-4xl: 28px;   /* stat showpieces */
  --text-display: 32px; /* hero numbers (next-shift time), empty-state glyphs */
  --text-hero: 40px;    /* the phone's next-shift time */
  --tracking-caps: 0.06em;   /* letter-spacing for uppercase micro-labels */
  --tracking-tight: -0.01em; /* headings and display numbers */

  /* Z-index scale — layer order DECLARED once. */
  --z-lift: 1;      /* inside a component's own stacking context: over a sibling */
  --z-lift-2: 2;    /* ... and over THAT (a sticky header over a lifted cell) */
  --z-raised: 10;
  --z-sticky: 100;
  --z-nav: 200;
  --z-sheet: 300;
  --z-modal: 10000;
  --z-toast: 20000;

  /* Overlay scrims + pop shadows. */
  --overlay-scrim: rgba(0, 0, 0, 0.6);
  --overlay-scrim-heavy: rgba(0, 0, 0, 0.7);
  --shadow-pop: 0 12px 32px rgba(0, 0, 0, 0.55);
  --shadow-nav-up: 0 -2px 10px rgba(0, 0, 0, 0.4);
  --shadow-inset-well: none;
  --shadow-active-tab: none;

  /* Minimum touch target (WCAG 2.5.8 / field use with gloves). */
  --touch-target: 44px;

  /* ---- Safe areas and the shell's own height ----------------------------
   * env(safe-area-inset-*) reads 0 in a browser tab and non-zero only in an
   * INSTALLED PWA on a device with a notch or a home indicator -- and only
   * when the page also sets viewport-fit=cover, which every page here does. */
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --top-bar-height: 52px;
  --top-bar-total: calc(52px + env(safe-area-inset-top, 0px));

  /* ---- 2. Alias layer — short names consumed across the codebase ---- */
  --primary: var(--md-sys-color-primary);
  --primary-color: var(--md-sys-color-primary);
  --on-primary: var(--md-sys-color-on-primary);
  /* The FILL for a primary button and any solid accent block: a deeper step
   * of the one blue so white text on it clears AA. --primary is for text
   * and icons; a fill never uses --primary directly. */
  --accent-fill: #2f6fe4;
  --accent-fill-hover: #3a7af0;
  --on-accent-fill: #ffffff;
  --secondary: var(--md-sys-color-secondary);
  --tertiary: var(--md-sys-color-tertiary);
  --surface: var(--md-sys-color-surface);
  --surface-container: var(--md-sys-color-surface-container);
  --text-primary: var(--md-sys-color-on-surface);
  --text-secondary: var(--md-sys-color-on-surface-variant);
  --border-color: var(--md-sys-color-outline-variant);
  --error: #ff6b6b;
  --success: #3ccf8e;
  --warning: #f2b544;
  --info: var(--md-sys-color-primary);

  /* ---- 3a. Status palette — the documented convention (bg .14 / border .40) ---- */
  --status-success: #3ccf8e;
  --status-success-bg: rgba(60, 207, 142, 0.14);
  --status-success-border: rgba(60, 207, 142, 0.40);
  --status-warning: #f2b544;
  --status-warning-bg: rgba(242, 181, 68, 0.14);
  --status-warning-border: rgba(242, 181, 68, 0.40);
  --status-danger: #ff6b6b;
  --status-danger-bg: rgba(255, 107, 107, 0.14);
  --status-danger-border: rgba(255, 107, 107, 0.40);
  --status-info: #4f8ff7;
  --status-info-bg: rgba(79, 143, 247, 0.14);
  --status-info-border: rgba(79, 143, 247, 0.40);
  --status-neutral: #8b939c;
  --status-neutral-bg: rgba(139, 147, 156, 0.14);
  --status-neutral-border: rgba(139, 147, 156, 0.36);

  /* ---- 3b. Form-control tokens (consumed by components/forms.css) ---- */
  --form-radius: var(--radius-sm);
  --form-pad-y: 8px;
  --form-pad-x: 12px;
  --form-bg: var(--md-sys-color-surface-container-low);
  --form-border: var(--md-sys-color-outline-variant);
  --form-border-hover: var(--md-sys-color-outline);
  --form-focus: var(--md-sys-color-primary);
  --form-text: var(--md-sys-color-on-surface);
  --form-placeholder: var(--md-sys-color-on-surface-variant);

  /* ---- 3c. Button-control tokens (consumed by components/buttons.css) ---- */
  --btn-radius: var(--radius-sm);
  --btn-pad-y: 8px;
  --btn-pad-x: 14px;
  --btn-font: 500 13px/1.2 'Roboto', system-ui, sans-serif;
  --icon-btn-size: 36px;
  --icon-btn-radius: var(--radius-sm);

  /* ---- 3d. Shared focus ring (a11y) ---- */
  --focus-ring: 2px solid var(--md-sys-color-primary);
  --focus-ring-offset: 2px;

  /* =========================================================================
   * ---- 4. The app's own families.
   * ========================================================================= */

  /* Accent-tint ladder — rgba of --primary. Suffix = alpha in hundredths. */
  --accent-tint-03: rgba(79, 143, 247, 0.03);
  --accent-tint-04: rgba(79, 143, 247, 0.04);
  --accent-tint-05: rgba(79, 143, 247, 0.05);
  --accent-tint-06: rgba(79, 143, 247, 0.06);
  --accent-tint-08: rgba(79, 143, 247, 0.08);
  --accent-tint-10: rgba(79, 143, 247, 0.10);
  --accent-tint-12: rgba(79, 143, 247, 0.12);
  --accent-tint-15: rgba(79, 143, 247, 0.15);
  --accent-tint-20: rgba(79, 143, 247, 0.20);
  --accent-tint-30: rgba(79, 143, 247, 0.30);
  --accent-tint-40: rgba(79, 143, 247, 0.40);

  /* The neutral surfaces the chrome is painted with. These ARE the surface
   * steps under their working names: well = canvas, bar = the chrome, panel
   * = a card, hover = a raised state. A tile (a quiet stat block) sits on
   * --surface-tile, one step above the card it lives in. */
  --surface-well: #0c0f13;      /* the canvas: page background, content wells */
  --surface-bar: #111519;       /* top bar, rail, bottom tab bar, sticky heads */
  --surface-panel: #171c22;     /* a card, a sheet, a dialog, a dropdown */
  --surface-tile: #1d232a;      /* a quiet tile inside a card */
  --surface-hover: #232930;     /* hover / pressed on a card */
  --surface-sheen: #2c333b;     /* shimmer highlight stop */
  --line: #232930;              /* the hairline: a whisper, one step off the card */
  --line-strong: #323942;       /* an interactive edge (input, focused cell) */

  /* The muted text ramp. Order is placeholder < muted < muted-2 < secondary,
   * and every step passes AA at 11px on the canvas (#0c0f13). */
  --text-muted: #7f868f;        /* table headers (11px uppercase), captions, dim icons */
  --text-muted-2: #939aa3;      /* tab labels, section body copy, empty-state text */
  --text-placeholder: #7a818b;  /* input placeholders, empty-state hints */

  /* Panel gradient — kept as a name because sheets consume it; it is now a
   * flat card surface with the faintest lift, never a visible sweep. */
  --panel-gradient: linear-gradient(135deg, #1a2026 0%, #171c22 100%);

  /* Table chrome — neutral hairlines, never the accent. */
  --table-header-border: rgba(255, 255, 255, 0.10);
  --row-divider: rgba(255, 255, 255, 0.05);

  /* Toast pill. */
  --toast-bg: #232930;
  --toast-border: #323942;

  --md-sys-color-error: #ff6b6b;
  --md-sys-color-on-error: #ffffff;

  /* Status-dot literals. */
  --dot-saved: #3ccf8e;
  --dot-unsaved: #f2b544;

  /* ---- 4b. SHIFT FAMILIES -- the one vocabulary for a shift's window. -----
   * A calm categorical set for the grid's pills, the phone's week-strip
   * bands and the calendar chips. Chosen apart from the chart palette on
   * purpose: a pill is a label, not a series, and it must never be read as
   * one. Status colours are NOT in here: a draft is a dashed edge, a warning
   * is an amber inset, a verdict is red -- never a family hue. */
  --shift-day: #5aa9e6;        --shift-day-soft: rgba(90, 169, 230, 0.16);
  --shift-late: #c58af9;       --shift-late-soft: rgba(197, 138, 249, 0.16);
  --shift-night: #56c8b9;      --shift-night-soft: rgba(86, 200, 185, 0.16);
  --shift-leave: #8b939c;      --shift-leave-soft: rgba(139, 147, 156, 0.14);
  --shift-off: #4a5158;

  /* =========================================================================
   * ---- 5. CHART LAYER — the data-visualisation palette.
   *
   * NOT the UI accent. These values are COMPUTED, not chosen: every set
   * passes the data-viz validator's five checks (lightness band, chroma
   * floor, protan/deutan separation, normal-vision floor, contrast vs the
   * chart surface). The categorical and sequential sets are unchanged by
   * the v2 language -- the chart surface moved DARKER (#1e1e1e -> #171c22),
   * which only raises their contrast. CHANGING ONE MEANS RE-RUNNING THE
   * VALIDATOR.
   * ========================================================================= */

  /* Categorical — for series that ARE the subject. Assign IN ORDER, never
   * cycled. Status colours are NOT in here on purpose. */
  --chart-cat-1: #4A90D9;   /* blue   */
  --chart-cat-2: #DC6E36;   /* orange */
  --chart-cat-3: #28A98B;   /* teal   */
  --chart-cat-4: #9B72E0;   /* purple */
  --chart-cat-5: #AC9029;   /* ochre  */
  --chart-cat-6: #C25E86;   /* rose   */

  /* Sequential — one hue, dim to bright, for MAGNITUDE. */
  --chart-seq-1: #2A5878;
  --chart-seq-2: #356F98;
  --chart-seq-3: #4189B8;
  --chart-seq-4: #53A2D6;
  --chart-seq-5: #75BBEA;
  --chart-seq-6: #A0D2F6;

  /* Emphasis pair — ONE bar in the accent, the rest in the de-emphasis grey.
   * --primary on the card surface measures 5.2:1. */
  --chart-emphasis: var(--md-sys-color-primary);
  --chart-muted: #3b434c;

  /* Chart furniture — recessive by rule: the data is the only loud thing. */
  --chart-grid: rgba(255, 255, 255, 0.06);
  --chart-axis: rgba(255, 255, 255, 0.16);
  --chart-surface: var(--surface-panel);  /* the 2px gap + ring spacer colour */
  --chart-track: rgba(255, 255, 255, 0.08); /* meter/progress unfilled track */
  --chart-threshold: #ff6b6b;             /* a legal ceiling line (45h, 10h OT) */

  /* Danger tinted-ghost ladder. Suffix = alpha in hundredths. */
  --danger-soft: #ff8a8a;
  --danger-tint-12: rgba(255, 107, 107, 0.12);
  --danger-tint-22: rgba(255, 107, 107, 0.22);
  --danger-tint-30: rgba(255, 107, 107, 0.30);
  --danger-tint-50: rgba(255, 107, 107, 0.50);
}

/* =========================================================================
 * ---- 6. LIGHT THEME (owner ruling 5, 2026-09-03). Dark stays the identity;
 * this is the daylight reading of the SAME tokens for a forecourt office
 * window. Selected by `data-theme="light"` on <html>, which theme.js stamps
 * in <head> before first paint. ONE block, no media-query twin.
 *
 * Every family the dark set declares is re-stated here, and NOTHING ELSE is.
 *
 * CHART PALETTE: the light categorical set and sequential ramp were validated
 * 2026-09-03 against a white chart surface and are unchanged by v2. CHANGING
 * ONE MEANS RE-RUNNING THE VALIDATOR, in --mode light.
 * ========================================================================= */
:root[data-theme="light"] {
  --md-sys-color-primary: #2f6fe4;
  --md-sys-color-on-primary: #ffffff;
  --md-sys-color-primary-container: #d6e4ff;
  --md-sys-color-on-primary-container: #0a2540;

  --md-sys-color-secondary: #4e5866;
  --md-sys-color-on-secondary: #ffffff;
  --md-sys-color-secondary-container: #dfe4ea;
  --md-sys-color-on-secondary-container: #23323f;

  --md-sys-color-tertiary: #6d3fbf;
  --md-sys-color-on-tertiary: #ffffff;
  --md-sys-color-tertiary-container: #ecdcff;
  --md-sys-color-on-tertiary-container: #2b1741;

  --md-sys-color-surface: #f4f6f8;
  --md-sys-color-surface-dim: #e8ebef;
  --md-sys-color-surface-bright: #ffffff;

  --md-sys-color-surface-container-lowest: #ffffff;
  --md-sys-color-surface-container-low: #f7f8fa;
  --md-sys-color-surface-container: #ffffff;
  --md-sys-color-surface-container-high: #eef1f4;
  --md-sys-color-surface-container-highest: #e4e8ed;

  --md-sys-color-on-surface: #17191c;
  --md-sys-color-on-surface-variant: #4a5058;
  --md-sys-color-outline: #74797f;
  --md-sys-color-outline-variant: #d5dae1;

  --md-sys-elevation-1: 0 1px 2px rgba(20, 30, 45, 0.08);
  --md-sys-elevation-2: 0 2px 8px rgba(20, 30, 45, 0.08);
  --md-sys-elevation-3: 0 4px 12px rgba(20, 30, 45, 0.10);
  --md-sys-elevation-4: 0 6px 10px 4px rgba(20, 30, 45, 0.06), 0 2px 3px rgba(20, 30, 45, 0.10);
  --md-sys-elevation-5: 0 8px 12px 6px rgba(20, 30, 45, 0.06), 0 4px 4px rgba(20, 30, 45, 0.10);

  --overlay-scrim: rgba(15, 20, 30, 0.45);
  --overlay-scrim-heavy: rgba(15, 20, 30, 0.60);
  --shadow-pop: 0 12px 32px rgba(20, 30, 45, 0.16);
  --shadow-nav-up: 0 -2px 10px rgba(20, 30, 45, 0.08);

  --accent-fill: #2563d3;
  --accent-fill-hover: #2f6fe4;
  --on-accent-fill: #ffffff;

  /* Status text on a light ground needs the DARK step of each hue. */
  --error: #d92d2d;
  --success: #158a55;
  --warning: #a8620a;
  --status-success: #158a55;
  --status-success-bg: rgba(21, 138, 85, 0.12);
  --status-success-border: rgba(21, 138, 85, 0.40);
  --status-warning: #a8620a;
  --status-warning-bg: rgba(168, 98, 10, 0.12);
  --status-warning-border: rgba(168, 98, 10, 0.40);
  --status-danger: #d92d2d;
  --status-danger-bg: rgba(217, 45, 45, 0.10);
  --status-danger-border: rgba(217, 45, 45, 0.40);
  --status-info: #2f6fe4;
  --status-info-bg: rgba(47, 111, 228, 0.10);
  --status-info-border: rgba(47, 111, 228, 0.40);
  --status-neutral: #5f6872;
  --status-neutral-bg: rgba(95, 104, 114, 0.12);
  --status-neutral-border: rgba(95, 104, 114, 0.40);

  --accent-tint-03: rgba(47, 111, 228, 0.03);
  --accent-tint-04: rgba(47, 111, 228, 0.04);
  --accent-tint-05: rgba(47, 111, 228, 0.05);
  --accent-tint-06: rgba(47, 111, 228, 0.06);
  --accent-tint-08: rgba(47, 111, 228, 0.08);
  --accent-tint-10: rgba(47, 111, 228, 0.10);
  --accent-tint-12: rgba(47, 111, 228, 0.12);
  --accent-tint-15: rgba(47, 111, 228, 0.15);
  --accent-tint-20: rgba(47, 111, 228, 0.20);
  --accent-tint-30: rgba(47, 111, 228, 0.30);
  --accent-tint-40: rgba(47, 111, 228, 0.40);

  --surface-well: #f4f6f8;
  --surface-bar: #ffffff;
  --surface-panel: #ffffff;
  --surface-tile: #f4f6f8;
  --surface-hover: #eceff3;
  --surface-sheen: #f7f8fa;
  --line: #e3e7ec;
  --line-strong: #cfd5dc;

  /* The muted ramp keeps its ORDER and passes AA at 11px on white. */
  --text-muted: #5f6872;
  --text-muted-2: #4f5761;
  --text-placeholder: #656d77;

  --panel-gradient: linear-gradient(135deg, #f7f8fa 0%, #ffffff 100%);
  --table-header-border: rgba(20, 30, 45, 0.12);
  --row-divider: rgba(20, 30, 45, 0.06);

  --toast-bg: #ffffff;
  --toast-border: #cfd5dc;

  --md-sys-color-error: #d92d2d;
  --md-sys-color-on-error: #ffffff;
  --dot-saved: #158a55;
  --dot-unsaved: #b45309;

  --shift-day: #1d6fb8;        --shift-day-soft: rgba(29, 111, 184, 0.14);
  --shift-late: #7a3fd1;       --shift-late-soft: rgba(122, 63, 209, 0.14);
  --shift-night: #12897a;      --shift-night-soft: rgba(18, 137, 122, 0.14);
  --shift-leave: #5f6872;      --shift-leave-soft: rgba(95, 104, 114, 0.14);
  --shift-off: #c4cad2;

  /* Chart layer, light steps (validated -- see the block comment). */
  --chart-cat-1: #2F7FCF;
  --chart-cat-2: #D0602A;
  --chart-cat-3: #1E997A;
  --chart-cat-4: #8A5FD6;
  --chart-cat-5: #9A7F1C;
  --chart-cat-6: #B84F78;

  --chart-seq-1: #8DB9E2;
  --chart-seq-2: #6BA3D6;
  --chart-seq-3: #4C8CC8;
  --chart-seq-4: #3372B5;
  --chart-seq-5: #22579A;
  --chart-seq-6: #153E7A;

  --chart-muted: #c3c9d1;
  --chart-grid: rgba(20, 30, 45, 0.08);
  --chart-axis: rgba(20, 30, 45, 0.22);
  --chart-track: rgba(20, 30, 45, 0.10);
  --chart-threshold: #d92d2d;

  --danger-soft: #b71c1c;
  --danger-tint-12: rgba(217, 45, 45, 0.08);
  --danger-tint-22: rgba(217, 45, 45, 0.16);
  --danger-tint-30: rgba(217, 45, 45, 0.24);
  --danger-tint-50: rgba(217, 45, 45, 0.40);
}