/* #region 0) FILE CONTRACT */

/* =========================================================
   MILO COMPONENT CONTRACT
   File: milo-tokens.css
   Layer: Foundation (Global Design Tokens)
   Version: 2.x

   PURPOSE
   ----------------------------------------------------------------
   Defines the global design primitives and derived aesthetic system
   for Milo. This file owns color, motion, elevation, opacity,
   overlay, glass, glow, sheen, radius, and interaction geometry.

   This is the aesthetic foundation of the design system.

   OWNERSHIP
   ----------------------------------------------------------------
   Owns:
   - Brand primitives (color roots)
   - Neutral bases (ink, white, shadow-base, tint-base)
   - Spacing scale (shared with layout)
   - Radius scale
   - Motion curves + durations
   - Opacity scale
   - Shadow tokens
   - Elevation tokens
   - Divider / border tokens
   - Overlay + glass primitives
   - Glow + sheen primitives
   - Focus tokens
   - Header height tokens
   - Underline offsets + micro interaction geometry
   - Light mode mirror overrides

   Does NOT own:
   - Container widths
   - Gutters
   - Section padding
   - Grid gaps
   - Text measure widths
   - Two-column geometry
   - Breakpoint structural overrides

   Those belong to milo-layout-tokens.css.

   CASCADE STRUCTURE
   ----------------------------------------------------------------
   1. Base Layer (Fallback Safe)
      - Contains no color-mix()
      - Provides fully functional system in legacy browsers

   2. Derived Layer (@supports color-mix)
      - Overrides fallback tokens using color-mix
      - Progressive enhancement only

   3. Light Mode Mirror (.milo-light)
      - Overrides base mixing anchors
      - Recomputes derived values when supported

   ORDER MATTERS.
   Derived layer must follow base.
   Light mirror must follow derived.

   CONSUMPTION RULES
   ----------------------------------------------------------------
   - Modules may consume tokens.
   - Modules must NOT redefine foundation tokens.
   - Components must not hardcode aesthetic values.
   - Breakpoints must not directly change aesthetic tokens
     (except in light mode or theme variants).

   TOKEN PHILOSOPHY
   ----------------------------------------------------------------
   - Primitives define raw values.
   - Derived tokens express system relationships.
   - Elevation composes from shadow tokens.
   - Overlay and glass derive from shadow-base + tint-base.
   - All alpha mixing routes through the alpha scale.
   - No component should introduce new color constants.

   Any aesthetic change should be achievable
   by modifying tokens in this file only.

========================================================= */

/* #endregion FILE CONTRACT */

/* #region 1) Z-INDEX */
:root {
  --milo-z-overlay: 99998;
  --milo-z-header: 99999;
  --milo-z-panel: 100000;
}
/* #endregion 1) Z-INDEX */

/* #region 2) CORE COLOR PRIMITIVES */
:root {
  /* Neutral Anchors */
  --milo-ink: #111111;
  --milo-white-pure: #ffffff;

  /* Derived Anchors */
  --milo-white-base: var(--milo-white-pure);
  --milo-shadow-base: var(--milo-ink);
  --milo-tint-base: var(--milo-white-base);
  --milo-surface-wash-base: #12141a;

  /* Legacy Anchors */
  --milo-white: rgba(255, 255, 255, 0.92);
  --milo-off-white: rgba(255, 255, 255, 0.72);
  --milo-white-weak: rgba(255, 255, 255, 0.36);
}
/* #endregion 2) CORE COLOR PRIMITIVES */

/* #region 3) BRAND PRIMITIVES */
:root {
  /* BRAND */
  --milo-pink: #f5c9c8;
}
/* #endregion 3) BRAND PRIMITIVES */

/* #region 4) TEXT COLORS */
:root {
  --milo-text: rgba(255, 255, 255, 0.86);
  --milo-text-strong: rgba(255, 255, 255, 0.95);
  --milo-text-soft: rgba(255, 255, 255, 0.74);
  --milo-text-muted: rgba(255, 255, 255, 0.62);
  --milo-text-meta: rgba(255, 255, 255, 0.48);
}
/* #endregion 4) TEXT COLORS */

/* #region 5) SURFACE COLOR SYSTEM */
:root {
  /* Core Backgrounds */
  --milo-bg-floor: #0a0a0b;
  --milo-bg-hero: #0e0e10;
  --milo-bg-base: #121214;
  --milo-bg-lift: #18181b;
  --milo-bg-cta: #151519;
  --milo-bg-footer: #0f0f11;
  --milo-bg-muted: #12141a;
  --milo-bg-deep: #0e0e0f;

  /* Internal surfaces */
  --milo-surface-1: #121214;
}
/* #endregion 5) SURFACE COLOR SYSTEM */

/* #region 6) SURFACE ALPHA COMPANIONS */
:root {
  /* Surface alpha companions (for gradients + overlays) */
  --milo-bg-hero-0: rgb(14 14 16 / 0);
  --milo-bg-hero-16: rgb(14 14 16 / 0.16);

  --milo-bg-base-0: rgb(18 18 20 / 0);
  --milo-bg-base-08: rgb(18 18 20 / 0.08);
  --milo-bg-base-12: rgb(18 18 20 / 0.12);
  --milo-bg-base-16: rgb(18 18 20 / 0.16);
  --milo-bg-base-18: rgb(18 18 20 / 0.18);
  --milo-bg-base-42: rgb(18 18 20 / 0.42);
  --milo-bg-base-72: rgb(18 18 20 / 0.72);

  --milo-bg-lift-0: rgb(24 24 27 / 0);
  --milo-bg-lift-12: rgb(24 24 27 / 0.12);

  --milo-bg-cta-0: rgb(21 21 25 / 0);
  --milo-bg-cta-12: rgb(21 21 25 / 0.12);
}
/* #endregion 6) SURFACE ALPHA COMPANIONS */

/* #region 7) RADIUS SCALE */
:root {
  --milo-radius-50: 50%;
  --milo-radius-2xs: 2px;
  --milo-radius-sm: 12px;
  --milo-radius-md: 18px;
  --milo-radius-lg: 24px;
  --milo-radius-xl: 28px;
  --milo-radius-pill: 999px;
}
/* #endregion 7) RADIUS SCALE */

/* #region 8) MOTION SCALE */
:root {
  /* Easing */
  --milo-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --milo-ease-reveal: cubic-bezier(0.22, 1, 0.36, 1);
  --milo-ease-reveal-soft: cubic-bezier(0.25, 0.9, 0.3, 1);

  /* Durations */
  --milo-fast: 160ms;
  --milo-med: 240ms;
  --milo-slow: 420ms;

  --milo-dur-180: 180ms;
  --milo-dur-220: 220ms;

  --milo-reveal-dur: 460ms;
  --milo-reveal-dur-filter: 360ms;
  --milo-reveal-y: 10px;
  --milo-reveal-blur: 6px;

  --milo-delay: 0ms;

  /* Backward-compatible aliases */
  --milo-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --milo-ease-reveal-heading: cubic-bezier(0.22, 1, 0.36, 1);
  --milo-ease-reveal-media: cubic-bezier(0.25, 0.9, 0.3, 1);

  --milo-reveal-dur-heading: 520ms;
  --milo-reveal-dur-media: 580ms;
  --milo-reveal-dur-media-filter: 460ms;

  --milo-reveal-y-sm: 6px;
  --milo-reveal-y-md: 10px;
  --milo-reveal-y-lg: 12px;
  --milo-reveal-y-xl: 16px;

  --milo-reveal-blur-sm: 1.5px;
  --milo-reveal-blur-md: 2px;
  --milo-reveal-blur-lg: 3px;
}
/* #endregion 8) MOTION SCALE */

/* #region 9) OPACITY SCALE */
:root {
  --milo-o-15: 0.15;
  --milo-o-20: 0.2;
  --milo-o-35: 0.35;
  --milo-o-55: 0.55;
  --milo-o-62: 0.62;
  --milo-o-64: 0.64;
  --milo-o-70: 0.7;
  --milo-o-78: 0.78;
  --milo-o-82: 0.82;
  --milo-o-90: 0.9;
  --milo-o-92: 0.92;
  --milo-o-95: 0.95;
  --milo-o-100: 1;
}
/* #endregion 9) OPACITY SCALE */

/* #region 10) ALPHA PERCENTAGE SCALE */
:root {
  /* Alpha scale (for color mixing) */
  --milo-a-006: 0.6%;
  --milo-a-008: 0.8%;
  --milo-a-012: 1.2%;
  --milo-a-02: 2%;
  --milo-a-03: 3%;
  --milo-a-04: 4%;
  --milo-a-06: 6%;
  --milo-a-10: 10%;
  --milo-a-12: 12%;
  --milo-a-14: 14%;
  --milo-a-16: 16%;
  --milo-a-18: 18%;
  --milo-a-22: 22%;
  --milo-a-26: 26%;
  --milo-a-28: 28%;
  --milo-a-35: 35%;
  --milo-a-40: 40%;
  --milo-a-45: 45%;
  --milo-a-50: 50%;
  --milo-a-55: 55%;
  --milo-a-62: 62%;
  --milo-a-64: 64%;
  --milo-a-70: 70%;
  --milo-a-72: 72%;
  --milo-a-75: 75%;
  --milo-a-78: 78%;
  --milo-a-86: 86%;
  --milo-a-90: 90%;
  --milo-a-92: 92%;
}
/* #endregion 10) ALPHA PERCENTAGE SCALE */

/* #region 11) MEDIA FILTER + IMAGE TUNING */
:root {
  --milo-filter-mono: grayscale(100%) brightness(1.05);
  --milo-filter-mono-hover: grayscale(0%) brightness(1.08);

  --milo-sat-102: 1.02;
  --milo-sat-103: 1.03;
  --milo-sat-104: 1.04;

  --milo-con-103: 1.03;
  --milo-con-104: 1.04;
  --milo-con-105: 1.05;
}
/* #endregion 11) MEDIA FILTER + IMAGE TUNING */

/* #region 12) FALLBACK SEMANTIC COLORS */
:root {
  /* Surface Hairline */
  --milo-surface-hairline: rgba(255, 255, 255, 0.035);

  /* Divider/Border */
  --milo-divider: rgba(255, 255, 255, 0.06);
  --milo-divider-soft: rgba(255, 255, 255, 0.04);
  --milo-divider-weak: rgba(255, 255, 255, 0.01);
  --milo-divider-strong: rgba(255, 255, 255, 0.12);

  --milo-border: rgba(255, 255, 255, 0.28);
  --milo-border-subtle: rgba(255, 255, 255, 0.16);
  --milo-border-weak: rgba(255, 255, 255, 0.04);
  --milo-border-soft: rgba(255, 255, 255, 0.08);
  --milo-border-highlight: rgba(255, 255, 255, 0.12);

  --milo-border-field: rgba(255, 255, 255, 0.1);
  --milo-border-field-hover: rgba(255, 255, 255, 0.18);
  --milo-border-field-focus: rgba(245, 201, 200, 0.58);

  --milo-border-media-dark: rgba(255, 255, 255, 0.1);

  /* Link Underline */
  --milo-link-underline: rgba(255, 255, 255, 0.5);
  --milo-link-underline-strong: rgba(255, 255, 255, 0.75);
  --milo-underline: var(--milo-link-underline);
  --milo-underline-strong: var(--milo-link-underline-strong);

  /* Pink/accent */
  --milo-pink-strong: rgba(245, 201, 200, 0.86);
  --milo-pink-medium: rgba(245, 201, 200, 0.72);
  --milo-pink-light: rgba(245, 201, 200, 0.62);
  --milo-pink-wash: rgba(245, 201, 200, 0.12);

  /* Icon / Logo Tones */
  --milo-icon-featured: rgba(255, 255, 255, 0.78);
  --milo-icon-muted: rgba(255, 255, 255, 0.62);
  --milo-icon-hover: rgba(255, 255, 255, 0.9);

  /* Validation Colors */
  --milo-validation-success-border: rgba(136, 214, 168, 0.24);
  --milo-validation-success-background: rgba(136, 214, 168, 0.08);
  --milo-validation-success-color: rgba(212, 244, 222, 0.96);
  --milo-validation-error-background: rgba(255, 120, 120, 0.08);
  --milo-validation-error-color: rgba(255, 210, 210, 0.96);
  --milo-validation-error-shadow: 0 0 0 3px rgba(255, 120, 120, 0.12);
  --milo-validation-error-border: rgba(255, 120, 120, 0.24);

  /* Surface Tints */
  --milo-surface-tint-1: rgba(255, 255, 255, 0.02);
  --milo-surface-tint-2: rgba(255, 255, 255, 0.012);
  --milo-surface-tint-3: rgba(255, 255, 255, 0.006);

  --milo-surface-bg-lift: #14151a;

  --milo-surface-media-inner: rgba(255, 255, 255, 0.04);
  --milo-surface-media-elevated: rgba(255, 255, 255, 0.03);
  --milo-surface-media-elevated-inner: rgba(255, 255, 255, 0.06);
  --milo-surface-media-dark: rgba(21, 21, 25, 0.7);

  --milo-surface-field: #121318;
  --milo-surface-field-hover: #1a1b20;
  --milo-surface-field-focus: #1c1d23;

  /* Focus */
  --milo-focus: rgba(245, 201, 200, 0.26);
  --milo-focus-soft: rgba(245, 201, 200, 0.35);
  --milo-focus-strong: rgba(245, 201, 200, 0.45);
  --milo-focus-ring-accent: rgba(245, 201, 200, 0.22);

  /* Shadow Color Ingredients */
  --milo-shadow-color-16: rgba(17, 17, 17, 0.16);
  --milo-shadow-color-18: rgba(17, 17, 17, 0.18);
  --milo-shadow-color-35: rgba(17, 17, 17, 0.35);
  --milo-shadow-color-40: rgba(17, 17, 17, 0.4);
  --milo-shadow-color-45: rgba(17, 17, 17, 0.45);
  --milo-shadow-color-50: rgba(17, 17, 17, 0.5);
  --milo-shadow-color-55: rgba(17, 17, 17, 0.55);

  /* Ambient/highlight Ingredients */
  --milo-shadow-ambient: rgba(0, 0, 0, 0.14);
  --milo-shadow-ambient-soft: rgba(0, 0, 0, 0.08);
  --milo-shadow-ambient-strong: rgba(0, 0, 0, 0.22);
  --milo-shadow-highlight: rgba(255, 255, 255, 0.02);
  --milo-shadow-highlight-strong: rgba(255, 255, 255, 0.04);
  --milo-shadow-highlight-bold: rgba(255, 255, 255, 0.35);
  --milo-shadow-highlight-bold-hover: rgba(255, 255, 255, 0.4);

  --milo-shadow-ambient-pink: rgba(245, 201, 200, 0.05);
  --milo-shadow-ambient-pink-soft: rgba(245, 201, 200, 0.01);
  --milo-shadow-ambient-pink-strong: rgba(245, 201, 200, 0.12);
  --milo-shadow-highlight-pink: rgba(245, 201, 200, 0.25);
  --milo-shadow-highlight-pink-strong: rgba(245, 201, 200, 0.4);

  /* Media/Form Surface colors */
}
/* #endregion 12) FALLBACK SEMANTIC */

/* #region 13) FALLBACK OVERLAY / GLASS / WASH / GLOW */
:root {
  --milo-overlay-alpha: var(--milo-a-64);
  --milo-overlay-45: rgba(0, 0, 0, 0.45);
  --milo-overlay: rgba(17, 17, 17, 0.64);
  --milo-glass-dark: rgba(18, 20, 26, 0.7);

  --milo-glass-blur: 14px;
  --milo-glass-blur-strong: 18px;
  --milo-glass-bg: rgba(20, 22, 27, 0.62);
  --milo-glass-border: var(--milo-divider);

  --milo-surface-wash-strong: rgba(18, 20, 26, 0.75);
  --milo-surface-wash-med: rgba(18, 20, 26, 0.35);
  --milo-surface-wash-none: rgba(18, 20, 26, 0);

  --milo-glow-pink-strong: rgba(245, 201, 200, 0.12);
  --milo-glow-pink-med: rgba(245, 201, 200, 0.06);
  --milo-glow-pink-none: rgba(245, 201, 200, 0);

  --milo-sheen-mid: rgba(255, 255, 255, 0.18);
  --milo-sheen-soft: rgba(255, 255, 255, 0.03);
  --milo-sheen-weak: rgba(255, 255, 255, 0.1);

  --milo-glow-wash-strong: rgba(255, 255, 255, 0.1);
  --milo-glow-wash-med: rgba(255, 255, 255, 0.06);
  --milo-glow-wash-soft: rgba(255, 255, 255, 0.008);
  --milo-glow-wash-none: rgba(255, 255, 255, 0);
}
/* #endregion 13) FALLBACK OVERLAY / GLASS / WASH / GLOW */

/* #region 14) GRADIENT PRIMITIVES */
:root {
  /* #region 14.1) Section surfaces */

  --milo-section-surface-hero: linear-gradient(
    180deg,
    var(--milo-bg-floor) 0%,
    var(--milo-bg-hero) 34%,
    var(--milo-bg-base) 100%
  );

  --milo-section-surface-lift: linear-gradient(
    180deg,
    rgb(255 255 255 / 0.022) 0%,
    rgb(255 255 255 / 0.012) 28%,
    rgb(255 255 255 / 0.006) 56%,
    rgb(255 255 255 / 0.001) 100%
  );

  --milo-section-surface-cta: linear-gradient(
    180deg,
    var(--milo-bg-base) 0%,
    var(--milo-bg-cta) 100%
  );

  --milo-section-surface-footer: linear-gradient(
    180deg,
    var(--milo-bg-cta) 0%,
    var(--milo-bg-footer) 100%
  );

  /* #endregion Section surfaces */

  /* #region 14.2) Sections Lights and Fields */

  --milo-section-light-left: linear-gradient(
    100deg,
    rgb(255 255 255 / 0.04) 0%,
    rgb(255 255 255 / 0.02) 28%,
    rgb(255 255 255 / 0.01) 44%,
    rgb(255 255 255 / 0.002) 100%
  );

  --milo-section-light-right: linear-gradient(
    260deg,
    rgb(255 255 255 / 0.04) 0%,
    rgb(255 255 255 / 0.02) 28%,
    rgb(255 255 255 / 0.01) 44%,
    rgb(255 255 255 / 0.002) 100%
  );

  --milo-section-light-top: linear-gradient(
    180deg,
    rgb(255 255 255 / 0.024) 0%,
    rgb(255 255 255 / 0.01) 32%,
    rgb(255 255 255 / 0) 68%
  );

  --milo-section-light-cta: linear-gradient(
    100deg,
    rgb(255 255 255 / 0.018) 0%,
    rgb(255 255 255 / 0.009) 26%,
    rgb(255 255 255 / 0.004) 46%,
    rgb(255 255 255 / 0.002) 100%
  );

  /* #endregion Sections Lights and Fields */

  /* #region 14.3) ENVIRONMENT WASH + SHAPING */

  --milo-section-field-left-soft: linear-gradient(
    100deg,
    rgb(255 255 255 / 0.02) 0%,
    rgb(255 255 255 / 0.015) 35%,
    rgb(255 255 255 / 0.009) 56%,
    rgb(255 255 255 / 0.002) 100%
  );

  --milo-section-field-right-soft: linear-gradient(
    260deg,
    rgb(255 255 255 / 0.02) 0%,
    rgb(255 255 255 / 0.015) 35%,
    rgb(255 255 255 / 0.009) 56%,
    rgb(255 255 255 / 0.002) 100%
  );

  --milo-section-field-center-soft: linear-gradient(
    90deg,
    rgb(255 255 255 / 0) 0%,
    rgb(255 255 255 / 0.012) 24%,
    rgb(255 255 255 / 0.02) 50%,
    rgb(255 255 255 / 0.012) 76%,
    rgb(255 255 255 / 0) 100%
  );

  /* #endregion 6.5) ENVIRONMENT WASH + SHAPING */

  /* #region 14.4) SECTION + INTERNAL FADES */
  --milo-section-fade-to-base: linear-gradient(
    to bottom,
    var(--milo-bg-base-0) 0%,
    var(--milo-bg-base-12) 56%,
    var(--milo-bg-base) 100%
  );

  --milo-section-fade-to-lift: linear-gradient(
    to bottom,
    var(--milo-bg-lift-0) 0%,
    var(--milo-bg-lift-12) 46%,
    var(--milo-bg-lift) 100%
  );

  --milo-section-fade-to-cta: linear-gradient(
    to bottom,
    var(--milo-bg-cta-0) 0%,
    var(--milo-bg-cta-12) 56%,
    var(--milo-bg-cta) 100%
  );

  --milo-section-fade-top-soft: linear-gradient(
    to top,
    var(--milo-bg-base-0) 0%,
    var(--milo-bg-base-08) 56%,
    var(--milo-bg-base-12) 100%
  );

  --milo-section-fade-bottom-soft: linear-gradient(
    to bottom,
    var(--milo-bg-base-0) 0%,
    var(--milo-bg-base-08) 56%,
    var(--milo-bg-base-16) 100%
  );
  /* #endregion 6.8) SECTION + INTERNAL FADES */

  /* #region 14.5) SURFACE/MEDIA GRADIENTS */
  --milo-surface-radial-lift: radial-gradient(
    circle at top left,
    rgb(255 255 255 / 0.012),
    transparent 34%
  );
  /* #endregion 6.9) SURFACE/MEDIA GRADIENTS */

  /* #region 14.6) RULE GRADIENTS */

  --milo-rule-pink-vertical: linear-gradient(
    to bottom,
    rgb(235 210 210 / 0.16),
    rgb(255 255 255 / 0)
  );

  --milo-rule-white-vertical: linear-gradient(
    180deg,
    rgb(255 255 255 / 0.12) 0%,
    rgb(255 255 255 / 0.06) 40%,
    rgb(255 255 255 / 0.02) 100%
  );

  /* Horizontal rule (left → right fade) */
  --milo-rule-horizontal: linear-gradient(
    90deg,
    rgb(255 255 255 / 0.12) 0%,
    rgb(255 255 255 / 0.04) 40%,
    rgb(255 255 255 / 0) 100%
  );

  /* Subtle variant (lower contrast) */
  --milo-rule-subtle: linear-gradient(
    180deg,
    rgb(255 255 255 / 0.08) 0%,
    rgb(255 255 255 / 0.04) 40%,
    rgb(255 255 255 / 0) 100%
  );

  /* Horizontal rule sheen / glow */
  --milo-rule-center-glow: linear-gradient(
    90deg,
    transparent 0%,
    transparent 42%,
    rgba(255, 255, 255, 0.25) 50%,
    transparent 58%,
    transparent 100%
  );

  --milo-rule-center-base: linear-gradient(
    to right,
    transparent,
    rgba(255, 255, 255, 0.2),
    transparent
  );

  /* Horizontal rule (left → right fade) */
  --milo-rule-center-weak: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.08) 20%,
    rgba(255, 255, 255, 0.08) 80%,
    rgba(255, 255, 255, 0) 100%
  );

  /* #endregion RULE GRADIENTS */

  /* #region 14.7) GRADIENT FALLBACKS */
  --milo-surface-grad-soft: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.022) 0%,
    rgba(255, 255, 255, 0.008) 100%
  );

  --milo-surface-base-to-shadow-grad: linear-gradient(
    to bottom,
    transparent,
    #111114
  );

  --milo-surface-lift-to-light-top: linear-gradient(
    to top,
    transparent,
    rgba(29, 29, 32, 1)
  );

  --milo-surface-lift-to-light-bottom: linear-gradient(
    to bottom,
    transparent,
    rgba(29, 29, 32, 1)
  );

  --milo-surface-base-grad-strong: linear-gradient(
    180deg,
    #1d1d20 0%,
    #111114 100%
  );

  --milo-surface-base-grad-soft: linear-gradient(
    180deg,
    #151518 0%,
    #111113 100%
  );

  --milo-surface-lift-grad-soft: linear-gradient(
    180deg,
    #1d1d20 0%,
    #17171a 100%
  );

  --milo-media-frame-overlay: linear-gradient(
    120deg,
    transparent 0%,
    rgba(255, 255, 255, 0.1) 100%
  );

  /* #endregion */
}

/* #endregion 14) GRADIENT PRIMITIVES */

/* #region 15) ELEVATION + SHADOW COMPOSITION */
:root {
  /* Elevation */
  --milo-elev-1: 0 18px 50px var(--milo-shadow-color-35);
  --milo-elev-2: 0 24px 60px var(--milo-shadow-color-45);
  --milo-elev-3: 0 40px 80px var(--milo-shadow-color-50);
  --milo-elev-4: 0 48px 96px var(--milo-shadow-color-55);

  --milo-elev-card-hover: 0 26px 70px var(--milo-shadow-color-50);
  --milo-elev-media-hover: 0 34px 90px var(--milo-shadow-color-55);

  --milo-elev-control-hover: 0 18px 44px var(--milo-shadow-color-45);
  --milo-elev-control-active: 0 12px 30px var(--milo-shadow-color-40);

  /* SHADOW SYSTEM */

  --milo-shadow-elev-2:
    inset 0 1px 0 var(--milo-shadow-highlight-strong),
    0 18px 40px var(--milo-shadow-ambient);

  /* Card/Media/Control Elevation Aliases */
  --milo-shadow-media: var(--milo-elev-2);
  --milo-shadow-media-hover: var(--milo-elev-media-hover);

  /* Card Shadows */
  --milo-shadow-card-soft: 0 18px 40px rgb(0 0 0 / 0.16);
  --milo-shadow-card-soft-hover: 0 22px 48px rgb(0 0 0 / 0.2);

  /* Hairline Shadows */
  --milo-shadow-hairline-inset: inset 0 0 0 1px var(--milo-surface-hairline);
}
/* #endregion 15) ELEVATION + SHADOW COMPOSITION */

/* #region 16) EDITORIAL PRIMITIVES */
:root {
  --milo-editorial-rule-accent: rgb(235 210 210 / 0.16);

  --milo-editorial-node: rgb(235 210 210 / 0.84);
  --milo-editorial-node-halo: rgb(235 210 210 / 0.04);
}
/* #endregion 16) EDITORIAL PRIMITIVES */

/* #region 18) DERIVED COLOR-MIX LAYER */
@supports (color: color-mix(in srgb, red, white)) {
  /* #region 21) DERIVED COLORS */
  :root {
    --milo-divider: color-mix(
      in srgb,
      var(--milo-tint-base) var(--milo-a-06),
      transparent
    );

    --milo-divider-weak: color-mix(
      in srgb,
      var(--milo-tint-base) 1%,
      transparent
    );

    --milo-border-subtle: color-mix(
      in srgb,
      var(--milo-tint-base) 16%,
      transparent
    );

    --milo-border: color-mix(
      in srgb,
      var(--milo-tint-base) var(--milo-a-28),
      transparent
    );

    --milo-divider-soft: color-mix(
      in srgb,
      var(--milo-tint-base) var(--milo-a-04),
      transparent
    );

    --milo-divider-strong: color-mix(
      in srgb,
      var(--milo-tint-base) var(--milo-a-12),
      transparent
    );

    --milo-link-underline: color-mix(
      in srgb,
      var(--milo-white-base) var(--milo-a-50),
      transparent
    );

    --milo-link-underline-strong: color-mix(
      in srgb,
      var(--milo-white-base) var(--milo-a-72),
      transparent
    );

    --milo-pink-strong: color-mix(
      in srgb,
      var(--milo-pink) var(--milo-a-86),
      transparent
    );

    --milo-pink-medium: color-mix(
      in srgb,
      var(--milo-pink) var(--milo-a-72),
      transparent
    );

    --milo-pink-light: color-mix(
      in srgb,
      var(--milo-pink) var(--milo-a-62),
      transparent
    );

    --milo-pink-wash: color-mix(
      in srgb,
      var(--milo-pink) var(--milo-a-12),
      transparent
    );

    --milo-surface-tint-1: color-mix(
      in srgb,
      var(--milo-tint-base) var(--milo-a-02),
      transparent
    );

    --milo-surface-tint-2: color-mix(
      in srgb,
      var(--milo-tint-base) var(--milo-a-012),
      transparent
    );

    --milo-surface-tint-3: color-mix(
      in srgb,
      var(--milo-tint-base) var(--milo-a-006),
      transparent
    );

    --milo-focus: color-mix(
      in srgb,
      var(--milo-pink) var(--milo-a-26),
      transparent
    );

    --milo-focus-soft: color-mix(
      in srgb,
      var(--milo-pink) var(--milo-a-35),
      transparent
    );

    --milo-focus-strong: color-mix(
      in srgb,
      var(--milo-pink) var(--milo-a-45),
      transparent
    );

    --milo-focus-ring-accent: color-mix(
      in srgb,
      var(--milo-pink) 22%,
      transparent
    );

    --milo-icon-featured: color-mix(
      in srgb,
      var(--milo-white-base) var(--milo-a-78),
      transparent
    );

    --milo-icon-muted: color-mix(
      in srgb,
      var(--milo-white-base) var(--milo-a-62),
      transparent
    );

    --milo-icon-hover: color-mix(
      in srgb,
      var(--milo-white-base) var(--milo-a-90),
      transparent
    );

    --milo-surface-bg-lift: color-mix(
      in srgb,
      var(--milo-bg-lift, #14151a) 97%,
      black 3%
    );

    --milo-border-weak: color-mix(
      in srgb,
      var(--milo-white, #fff) 4%,
      transparent
    );

    --milo-border-soft: color-mix(
      in srgb,
      var(--milo-white, #fff) 8%,
      transparent
    );

    --milo-border-highlight: color-mix(
      in srgb,
      var(--milo-white, #fff) 12%,
      transparent
    );

    --milo-border-field: color-mix(
      in srgb,
      var(--milo-white, #fff) 10%,
      transparent
    );

    --milo-border-field-hover: color-mix(
      in srgb,
      var(--milo-white, #fff) 18%,
      transparent
    );

    --milo-border-field-focus: color-mix(
      in srgb,
      var(--milo-pink) 56%,
      white 6%
    );

    --milo-border-media-dark: color-mix(
      in srgb,
      var(--milo-tint-base) var(--milo-a-10),
      transparent
    );

    --milo-surface-media-inner: color-mix(
      in srgb,
      var(--milo-tint-base) var(--milo-a-04),
      transparent
    );

    --milo-surface-media-elevated: color-mix(
      in srgb,
      var(--milo-tint-base) var(--milo-a-03),
      transparent
    );

    --milo-surface-media-elevated-inner: color-mix(
      in srgb,
      var(--milo-tint-base) var(--milo-a-06),
      transparent
    );

    --milo-surface-media-dark: color-mix(
      in srgb,
      var(--milo-bg-cta) var(--milo-a-70),
      transparent
    );

    --milo-surface-field: color-mix(
      in srgb,
      var(--milo-bg-lift) 88%,
      black 12%
    );

    --milo-surface-field-hover: color-mix(
      in srgb,
      var(--milo-surface-field) 94%,
      white 6%
    );

    --milo-surface-field-focus: color-mix(
      in srgb,
      var(--milo-surface-field) 92%,
      white 8%
    );
  }

  /* #endregion 21) DERIVED COLORS */

  /* #region 22) DERIVED SHEEN */
  :root {
    --milo-sheen-mid: color-mix(
      in srgb,
      var(--milo-white-base) var(--milo-a-18),
      transparent
    );

    --milo-sheen-soft: color-mix(
      in srgb,
      var(--milo-tint-base) var(--milo-a-03),
      transparent
    );

    --milo-sheen-weak: color-mix(
      in srgb,
      var(--milo-tint-base) var(--milo-a-10),
      transparent
    );
  }
  /* #endregion 22) DERIVED SHEEN */

  /* #region 23) DERIVED OVERLAY + GLASS */
  :root {
    --milo-overlay: color-mix(
      in srgb,
      var(--milo-shadow-base) var(--milo-overlay-alpha),
      transparent
    );

    --milo-overlay-45: color-mix(
      in srgb,
      var(--milo-shadow-base) var(--milo-a-45),
      transparent
    );

    --milo-glass-bg: color-mix(
      in srgb,
      var(--milo-surface-1) var(--milo-a-62),
      transparent
    );

    --milo-glass-dark: color-mix(
      in srgb,
      var(--milo-bg-muted) var(--milo-a-70),
      transparent
    );
  }
  /* #endregion 23) DERIVED OVERLAY + GLASS */

  /* #region 24) DERIVED WASHES + GLOWS */
  :root {
    --milo-surface-wash-strong: color-mix(
      in srgb,
      var(--milo-surface-wash-base) var(--milo-a-75),
      transparent
    );

    --milo-surface-wash-med: color-mix(
      in srgb,
      var(--milo-surface-wash-base) var(--milo-a-35),
      transparent
    );

    --milo-surface-wash-none: color-mix(
      in srgb,
      var(--milo-surface-wash-base) 0%,
      transparent
    );

    --milo-glow-pink-strong: color-mix(
      in srgb,
      var(--milo-pink) var(--milo-a-12),
      transparent
    );

    --milo-glow-pink-med: color-mix(
      in srgb,
      var(--milo-pink) var(--milo-a-06),
      transparent
    );

    --milo-glow-pink-none: color-mix(in srgb, var(--milo-pink) 0%, transparent);

    --milo-glow-wash-strong: color-mix(
      in srgb,
      var(--milo-tint-base) var(--milo-a-10),
      transparent
    );

    --milo-glow-wash-med: color-mix(
      in srgb,
      var(--milo-tint-base) var(--milo-a-06),
      transparent
    );

    --milo-glow-wash-soft: color-mix(
      in srgb,
      var(--milo-tint-base) var(--milo-a-008),
      transparent
    );

    --milo-glow-wash-none: color-mix(
      in srgb,
      var(--milo-tint-base) 0%,
      transparent
    );
  }
  /* #endregion 24) DERIVED WASHES + GLOWS */

  /* #region 25) SURFACE MIX PRIMITIVES */
  :root {
    --milo-surface-hairline: color-mix(
      in srgb,
      var(--milo-tint-base) var(--milo-a-04),
      transparent
    );
  }
  /* #endregion 25) SURFACE MIX PRIMITIVES */

  /* #region 26) GRADIENTS */
  :root {
    --milo-surface-base-to-shadow-grad: linear-gradient(
      to bottom,
      transparent,
      color-mix(in srgb, var(--milo-bg-base) 94%, black 6%)
    );

    --milo-surface-lift-to-light-top: linear-gradient(
      to top,
      transparent,
      color-mix(in srgb, var(--milo-bg-lift) 94%, white 2%)
    );

    --milo-surface-lift-to-light-bottom: linear-gradient(
      to bottom,
      transparent,
      color-mix(in srgb, var(--milo-bg-lift) 94%, white 2%)
    );

    --milo-surface-base-grad-strong: linear-gradient(
      180deg,
      color-mix(in srgb, var(--milo-bg-base, #111217) 91%, white 6%) 0%,
      color-mix(in srgb, var(--milo-bg-base, #111217) 96%, black 2%) 100%
    );

    --milo-surface-base-grad-soft: linear-gradient(
      180deg,
      color-mix(in srgb, var(--milo-bg-base, #111217) 91%, white 1%) 0%,
      color-mix(in srgb, var(--milo-bg-base, #111217) 96%, black 4%) 100%
    );

    --milo-surface-lift-grad-soft: linear-gradient(
      180deg,
      color-mix(in srgb, var(--milo-bg-lift, #16171b) 92%, white 2%) 0%,
      color-mix(in srgb, var(--milo-bg-lift, #16171b) 96%, black 4%) 100%
    );

    --milo-media-frame-overlay: linear-gradient(
      120deg,
      transparent 0%,
      color-mix(in srgb, var(--milo-tint-base) 10%, transparent) 100%
    );
  }
}
/* #endregion 26) GRADIENTS */

/* #endregion 18) DERIVED COLOR-MIX LAYER */

/* #region 19) LIGHT MODE MIRROR */

/* #region 19.1) LIGHT MODE (Fallback) */
.milo-light {
  --milo-white-base: var(--milo-white-pure);
  --milo-shadow-base: var(--milo-ink);
  --milo-tint-base: var(--milo-ink);

  --milo-surface-1: var(--milo-white-pure);
  --milo-bg-deep: #ffffff;
  --milo-bg-muted: var(--milo-white-pure);

  --milo-text: rgba(17, 17, 17, 0.92);
  --milo-text-soft: rgba(17, 17, 17, 0.72);
  --milo-text-muted: rgba(17, 17, 17, 0.62);
  --milo-text-strong: rgba(17, 17, 17, 0.95);
  --milo-text-meta: rgba(17, 17, 17, 0.48);

  --milo-shadow-color-35: rgba(17, 17, 17, 0.1);
  --milo-shadow-color-40: rgba(17, 17, 17, 0.12);
  --milo-shadow-color-45: rgba(17, 17, 17, 0.14);
  --milo-shadow-color-50: rgba(17, 17, 17, 0.18);
  --milo-shadow-color-55: rgba(17, 17, 17, 0.22);
}
/* #endregion 19.1) LIGHT MODE (Fallback) */

/* #region 19.2) LIGHT MODE (Derived) */
@supports (color: color-mix(in srgb, red, white)) {
  .milo-light {
    /* Text */
    --milo-text: color-mix(
      in srgb,
      var(--milo-shadow-base) var(--milo-a-92),
      transparent
    );

    --milo-text-strong: color-mix(
      in srgb,
      var(--milo-shadow-base) 95%,
      transparent
    );

    --milo-text-soft: color-mix(
      in srgb,
      var(--milo-shadow-base) var(--milo-a-72),
      transparent
    );

    --milo-text-muted: color-mix(
      in srgb,
      var(--milo-shadow-base) var(--milo-a-62),
      transparent
    );

    --milo-text-meta: color-mix(
      in srgb,
      var(--milo-shadow-base) 48%,
      transparent
    );

    /* Links */
    --milo-link-underline: color-mix(
      in srgb,
      var(--milo-tint-base) var(--milo-a-50),
      transparent
    );

    --milo-link-underline-strong: color-mix(
      in srgb,
      var(--milo-tint-base) var(--milo-a-72),
      transparent
    );

    /* Icon / logo tones */
    --milo-icon-featured: color-mix(
      in srgb,
      var(--milo-tint-base) var(--milo-a-78),
      transparent
    );

    --milo-icon-muted: color-mix(
      in srgb,
      var(--milo-tint-base) var(--milo-a-62),
      transparent
    );

    --milo-icon-hover: color-mix(
      in srgb,
      var(--milo-tint-base) var(--milo-a-90),
      transparent
    );

    /* Borders */
    --milo-border-weak: color-mix(
      in srgb,
      var(--milo-tint-base) 4%,
      transparent
    );

    --milo-border-soft: color-mix(
      in srgb,
      var(--milo-tint-base) 8%,
      transparent
    );

    --milo-border-highlight: color-mix(
      in srgb,
      var(--milo-tint-base) 12%,
      transparent
    );

    --milo-border-field: color-mix(
      in srgb,
      var(--milo-tint-base) 10%,
      transparent
    );

    --milo-border-field-hover: color-mix(
      in srgb,
      var(--milo-tint-base) 18%,
      transparent
    );

    /* Keep accent-led focus border behavior */
    --milo-border-field-focus: color-mix(
      in srgb,
      var(--milo-pink) 56%,
      white 6%
    );

    /* Shadow color ingredients */
    --milo-shadow-color-35: color-mix(
      in srgb,
      var(--milo-shadow-base) var(--milo-a-10),
      transparent
    );

    --milo-shadow-color-40: color-mix(
      in srgb,
      var(--milo-shadow-base) var(--milo-a-12),
      transparent
    );

    --milo-shadow-color-45: color-mix(
      in srgb,
      var(--milo-shadow-base) var(--milo-a-14),
      transparent
    );

    --milo-shadow-color-50: color-mix(
      in srgb,
      var(--milo-shadow-base) var(--milo-a-18),
      transparent
    );

    --milo-shadow-color-55: color-mix(
      in srgb,
      var(--milo-shadow-base) var(--milo-a-22),
      transparent
    );
  }
}
/* #endregion 19.2) LIGHT MODE (Derived) */

/* #endregion 19) LIGHT MODE MIRROR */