@charset "UTF-8";

:root {

/* =======================================================
   A0. AUTHORITATIVE FOUNDATION SYSTEM
======================================================= */

/*
  PURPOSE
  - Establish every primitive dependency required by
    Packages A through J.
  - Make tokens.css the authoritative source of default
    foundation values.
  - Allow approved theme files to override existing brand
    and typography foundation tokens.
  - Remove reliance on the legacy token system.

  RULES
  - Default foundation values originate here.
  - Theme files may override existing brand and typography
    foundation tokens only.
  - Theme files must not introduce new foundation tokens.
  - Later packages consume these foundations.
  - Foundation tokens must not reference component or page roles.
*/


/* =======================================================
   A0.1 BRAND COLOR FOUNDATION
======================================================= */

--brand-primary:
  #B3F53C;

--brand-primary-rgb:
  179 245 60;

--brand-primary-hover:
  color-mix(
    in srgb,
    var(--brand-primary) 88%,
    var(--neutral-0)
  );

--brand-primary-active:
  color-mix(
    in srgb,
    var(--brand-primary) 88%,
    var(--neutral-900)
  );


--brand-accent:
  #B38CF5;

--brand-accent-rgb:
  179 140 245;

--brand-accent-hover:
  color-mix(
    in srgb,
    var(--brand-accent) 88%,
    var(--neutral-0)
  );

--brand-accent-active:
  color-mix(
    in srgb,
    var(--brand-accent) 88%,
    var(--neutral-900)
  );


/* =======================================================
   A0.2 NEUTRAL COLOR FOUNDATION
======================================================= */

--neutral-0:
  #ffffff;

--neutral-50:
  #f7f8fb;

--neutral-100:
  #e8edf2;

--neutral-200:
  #cbd5e1;

--neutral-300:
  #94a3b8;

--neutral-400:
  #64748b;

--neutral-500:
  #475569;

--neutral-600:
  #334155;

--neutral-700:
  #1f2937;

--neutral-800:
  #111827;

--neutral-900:
  #090b10;


/* =======================================================
   A0.3 STATUS COLOR FOUNDATION
======================================================= */

--success-500:
  #1f7a4d;

--success-500-rgb:
  31 122 77;


--warning-500:
  #a06a00;

--warning-500-rgb:
  160 106 0;


--danger-500:
  #b42318;

--danger-500-rgb:
  180 35 24;

--danger-600:
  color-mix(
    in srgb,
    var(--danger-500) 88%,
    var(--neutral-900)
  );

--danger-700:
  color-mix(
    in srgb,
    var(--danger-500) 76%,
    var(--neutral-900)
  );


--info-500:
  #2563eb;

--info-500-rgb:
  37 99 235;


/* =======================================================
   A0.4 ALPHA FOUNDATION
======================================================= */

--a-00:
  0;

--a-02:
  0.02;

--a-04:
  0.04;

--a-06:
  0.06;

--a-08:
  0.08;

--a-10:
  0.10;

--a-12:
  0.12;

--a-14:
  0.14;

--a-16:
  0.16;

--a-18:
  0.18;

--a-20:
  0.20;

--a-22:
  0.22;

--a-24:
  0.24;

--a-28:
  0.28;

--a-32:
  0.32;

--a-40:
  0.40;

--a-52:
  0.52;

--a-64:
  0.64;

--a-72:
  0.72;

--a-80:
  0.80;

--a-88:
  0.88;

--a-92:
  0.92;

--a-100:
  1;


/* =======================================================
   A0.5 CORE SPACING FOUNDATION
======================================================= */

/*
  The spacing ladder controls repeated spatial rhythm.

  Structural dimensions above this scale remain isolated
  in the dedicated dimension foundation.
*/

--space-1:
  4px;

--space-2:
  8px;

--space-3:
  12px;

--space-4:
  16px;

--space-5:
  24px;

--space-6:
  32px;

--space-7:
  40px;

--space-8:
  48px;

--space-9:
  64px;

--space-10:
  80px;

--space-11:
  96px;

--space-12:
  120px;


/* =======================================================
   A0.6 FOREGROUND COLOR HIERARCHY
======================================================= */

--fg-primary:
  var(--neutral-0);

--fg-secondary:
  var(--neutral-200);

--fg-tertiary:
  var(--neutral-300);

--fg-disabled:
  var(--neutral-500);


/* =======================================================
   A0.7 INVERSE FOREGROUND HIERARCHY
======================================================= */

--fg-inverse-primary:
  var(--neutral-900);

--fg-inverse-secondary:
  var(--neutral-700);

--fg-inverse-tertiary:
  var(--neutral-600);

--fg-inverse-disabled:
  var(--neutral-400);


/* =======================================================
   A0.8 BRAND FOREGROUND ROLES
======================================================= */

--fg-brand-primary:
  var(--brand-primary);

--fg-brand-accent:
  var(--brand-accent);

--fg-success:
  var(--success-500);

--fg-warning:
  var(--warning-500);

--fg-danger:
  var(--danger-500);

--fg-info:
  var(--info-500);





/* =========================================================
   PACKAGE A
   FOUNDATION NORMALIZATION
========================================================= */

/*
  PURPOSE
  - Establish authoritative raw-value foundations.
  - Remove repeated literal values from semantic tokens.
  - Separate spacing from structural dimensions.
  - Correct motion token typing.
  - Establish media, transform, and layering foundations.
  - Preserve compatibility with existing tokens during migration.

  RULES
  - Foundation tokens may contain literal values.
  - Semantic and component tokens must consume foundations.
  - Foundation tokens must not reference specific components.
  - Existing compatibility aliases remain until usage is audited.
*/


/* =======================================================
   A1. COLOR CHANNEL FOUNDATION
======================================================= */

/*
  Raw RGB channels support rgba() composition throughout
  shadows, borders, overlays, gradients, textures, and glass.
*/

--white-rgb: 255 255 255;
--black-rgb: 0 0 0;

--neutral-0-rgb: 255 255 255;
--neutral-50-rgb: 247 248 251;
--neutral-100-rgb: 232 237 242;
--neutral-200-rgb: 203 213 225;
--neutral-300-rgb: 148 163 184;
--neutral-400-rgb: 100 116 139;
--neutral-500-rgb: 71 85 105;
--neutral-600-rgb: 51 65 85;
--neutral-700-rgb: 31 41 55;
--neutral-800-rgb: 17 24 39;
--neutral-900-rgb: 9 11 16;

--surface-dark-rgb: 16 20 32;
--ink-dark-rgb: 17 24 29;


/* =======================================================
   A2. ALPHA FOUNDATION
======================================================= */

/*
  Existing alpha scale remains authoritative.

  No additional alpha tokens are introduced in Package A.
  New values should only be added after repeated real usage
  proves that the current scale cannot express a requirement.
*/


/* =======================================================
   A3. SPACING FOUNDATION
======================================================= */

/*
  The existing spacing rhythm remains authoritative.

  Intermediate values support compact controls without
  hiding literal values inside semantic spacing roles.
*/

--space-2-5: 10px;
--space-3-5: 14px;



/* =======================================================
   A4. STRUCTURAL DIMENSION FOUNDATION
======================================================= */

/*
  Large structural measurements are separated from the
  core spacing rhythm.

  These are dimensions, not spacing instructions.
*/

--dimension-130: 130px;
--dimension-140: 140px;
--dimension-150: 150px;
--dimension-160: 160px;
--dimension-170: 170px;
--dimension-180: 180px;
--dimension-190: 190px;
--dimension-200: 200px;
--dimension-220: 220px;
--dimension-240: 240px;
--dimension-280: 280px;
--dimension-540: 540px;

/* Rem-based structural dimensions */

--dimension-768: 48rem;
--dimension-896: 56rem;




/* =======================================================
   A5. LEGACY LARGE-SPACING COMPATIBILITY
======================================================= */

/*
  Compatibility aliases preserve current selector behaviour.

  These aliases should remain until all usage of the former
  large spacing tokens has been audited and migrated.
*/

--space-13: var(--dimension-130);
--space-14: var(--dimension-140);
--space-15: var(--dimension-150);
--space-16: var(--dimension-160);
--space-17: var(--dimension-170);
--space-18: var(--dimension-180);
--space-19: var(--dimension-190);
--space-20: var(--dimension-200);
--space-22: var(--dimension-220);
--space-24: var(--dimension-240);
--space-28: var(--dimension-280);
--space-54: var(--dimension-540);


/* =======================================================
   A6. RADIUS FOUNDATION
======================================================= */

/*
  Raw shape scale.

  Semantic shape roles such as cards, controls, panels, and
  modals must alias this foundation.
*/

--radius-none: 0;
--radius-xs: 2px;
--radius-sm: 4px;
--radius-md: 8px;
--radius-lg: 16px;
--radius-xl: 24px;
--radius-2xl: 32px;
--radius-pill: 999px;
--radius-round: 50%;


/* =======================================================
   A7. STROKE FOUNDATION
======================================================= */

/*
  Raw border and line-width scale.
*/

--stroke-0: 0;
--stroke-1: 1px;
--stroke-2: 2px;
--stroke-3: 3px;
--stroke-4: 4px;


/* =======================================================
   A8. BLUR FOUNDATION
======================================================= */

/*
  Raw blur values support glass, ambient effects,
  image treatment, loading masks, and motion.
*/

--blur-none: 0;
--blur-xs: 3px;
--blur-sm: 6px;
--blur-md: 12px;
--blur-lg: 20px;
--blur-xl: 32px;


/* =======================================================
   A9. TRANSFORM DISTANCE FOUNDATION
======================================================= */

/*
  Translation values are direction-neutral.

  Components determine whether the value is applied on the
  X axis, Y axis, or both.
*/

--translate-none: 0;
--translate-xs: 2px;
--translate-sm: 4px;
--translate-md: 8px;
--translate-lg: 12px;
--translate-xl: 16px;
--translate-2xl: 24px;


/* =======================================================
   A10. SCALE FOUNDATION
======================================================= */

/*
  Raw scale values for hover, active, entrance, and exit
  interactions.
*/

--scale-none: 1;
--scale-down-sm: 0.98;
--scale-down-md: 0.96;

--scale-up-xs: 1.01;
--scale-up-sm: 1.02;
--scale-up-md: 1.03;
--scale-up-lg: 1.05;


/* =======================================================
   A11. ROTATION FOUNDATION
======================================================= */

/*
  Raw rotation values support icons, glints, disclosure
  indicators, and controlled decorative motion.
*/

--rotate-none: 0deg;
--rotate-xs: 2deg;
--rotate-sm: 4deg;
--rotate-md: 8deg;
--rotate-quarter: 90deg;
--rotate-half: 180deg;
--rotate-full: 360deg;


/* =======================================================
   A12. LEGACY TRANSFORM COMPATIBILITY
======================================================= */

/*
  Existing transform names remain available while selectors
  migrate to the normalized foundation.
*/

--lift-1: var(--translate-xs);
--lift-2: var(--translate-sm);
--lift-3: var(--translate-md);

--scale-hover: var(--scale-up-sm);


/* =======================================================
   A13. ASPECT-RATIO FOUNDATION
======================================================= */

/*
  Raw media ratios.

  Semantic media roles will alias these values in later
  packages.
*/

--ratio-auto: auto;
--ratio-square: 1 / 1;
--ratio-landscape: 4 / 3;
--ratio-photo: 3 / 2;
--ratio-wide: 16 / 9;
--ratio-cinematic: 21 / 9;
--ratio-portrait: 3 / 4;
--ratio-poster: 2 / 3;
--ratio-story: 9 / 16;


/* =======================================================
   A14. OBJECT-FIT FOUNDATION
======================================================= */

/*
  Raw media-fit values.
*/

--fit-cover: cover;
--fit-contain: contain;
--fit-fill: fill;
--fit-none: none;
--fit-scale-down: scale-down;


/* =======================================================
   A15. OBJECT-POSITION FOUNDATION
======================================================= */

/*
  Raw focal positions for images and video.
*/

--position-center: center;
--position-top: center top;
--position-bottom: center bottom;
--position-left: left center;
--position-right: right center;
--position-top-left: left top;
--position-top-right: right top;
--position-bottom-left: left bottom;
--position-bottom-right: right bottom;


/* =======================================================
   A16. MOTION DURATION FOUNDATION
======================================================= */

/*
  Duration tokens contain duration values only.

  They must never reference complete transition strings.
*/

--duration-instant: 0ms;
--duration-xs: 120ms;
--duration-sm: 180ms;
--duration-md: 250ms;
--duration-lg: 400ms;
--duration-xl: 540ms;
--duration-2xl: 700ms;


/* =======================================================
   A17. MOTION DELAY FOUNDATION
======================================================= */

--delay-none: 0ms;
--delay-xs: 40ms;
--delay-sm: 80ms;
--delay-md: 120ms;
--delay-lg: 200ms;
--delay-xl: 300ms;
--delay-2xl: 540ms;


/* =======================================================
   A18. MOTION EASING FOUNDATION
======================================================= */

--ease-linear: linear;
--ease-standard: ease;
--ease-decelerate: cubic-bezier(0, 0, 0.2, 1);
--ease-accelerate: cubic-bezier(0.4, 0, 1, 1);
--ease-emphasized: cubic-bezier(0.2, 0, 0, 1);


/* =======================================================
   A19. MOTION TRANSITION FOUNDATION
======================================================= */

/*
  Transition tokens compose duration and easing.

  These are complete timing values and should not be used
  where CSS expects a duration alone.
*/

--transition-instant:
  var(--duration-instant)
  var(--ease-standard);

--transition-fast:
  var(--duration-sm)
  var(--ease-standard);

--transition-base:
  var(--duration-md)
  var(--ease-standard);

--transition-slow:
  var(--duration-lg)
  var(--ease-emphasized);

--transition-slower:
  var(--duration-xl)
  var(--ease-emphasized);


/* =======================================================
   A20. LEGACY MOTION COMPATIBILITY
======================================================= */

/*
  Existing motion names are preserved as aliases.

  The previous motion-duration values must be replaced with
  these duration-only references.
*/

--motion-hover: var(--transition-fast);
--motion-panel: var(--transition-base);
--motion-modal: var(--transition-slow);

--motion-duration-xs: var(--duration-xs);
--motion-duration-sm: var(--duration-sm);
--motion-duration-md: var(--duration-md);
--motion-duration-lg: var(--duration-lg);

--motion-delay-none: var(--delay-none);
--motion-delay-xs: var(--delay-xs);
--motion-delay-sm: var(--delay-sm);
--motion-delay-md: var(--delay-md);
--motion-delay-lg: var(--delay-lg);

--motion-stagger-sm: var(--delay-xs);
--motion-stagger-md: var(--delay-sm);
--motion-stagger-lg: var(--delay-md);
--motion-stagger-xl: var(--delay-2xl);


/* =======================================================
   A21. LOCAL COMPONENT LAYER FOUNDATION
======================================================= */

/*
  Local layers are intended for stacking inside a component.

  They must not compete with global application layers.
*/

--layer-underlay: -1;
--layer-base: 0;
--layer-content: 1;
--layer-decoration: 2;
--layer-control: 3;
--layer-floating: 4;


/* =======================================================
   A22. GLOBAL APPLICATION Z-INDEX FOUNDATION
======================================================= */

/*
  Global layers control stacking between independent systems.
*/

--z-page: 0;
--z-base: 1;
--z-header: 100;
--z-sticky: 200;
--z-dropdown: 300;
--z-drawer: 400;
--z-tooltip: 500;
--z-overlay: 600;
--z-modal: 700;
--z-notification: 800;
--z-toast: 900;
--z-debug: 9999;


/* =======================================================
   A23. RAW SHADOW COLOR FOUNDATION
======================================================= */

/*
  Raw shadow colours remove repeated literal channels from
  individual shadow definitions.
*/

--shadow-color-black-xs:
  rgba(var(--black-rgb) / var(--a-04));

--shadow-color-black-sm:
  rgba(var(--black-rgb) / var(--a-08));

--shadow-color-black-md:
  rgba(var(--black-rgb) / var(--a-12));

--shadow-color-black-lg:
  rgba(var(--black-rgb) / var(--a-18));

--shadow-color-ink-xs:
  rgba(var(--ink-dark-rgb) / var(--a-06));

--shadow-color-ink-sm:
  rgba(var(--ink-dark-rgb) / var(--a-08));

--shadow-color-ink-md:
  rgba(var(--ink-dark-rgb) / var(--a-10));

--shadow-color-ink-lg:
  rgba(var(--ink-dark-rgb) / var(--a-14));


/* =======================================================
   A24. RAW BORDER COLOR FOUNDATION
======================================================= */

/*
  Raw border colours.

  Semantic border roles will consume these foundations.
*/

--border-color-dark-subtle:
  rgba(var(--ink-dark-rgb) / var(--a-10));

--border-color-dark-strong:
  rgba(var(--ink-dark-rgb) / var(--a-18));

--border-color-light-subtle:
  rgba(var(--white-rgb) / var(--a-10));

--border-color-light-standard:
  rgba(var(--white-rgb) / var(--a-18));

--border-color-light-strong:
  rgba(var(--white-rgb) / var(--a-28));


/* =======================================================
   A25. RAW OVERLAY COLOR FOUNDATION
======================================================= */

--overlay-black-xs:
  rgba(var(--black-rgb) / var(--a-10));

--overlay-black-sm:
  rgba(var(--black-rgb) / var(--a-20));

--overlay-black-md:
  rgba(var(--black-rgb) / var(--a-40));

--overlay-black-lg:
  rgba(var(--black-rgb) / var(--a-64));

--overlay-white-xs:
  rgba(var(--white-rgb) / var(--a-04));

--overlay-white-sm:
  rgba(var(--white-rgb) / var(--a-08));

--overlay-white-md:
  rgba(var(--white-rgb) / var(--a-16));

--overlay-white-lg:
  rgba(var(--white-rgb) / var(--a-24));


/* =======================================================
   A26. RAW SURFACE COLOR FOUNDATION
======================================================= */

/*
  Raw dark-surface values support glass and elevated
  backgrounds without repeating literal channels.
*/

--surface-dark-a-04:
  rgba(var(--surface-dark-rgb) / var(--a-04));

--surface-dark-a-06:
  rgba(var(--surface-dark-rgb) / var(--a-06));

--surface-dark-a-08:
  rgba(var(--surface-dark-rgb) / var(--a-08));

--surface-dark-a-72:
  rgba(var(--surface-dark-rgb) / var(--a-72));

--surface-dark-a-80:
  rgba(var(--surface-dark-rgb) / var(--a-80));

--surface-dark-a-92:
  rgba(var(--surface-dark-rgb) / var(--a-92));


/* =======================================================
   A27. FOUNDATION COMPATIBILITY ALIASES
======================================================= */

/*
  Existing foundation names remain operational.

  These aliases should replace literal values in their
  original sections.
*/


--border-subtle: var(--border-color-dark-subtle);


--color-border:
  var(--border-color-light-subtle);

--color-border-strong:
  var(--border-color-light-standard);

--color-border-inverse:
  var(--border-color-light-standard);

/* =======================================================
  A28. GLOBAL LAYER SEMANTIC CONTRACTS
======================================================= */

--layer-header:
  var(--z-header);

--layer-sticky:
  var(--z-sticky);

--layer-dropdown:
  var(--z-dropdown);

--layer-drawer:
  var(--z-drawer);

--layer-tooltip:
  var(--z-tooltip);

--layer-overlay:
  var(--z-overlay);

--layer-modal:
  var(--z-modal);

--layer-notification:
  var(--z-notification);

--layer-toast:
  var(--z-toast);

--layer-maximum:
  var(--z-debug);


/* =======================================================
   A29. OVERLAY SEMANTIC CONTRACTS
======================================================= */

--overlay-neutral-subtle:
  var(--overlay-black-sm);

--overlay-neutral-medium:
  var(--overlay-black-md);

--overlay-neutral-strong:
  var(--overlay-black-lg);


/* =======================================================
   A30. GLASS BLUR SEMANTIC CONTRACTS
======================================================= */

--glass-blur-sm:
  var(--blur-sm);

--glass-blur-md:
  var(--blur-md);

--glass-blur-lg:
  var(--blur-lg);


/* =======================================================
  A31. SEMANTIC SHAPE CONTRACTS
======================================================= */

--radius-card:
  var(--radius-lg);

--radius-card-raised:
  var(--radius-xl);

--radius-panel:
  var(--radius-lg);

--radius-panel-raised:
  var(--radius-xl);

--radius-modal:
  var(--radius-xl);

--radius-floating:
  var(--radius-lg);





/* =======================================================
   A32. PACKAGE A GOVERNANCE
======================================================= */

/*
  FOUNDATION TOKEN RULES

  1.Default raw values may only originate in foundation sections.
   Approved theme files may override existing brand and
   typography foundation values.

  2. Semantic tokens must consume foundation tokens.

  3.Component → Semantic

Semantic → Foundation

Foundation → Raw

  4.Page, application, and component tokens must not redefine
   global foundations. Theme-level brand and typography
   overrides are the only exception.

  5. Duration tokens contain only time values.

  6. Transition tokens contain duration and easing.

  7. Local layers must not use global z-index values.

  8. Global z-index tokens must not be used for decorative
     layering inside components.

  9. Large structural dimensions must not be added to the
     core spacing rhythm.
10. Compatibility aliases remain until selector usage has
    been audited and migrated.
*/

/* =========================================================
   PACKAGE B
   FLUID TYPOGRAPHY + TYPE CONTRACTS
========================================================= */

/*
  PURPOSE
  - Create a complete typography foundation.
  - Separate raw type values from semantic text roles.
  - Centralize responsive typography.
  - Establish consistent leading, tracking, weight, and measure.
  - Prevent components from inventing local clamp() formulas.

  RULES
  - Raw type scales belong in foundation sections.
  - Semantic roles describe communication intent.
  - Components consume semantic roles.
  - Page-specific typography must not redefine global roles.
*/


/* =======================================================
   B1. FONT FAMILY FOUNDATION
======================================================= */

--font-body:
  "Bebas Neue",
  sans-serif;

--font-heading:
  "Bebas Neue",
  sans-serif;

--font-display:
  "Bebas Neue",
  sans-serif;

--font-brand:
  "Gelato Luxe",
  cursive;

--font-mono:
  "Courier New",
  monospace;


/* =======================================================
   B2. FONT WEIGHT FOUNDATION
======================================================= */

--weight-light: 300;
--weight-regular: 400;
--weight-medium: 500;
--weight-semibold: 600;
--weight-bold: 700;
--weight-extrabold: 800;


/* =======================================================
   B3. STATIC TYPE-SIZE FOUNDATION
======================================================= */

/*
  Static sizes remain available for controls, labels,
  metadata, dense application UI, and non-fluid contexts.
*/

--text-xs: 0.75rem;
--text-sm: 0.875rem;
--text-base: 1rem;
--text-md: 1.125rem;
--text-lg: 1.25rem;
--text-xl: 1.5rem;
--text-2xl: 1.875rem;
--text-3xl: 2.25rem;
--text-4xl: 3rem;
--text-5xl: 3.75rem;
--text-6xl: 4.5rem;
--text-7xl: 6rem;


/* =======================================================
   B4. FLUID TYPE-SIZE FOUNDATION
======================================================= */

/*
  Fluid sizes scale between compact and wide viewports.

  These tokens contain size values only.
*/

--text-fluid-xs:
  clamp(
    var(--text-xs),
    0.72rem + 0.12vw,
    var(--text-sm)
  );

--text-fluid-sm:
  clamp(
    var(--text-sm),
    0.82rem + 0.18vw,
    var(--text-base)
  );

--text-fluid-base:
  clamp(
    var(--text-base),
    0.95rem + 0.24vw,
    var(--text-md)
  );

--text-fluid-md:
  clamp(
    var(--text-md),
    1rem + 0.45vw,
    var(--text-lg)
  );

--text-fluid-lg:
  clamp(
    var(--text-lg),
    1.08rem + 0.72vw,
    var(--text-xl)
  );

--text-fluid-xl:
  clamp(
    var(--text-xl),
    1.18rem + 1.2vw,
    var(--text-2xl)
  );

--text-fluid-2xl:
  clamp(
    var(--text-2xl),
    1.35rem + 1.8vw,
    var(--text-3xl)
  );

--text-fluid-3xl:
  clamp(
    var(--text-3xl),
    1.55rem + 2.5vw,
    var(--text-4xl)
  );

--text-fluid-4xl:
  clamp(
    var(--text-4xl),
    1.8rem + 3.4vw,
    var(--text-5xl)
  );

--text-fluid-5xl:
  clamp(
    var(--text-5xl),
    2.1rem + 4.3vw,
    var(--text-6xl)
  );

--text-fluid-6xl:
  clamp(
    var(--text-6xl),
    2.4rem + 5.8vw,
    var(--text-7xl)
  );


/* =======================================================
   B5. LINE-HEIGHT FOUNDATION
======================================================= */

--lh-none: 1;
--lh-display: 1.02;
--lh-tight: 1.1;
--lh-compact: 1.2;
--lh-snug: 1.35;
--lh-base: 1.5;
--lh-relaxed: 1.65;
--lh-loose: 1.8;


/* =======================================================
   B6. LETTER-SPACING FOUNDATION
======================================================= */

--track-tighter: -0.04em;
--track-tight: -0.02em;
--track-base: 0;
--track-wide: 0.04em;
--track-wide-lg: 0.08em;
--track-wide-xl: 0.14em;


/* =======================================================
   B7. TEXT-TRANSFORM FOUNDATION
======================================================= */

--transform-none: none;
--transform-uppercase: uppercase;
--transform-lowercase: lowercase;
--transform-capitalize: capitalize;


/* =======================================================
   B8. TEXT-DECORATION FOUNDATION
======================================================= */

--decoration-none: none;
--decoration-underline: underline;

--decoration-thickness-sm:
  var(--stroke-1);

--decoration-thickness-md:
  var(--stroke-2);

--decoration-offset-sm:
  var(--space-1);

--decoration-offset-md:
  var(--space-2);


/* =======================================================
   B9. TEXT MEASURE FOUNDATION
======================================================= */

/*
  Measures control readable line length.

  They describe content width, not container structure.
*/

--measure-narrow: 24ch;
--measure-compact: 32ch;
--measure-default: 48ch;
--measure-reading: 62ch;
--measure-wide: 72ch;
--measure-legal: 80ch;


/* =======================================================
   B10. FONT FEATURE FOUNDATION
======================================================= */

--font-feature-normal: normal;

--font-feature-tabular:
  "tnum" 1,
  "lnum" 1;

--font-feature-oldstyle:
  "onum" 1;

--font-feature-small-caps:
  "smcp" 1;


/* =======================================================
   B11. BODY TEXT CONTRACTS
======================================================= */

--type-body-font:
  var(--font-body);

--type-body-size:
  var(--text-fluid-base);

--type-body-leading:
  var(--lh-base);

--type-body-weight:
  var(--weight-regular);

--type-body-tracking:
  var(--track-base);

--type-body-measure:
  var(--measure-reading);


--type-body-sm-font:
  var(--font-body);

--type-body-sm-size:
  var(--text-fluid-sm);

--type-body-sm-leading:
  var(--lh-base);

--type-body-sm-weight:
  var(--weight-regular);

--type-body-sm-tracking:
  var(--track-base);

--type-body-sm-measure:
  var(--measure-default);


--type-body-lg-font:
  var(--font-body);

--type-body-lg-size:
  var(--text-fluid-md);

--type-body-lg-leading:
  var(--lh-relaxed);

--type-body-lg-weight:
  var(--weight-regular);

--type-body-lg-tracking:
  var(--track-base);

--type-body-lg-measure:
  var(--measure-reading);


/* =======================================================
   B12. LEAD TEXT CONTRACT
======================================================= */

--type-lead-font:
  var(--font-body);

--type-lead-size:
  var(--text-fluid-lg);

--type-lead-leading:
  var(--lh-relaxed);

--type-lead-weight:
  var(--weight-regular);

--type-lead-tracking:
  var(--track-base);

--type-lead-measure:
  var(--measure-default);


/* =======================================================
   B13. CARD HEADING CONTRACT
======================================================= */

--type-heading-card-font:
  var(--font-heading);

--type-heading-card-size:
  var(--text-fluid-xl);

--type-heading-card-leading:
  var(--lh-tight);

--type-heading-card-weight:
  var(--weight-bold);

--type-heading-card-tracking:
  var(--track-wide);

--type-heading-card-transform:
  var(--transform-uppercase);

--type-heading-card-measure:
  var(--measure-compact);


/* =======================================================
   B14. SECTION HEADING CONTRACT
======================================================= */

--type-heading-section-font:
  var(--font-heading);

--type-heading-section-size:
  var(--text-fluid-3xl);

--type-heading-section-leading:
  var(--lh-tight);

--type-heading-section-weight:
  var(--weight-bold);

--type-heading-section-tracking:
  var(--track-wide);

--type-heading-section-transform:
  var(--transform-uppercase);

--type-heading-section-measure:
  var(--measure-default);


/* =======================================================
   B15. FEATURE HEADING CONTRACT
======================================================= */

--type-heading-feature-font:
  var(--font-display);

--type-heading-feature-size:
  var(--text-fluid-4xl);

--type-heading-feature-leading:
  var(--lh-display);

--type-heading-feature-weight:
  var(--weight-bold);

--type-heading-feature-tracking:
  var(--track-wide);

--type-heading-feature-transform:
  var(--transform-uppercase);

--type-heading-feature-measure:
  var(--measure-default);


/* =======================================================
   B16. HERO HEADING CONTRACT
======================================================= */

--type-heading-hero-font:
  var(--font-display);

--type-heading-hero-size:
  var(--text-fluid-5xl);

--type-heading-hero-leading:
  var(--lh-display);

--type-heading-hero-weight:
  var(--weight-bold);

--type-heading-hero-tracking:
  var(--track-wide);

--type-heading-hero-transform:
  var(--transform-uppercase);

--type-heading-hero-measure:
  var(--measure-default);


/* =======================================================
   B17. DISPLAY HEADING CONTRACT
======================================================= */

--type-heading-display-font:
  var(--font-display);

--type-heading-display-size:
  var(--text-fluid-6xl);

--type-heading-display-leading:
  var(--lh-none);

--type-heading-display-weight:
  var(--weight-bold);

--type-heading-display-tracking:
  var(--track-tight);

--type-heading-display-transform:
  var(--transform-uppercase);

--type-heading-display-measure:
  var(--measure-wide);


/* =======================================================
   B18. EYEBROW CONTRACT
======================================================= */

--type-eyebrow-font:
  var(--font-heading);

--type-eyebrow-size:
  var(--text-fluid-xs);

--type-eyebrow-leading:
  var(--lh-compact);

--type-eyebrow-weight:
  var(--weight-bold);

--type-eyebrow-tracking:
  var(--track-wide-xl);

--type-eyebrow-transform:
  var(--transform-uppercase);


/* =======================================================
   B19. LABEL CONTRACT
======================================================= */

--type-label-font:
  var(--font-body);

--type-label-size:
  var(--text-sm);

--type-label-leading:
  var(--lh-compact);

--type-label-weight:
  var(--weight-semibold);

--type-label-tracking:
  var(--track-wide);

--type-label-transform:
  var(--transform-uppercase);


/* =======================================================
   B20. CONTROL TEXT CONTRACT
======================================================= */

--type-control-font:
  var(--font-body);

--type-control-size:
  var(--text-base);

--type-control-leading:
  var(--lh-none);

--type-control-weight:
  var(--weight-semibold);

--type-control-tracking:
  var(--track-wide);

--type-control-transform:
  var(--transform-uppercase);


/* =======================================================
   B21. CAPTION CONTRACT
======================================================= */

--type-caption-font:
  var(--font-body);

--type-caption-size:
  var(--text-xs);

--type-caption-leading:
  var(--lh-base);

--type-caption-weight:
  var(--weight-regular);

--type-caption-tracking:
  var(--track-base);

--type-caption-measure:
  var(--measure-compact);


/* =======================================================
   B22. METADATA CONTRACT
======================================================= */

--type-meta-font:
  var(--font-body);

--type-meta-size:
  var(--text-xs);

--type-meta-leading:
  var(--lh-compact);

--type-meta-weight:
  var(--weight-medium);

--type-meta-tracking:
  var(--track-wide);

--type-meta-transform:
  var(--transform-uppercase);


/* =======================================================
   B23. CALLOUT CONTRACT
======================================================= */

--type-callout-font:
  var(--font-body);

--type-callout-size:
  var(--text-fluid-md);

--type-callout-leading:
  var(--lh-snug);

--type-callout-weight:
  var(--weight-semibold);

--type-callout-tracking:
  var(--track-base);

--type-callout-measure:
  var(--measure-default);


/* =======================================================
   B24. QUOTE CONTRACT
======================================================= */

--type-quote-font:
  var(--font-body);

--type-quote-size:
  var(--text-fluid-lg);

--type-quote-leading:
  var(--lh-relaxed);

--type-quote-weight:
  var(--weight-regular);

--type-quote-tracking:
  var(--track-base);

--type-quote-measure:
  var(--measure-reading);


/* =======================================================
   B25. LEGAL TEXT CONTRACT
======================================================= */

--type-legal-font:
  var(--font-body);

--type-legal-size:
  var(--text-xs);

--type-legal-leading:
  var(--lh-relaxed);

--type-legal-weight:
  var(--weight-regular);

--type-legal-tracking:
  var(--track-base);

--type-legal-measure:
  var(--measure-legal);


/* =======================================================
   B26. STATISTIC CONTRACTS
======================================================= */

--type-stat-sm-font:
  var(--font-display);

--type-stat-sm-size:
  var(--text-fluid-xl);

--type-stat-sm-leading:
  var(--lh-none);

--type-stat-sm-weight:
  var(--weight-bold);

--type-stat-sm-tracking:
  var(--track-tight);

--type-stat-sm-feature:
  var(--font-feature-tabular);


--type-stat-md-font:
  var(--font-display);

--type-stat-md-size:
  var(--text-fluid-3xl);

--type-stat-md-leading:
  var(--lh-none);

--type-stat-md-weight:
  var(--weight-bold);

--type-stat-md-tracking:
  var(--track-tight);

--type-stat-md-feature:
  var(--font-feature-tabular);


--type-stat-lg-font:
  var(--font-display);

--type-stat-lg-size:
  var(--text-fluid-5xl);

--type-stat-lg-leading:
  var(--lh-none);

--type-stat-lg-weight:
  var(--weight-bold);

--type-stat-lg-tracking:
  var(--track-tight);

--type-stat-lg-feature:
  var(--font-feature-tabular);


/* =======================================================
   B27. PRICE CONTRACTS
======================================================= */

--type-price-sm-font:
  var(--font-display);

--type-price-sm-size:
  var(--text-fluid-xl);

--type-price-sm-leading:
  var(--lh-none);

--type-price-sm-weight:
  var(--weight-bold);

--type-price-sm-tracking:
  var(--track-tight);

--type-price-sm-feature:
  var(--font-feature-tabular);


--type-price-md-font:
  var(--font-display);

--type-price-md-size:
  var(--text-fluid-3xl);

--type-price-md-leading:
  var(--lh-none);

--type-price-md-weight:
  var(--weight-bold);

--type-price-md-tracking:
  var(--track-tight);

--type-price-md-feature:
  var(--font-feature-tabular);


--type-price-lg-font:
  var(--font-display);

--type-price-lg-size:
  var(--text-fluid-5xl);

--type-price-lg-leading:
  var(--lh-none);

--type-price-lg-weight:
  var(--weight-bold);

--type-price-lg-tracking:
  var(--track-tight);

--type-price-lg-feature:
  var(--font-feature-tabular);


/* =======================================================
   B28. BRAND SCRIPT CONTRACTS
======================================================= */

--type-brand-sm-font:
  var(--font-brand);

--type-brand-sm-size:
  var(--text-fluid-lg);

--type-brand-sm-leading:
  var(--lh-tight);

--type-brand-sm-weight:
  var(--weight-regular);

--type-brand-sm-tracking:
  var(--track-base);


--type-brand-md-font:
  var(--font-brand);

--type-brand-md-size:
  var(--text-fluid-2xl);

--type-brand-md-leading:
  var(--lh-tight);

--type-brand-md-weight:
  var(--weight-regular);

--type-brand-md-tracking:
  var(--track-base);


--type-brand-lg-font:
  var(--font-brand);

--type-brand-lg-size:
  var(--text-fluid-4xl);

--type-brand-lg-leading:
  var(--lh-display);

--type-brand-lg-weight:
  var(--weight-regular);

--type-brand-lg-tracking:
  var(--track-base);


/* =======================================================
   B29. NAVIGATION TEXT CONTRACT
======================================================= */

--type-nav-font:
  var(--font-body);

--type-nav-size:
  var(--text-sm);

--type-nav-leading:
  var(--lh-none);

--type-nav-weight:
  var(--weight-semibold);

--type-nav-tracking:
  var(--track-wide-lg);

--type-nav-transform:
  var(--transform-uppercase);


/* =======================================================
   B30. BREADCRUMB CONTRACT
======================================================= */

--type-breadcrumb-font:
  var(--font-body);

--type-breadcrumb-size:
  var(--text-sm);

--type-breadcrumb-leading:
  var(--lh-compact);

--type-breadcrumb-weight:
  var(--weight-medium);

--type-breadcrumb-tracking:
  var(--track-wide);


/* =======================================================
   B31. FORM TEXT CONTRACTS
======================================================= */

--type-field-font:
  var(--font-body);

--type-field-size:
  var(--text-base);

--type-field-leading:
  var(--lh-base);

--type-field-weight:
  var(--weight-regular);

--type-field-tracking:
  var(--track-base);


--type-field-label-font:
  var(--font-body);

--type-field-label-size:
  var(--text-sm);

--type-field-label-leading:
  var(--lh-compact);

--type-field-label-weight:
  var(--weight-semibold);

--type-field-label-tracking:
  var(--track-wide);


--type-field-helper-font:
  var(--font-body);

--type-field-helper-size:
  var(--text-xs);

--type-field-helper-leading:
  var(--lh-base);

--type-field-helper-weight:
  var(--weight-regular);

--type-field-helper-tracking:
  var(--track-base);


/* =======================================================
   B32. TABLE TEXT CONTRACTS
======================================================= */

--type-table-header-font:
  var(--font-body);

--type-table-header-size:
  var(--text-sm);

--type-table-header-leading:
  var(--lh-compact);

--type-table-header-weight:
  var(--weight-semibold);

--type-table-header-tracking:
  var(--track-wide);

--type-table-header-transform:
  var(--transform-uppercase);


--type-table-cell-font:
  var(--font-body);

--type-table-cell-size:
  var(--text-sm);

--type-table-cell-leading:
  var(--lh-base);

--type-table-cell-weight:
  var(--weight-regular);

--type-table-cell-tracking:
  var(--track-base);


/* =======================================================
   B33. CODE AND TECHNICAL TEXT CONTRACT
======================================================= */

--type-code-font:
  var(--font-mono);

--type-code-size:
  var(--text-sm);

--type-code-leading:
  var(--lh-base);

--type-code-weight:
  var(--weight-regular);

--type-code-tracking:
  var(--track-base);

--type-code-feature:
  var(--font-feature-tabular);


/* =======================================================
   B34. LEGACY TYPOGRAPHY COMPATIBILITY
======================================================= */

/*
  Existing generic typography roles can temporarily map into
  the expanded system.

  Remove only after selector usage has been audited.
*/

--font-size-body:
  var(--type-body-size);

--font-size-body-sm:
  var(--type-body-sm-size);

--font-size-body-lg:
  var(--type-body-lg-size);

--font-size-label:
  var(--type-label-size);

--font-size-caption:
  var(--type-caption-size);

--font-size-eyebrow:
  var(--type-eyebrow-size);

--font-size-card-title:
  var(--type-heading-card-size);

--font-size-section-title:
  var(--type-heading-section-size);

--font-size-feature-title:
  var(--type-heading-feature-size);

--font-size-hero-title:
  var(--type-heading-hero-size);

/* =======================================================
   B35. GENERIC STATISTIC CONTRACT
======================================================= */

--type-stat-font:
  var(--type-stat-md-font);

--type-stat-size:
  var(--type-stat-md-size);

--type-stat-leading:
  var(--type-stat-md-leading);

--type-stat-weight:
  var(--type-stat-md-weight);

--type-stat-tracking:
  var(--type-stat-md-tracking);

--type-stat-feature:
  var(--type-stat-md-feature);


/* =======================================================
   B36. GENERIC PRICE CONTRACT
======================================================= */

--type-price-font:
  var(--type-price-md-font);

--type-price-size:
  var(--type-price-md-size);

--type-price-leading:
  var(--type-price-md-leading);

--type-price-weight:
  var(--type-price-md-weight);

--type-price-tracking:
  var(--type-price-md-tracking);

--type-price-feature:
  var(--type-price-md-feature);
/* =======================================================
   B37. TYPE CONTRACT GOVERNANCE
======================================================= */

/*
  TYPOGRAPHY RULES

  1. Components must not define local clamp() formulas.

  2. Font-size tokens contain size values only.

  3. Line-height tokens contain unitless leading values.

  4. Tracking tokens contain letter-spacing values only.

  5. Semantic type roles must define:
     - font family
     - size
     - line height
     - weight
     - tracking

  6. Text measure is applied by layout or content wrappers,
     not directly by unrelated visual components.

  7. Brand script roles are reserved for deliberate brand
     moments and must not replace general body typography.

  8. Price, distance, quantity, and dashboard values should
     use tabular numeric features.

  9. Heading roles describe hierarchy, not HTML element
     names. An h2 may consume a feature role when hierarchy
     and design intent require it.

10. Page-specific typography may alias global roles but
    must not redefine the global scale. Theme files may
    override approved font-family foundation tokens without
    redefining semantic type roles or the global type scale.

  11. Static sizes remain valid for controls and dense UI.
      Fluid sizes are preferred for editorial and display
      typography.

  12. Compatibility aliases remain until all selectors have
      been audited and migrated.
*/

/* =========================================================
   PACKAGE C
   SURFACE + BORDER + ELEVATION HIERARCHY
========================================================= */

/*
  PURPOSE
  - Establish a controlled depth system.
  - Separate raw visual foundations from semantic surfaces.
  - Coordinate backgrounds, borders, highlights, and shadows.
  - Standardize cards, panels, floating surfaces, and overlays.
  - Prevent components from inventing local depth recipes.

  RULES
  - Raw values remain in foundation sections.
  - Semantic surfaces describe visual depth and purpose.
  - Component families consume semantic surface roles.
  - Page-specific effects may alias global roles.
  - Surface depth must remain visually consistent site-wide.
*/


/* =======================================================
   C1. SURFACE COLOR FOUNDATION
======================================================= */

/*
  Raw opaque surface colours.

  These establish the dark RH Media interface hierarchy.
*/

--surface-0:
  var(--neutral-900);

--surface-1:
  var(--neutral-800);

--surface-2:
  var(--neutral-700);

--surface-3:
  var(--neutral-600);

--surface-4:
  var(--neutral-500);

--surface-light:
  var(--neutral-0);


/* =======================================================
   C2. TRANSLUCENT SURFACE FOUNDATION
======================================================= */

--surface-alpha-02:
  rgba(var(--surface-dark-rgb) / var(--a-02));

--surface-alpha-04:
  rgba(var(--surface-dark-rgb) / var(--a-04));

--surface-alpha-06:
  rgba(var(--surface-dark-rgb) / var(--a-06));

--surface-alpha-08:
  rgba(var(--surface-dark-rgb) / var(--a-08));

--surface-alpha-10:
  rgba(var(--surface-dark-rgb) / var(--a-10));

--surface-alpha-12:
  rgba(var(--surface-dark-rgb) / var(--a-12));

--surface-alpha-16:
  rgba(var(--surface-dark-rgb) / var(--a-16));

--surface-alpha-20:
  rgba(var(--surface-dark-rgb) / var(--a-20));

--surface-alpha-28:
  rgba(var(--surface-dark-rgb) / var(--a-28));

--surface-alpha-40:
  rgba(var(--surface-dark-rgb) / var(--a-40));

--surface-alpha-64:
  rgba(var(--surface-dark-rgb) / var(--a-64));

--surface-alpha-72:
  rgba(var(--surface-dark-rgb) / var(--a-72));

--surface-alpha-80:
  rgba(var(--surface-dark-rgb) / var(--a-80));

--surface-alpha-92:
  rgba(var(--surface-dark-rgb) / var(--a-92));


/* =======================================================
   C3. LIGHT SURFACE FOUNDATION
======================================================= */

--surface-light-alpha-02:
  rgba(var(--white-rgb) / var(--a-02));

--surface-light-alpha-04:
  rgba(var(--white-rgb) / var(--a-04));

--surface-light-alpha-06:
  rgba(var(--white-rgb) / var(--a-06));

--surface-light-alpha-08:
  rgba(var(--white-rgb) / var(--a-08));

--surface-light-alpha-10:
  rgba(var(--white-rgb) / var(--a-10));

--surface-light-alpha-12:
  rgba(var(--white-rgb) / var(--a-12));

--surface-light-alpha-16:
  rgba(var(--white-rgb) / var(--a-16));

--surface-light-alpha-20:
  rgba(var(--white-rgb) / var(--a-20));

--surface-light-alpha-28:
  rgba(var(--white-rgb) / var(--a-28));


/* =======================================================
   C4. BRAND SURFACE FOUNDATION
======================================================= */

--surface-primary-subtle:
  rgba(var(--brand-primary-rgb) / var(--a-06));

--surface-primary-muted:
  rgba(var(--brand-primary-rgb) / var(--a-10));

--surface-primary-standard:
  rgba(var(--brand-primary-rgb) / var(--a-16));

--surface-primary-strong:
  rgba(var(--brand-primary-rgb) / var(--a-24));


--surface-accent-subtle:
  rgba(var(--brand-accent-rgb) / var(--a-06));

--surface-accent-muted:
  rgba(var(--brand-accent-rgb) / var(--a-10));

--surface-accent-standard:
  rgba(var(--brand-accent-rgb) / var(--a-16));

--surface-accent-strong:
  rgba(var(--brand-accent-rgb) / var(--a-24));


/* =======================================================
   C5. BORDER COLOR FOUNDATION
======================================================= */

--border-dark-quiet:
  rgba(var(--ink-dark-rgb) / var(--a-06));

--border-dark-subtle:
  rgba(var(--ink-dark-rgb) / var(--a-10));

--border-dark-default:
  rgba(var(--ink-dark-rgb) / var(--a-16));

--border-dark-strong:
  rgba(var(--ink-dark-rgb) / var(--a-24));

--border-dark-emphasis:
  rgba(var(--ink-dark-rgb) / var(--a-40));


--border-light-quiet:
  rgba(var(--white-rgb) / var(--a-04));

--border-light-subtle:
  rgba(var(--white-rgb) / var(--a-08));

--border-light-default:
  rgba(var(--white-rgb) / var(--a-14));

--border-light-strong:
  rgba(var(--white-rgb) / var(--a-22));

--border-light-emphasis:
  rgba(var(--white-rgb) / var(--a-32));


/* =======================================================
   C6. BRAND BORDER FOUNDATION
======================================================= */

--border-primary-subtle:
  rgba(var(--brand-primary-rgb) / var(--a-18));

--border-primary-default:
  rgba(var(--brand-primary-rgb) / var(--a-32));

--border-primary-strong:
  rgba(var(--brand-primary-rgb) / var(--a-52));

--border-primary-solid:
  var(--brand-primary);


--border-accent-subtle:
  rgba(var(--brand-accent-rgb) / var(--a-18));

--border-accent-default:
  rgba(var(--brand-accent-rgb) / var(--a-32));

--border-accent-strong:
  rgba(var(--brand-accent-rgb) / var(--a-52));

--border-accent-solid:
  var(--brand-accent);


/* =======================================================
   C7. SHADOW COLOR FOUNDATION
======================================================= */

--shadow-black-04:
  rgba(var(--black-rgb) / var(--a-04));

--shadow-black-08:
  rgba(var(--black-rgb) / var(--a-08));

--shadow-black-12:
  rgba(var(--black-rgb) / var(--a-12));

--shadow-black-18:
  rgba(var(--black-rgb) / var(--a-18));

--shadow-black-24:
  rgba(var(--black-rgb) / var(--a-24));

--shadow-black-32:
  rgba(var(--black-rgb) / var(--a-32));

--shadow-black-40:
  rgba(var(--black-rgb) / var(--a-40));

--shadow-black-52:
  rgba(var(--black-rgb) / var(--a-52));

--shadow-black-64:
  rgba(var(--black-rgb) / var(--a-64));


/* =======================================================
   C8. BRAND SHADOW COLOR FOUNDATION
======================================================= */

--shadow-primary-subtle:
  rgba(var(--brand-primary-rgb) / var(--a-10));

--shadow-primary-default:
  rgba(var(--brand-primary-rgb) / var(--a-18));

--shadow-primary-strong:
  rgba(var(--brand-primary-rgb) / var(--a-28));


--shadow-accent-subtle:
  rgba(var(--brand-accent-rgb) / var(--a-10));

--shadow-accent-default:
  rgba(var(--brand-accent-rgb) / var(--a-18));

--shadow-accent-strong:
  rgba(var(--brand-accent-rgb) / var(--a-28));


/* =======================================================
   C9. CONTACT SHADOW FOUNDATION
======================================================= */

/*
  Contact shadows visually anchor surfaces to the layer
  immediately beneath them.
*/

--shadow-contact-xs:
  0
  var(--translate-xs)
  var(--translate-sm)
  var(--shadow-black-08);

--shadow-contact-sm:
  0
  var(--translate-sm)
  var(--translate-md)
  var(--shadow-black-12);

--shadow-contact-md:
  0
  var(--translate-md)
  var(--translate-lg)
  var(--shadow-black-18);

--shadow-contact-lg:
  0
  var(--translate-lg)
  var(--translate-2xl)
  var(--shadow-black-24);


/* =======================================================
   C10. AMBIENT SHADOW FOUNDATION
======================================================= */

/*
  Ambient shadows create broad, soft separation.
*/

--shadow-ambient-xs:
  0
  0
  var(--translate-md)
  var(--shadow-black-04);

--shadow-ambient-sm:
  0
  0
  var(--translate-lg)
  var(--shadow-black-08);

--shadow-ambient-md:
  0
  0
  var(--translate-2xl)
  var(--shadow-black-12);

--shadow-ambient-lg:
  0
  0
  var(--dimension-130)
  var(--shadow-black-18);


/* =======================================================
   C11. FLOATING SHADOW FOUNDATION
======================================================= */

/*
  Floating shadows are reserved for overlays, drawers,
  menus, tooltips, and modals.
*/

--shadow-floating-sm:
  0
  var(--translate-md)
  var(--translate-2xl)
  var(--shadow-black-24);

--shadow-floating-md:
  0
  var(--translate-lg)
  var(--dimension-140)
  var(--shadow-black-32);

--shadow-floating-lg:
  0
  var(--translate-2xl)
  var(--dimension-180)
  var(--shadow-black-40);


/* =======================================================
   C12. INSET SHADOW FOUNDATION
======================================================= */

--shadow-inset-subtle:
  inset
  0
  0
  0
  var(--stroke-1)
  var(--border-light-quiet);

--shadow-inset-default:
  inset
  0
  0
  0
  var(--stroke-1)
  var(--border-light-subtle);

--shadow-inset-strong:
  inset
  0
  0
  0
  var(--stroke-1)
  var(--border-light-default);


/* =======================================================
   C13. INSET HIGHLIGHT FOUNDATION
======================================================= */

--highlight-inset-soft:
  inset
  0
  var(--stroke-1)
  0
  var(--surface-light-alpha-04);

--highlight-inset-standard:
  inset
  0
  var(--stroke-1)
  0
  var(--surface-light-alpha-08);

--highlight-inset-strong:
  inset
  0
  var(--stroke-1)
  0
  var(--surface-light-alpha-12);


/* =======================================================
   C14. BRAND GLOW FOUNDATION
======================================================= */

--glow-primary-sm:
  0
  0
  var(--translate-md)
  var(--shadow-primary-subtle);

--glow-primary-md:
  0
  0
  var(--translate-2xl)
  var(--shadow-primary-default);

--glow-primary-lg:
  0
  0
  var(--dimension-130)
  var(--shadow-primary-strong);


--glow-accent-sm:
  0
  0
  var(--translate-md)
  var(--shadow-accent-subtle);

--glow-accent-md:
  0
  0
  var(--translate-2xl)
  var(--shadow-accent-default);

--glow-accent-lg:
  0
  0
  var(--dimension-130)
  var(--shadow-accent-strong);


/* =======================================================
   C15. SEMANTIC BORDER ROLES
======================================================= */

--border-quiet:
  var(--border-light-quiet);

--border-default:
  var(--border-light-subtle);

--border-emphasis:
  var(--border-light-default);

--border-strong:
  var(--border-light-strong);

--border-inverse:
  var(--border-dark-default);

--border-primary:
  var(--border-primary-default);



--border-accent:
  var(--border-accent-default);




/* =======================================================
   C16. SEMANTIC DIVIDER ROLES
======================================================= */

--divider-quiet:
  var(--border-light-quiet);

--divider-default:
  var(--border-light-subtle);

--divider-strong:
  var(--border-light-default);

--divider-inverse:
  var(--border-dark-default);

--divider-primary:
  var(--border-primary-default);

--divider-accent:
  var(--border-accent-default);


/* =======================================================
   C17. DIVIDER DIMENSIONS
======================================================= */

--divider-size-thin:
  var(--stroke-1);

--divider-size-standard:
  var(--stroke-2);

--divider-size-strong:
  var(--stroke-3);


/* =======================================================
   C18. SURFACE DEPTH LEVEL 0
======================================================= */

/*
  Level 0
  Page canvas or deeply recessed surface.
*/

--surface-level-0-bg:
  var(--surface-0);

--surface-level-0-border:
  transparent;

--surface-level-0-highlight:
  none;

--surface-level-0-shadow:
  none;


/* =======================================================
   C19. SURFACE DEPTH LEVEL 1
======================================================= */

/*
  Level 1
  Section surface or soft recessed region.
*/

--surface-level-1-bg:
  var(--surface-alpha-72);

--surface-level-1-border:
  var(--border-light-quiet);

--surface-level-1-highlight:
  var(--highlight-inset-soft);

--surface-level-1-shadow:
  var(--shadow-ambient-xs);


/* =======================================================
   C20. SURFACE DEPTH LEVEL 2
======================================================= */

/*
  Level 2
  Standard card, panel, or application region.
*/

--surface-level-2-bg:
  var(--surface-alpha-80);

--surface-level-2-border:
  var(--border-light-subtle);

--surface-level-2-highlight:
  var(--highlight-inset-standard);

--surface-level-2-shadow:
  var(--shadow-contact-sm),
  var(--shadow-ambient-sm);


/* =======================================================
   C21. SURFACE DEPTH LEVEL 3
======================================================= */

/*
  Level 3
  Raised interactive card or emphasized panel.
*/

--surface-level-3-bg:
  var(--surface-alpha-92);

--surface-level-3-border:
  var(--border-light-default);

--surface-level-3-highlight:
  var(--highlight-inset-standard);

--surface-level-3-shadow:
  var(--shadow-contact-md),
  var(--shadow-ambient-md);


/* =======================================================
   C22. SURFACE DEPTH LEVEL 4
======================================================= */

/*
  Level 4
  Floating or modal surface.
*/

--surface-level-4-bg:
  var(--surface-1);

--surface-level-4-border:
  var(--border-light-strong);

--surface-level-4-highlight:
  var(--highlight-inset-strong);

--surface-level-4-shadow:
  var(--shadow-floating-md),
  var(--shadow-ambient-lg);


/* =======================================================
   C23. SEMANTIC SURFACE ALIASES
======================================================= */

--surface-page-bg:
  var(--surface-level-0-bg);

--surface-page-border:
  var(--surface-level-0-border);

--surface-page-shadow:
  var(--surface-level-0-shadow);


--surface-section-bg:
  var(--surface-level-1-bg);

--surface-section-border:
  var(--surface-level-1-border);

--surface-section-shadow:
  var(--surface-level-1-shadow);


--surface-recessed-bg:
  var(--surface-level-1-bg);

--surface-recessed-border:
  var(--surface-level-1-border);

--surface-recessed-shadow:
  inset
  0
  var(--translate-xs)
  var(--translate-md)
  var(--shadow-black-18);


--surface-card-bg:
  var(--surface-level-2-bg);

--surface-card-border:
  var(--surface-level-2-border);

--surface-card-highlight:
  var(--surface-level-2-highlight);

--surface-card-shadow:
  var(--surface-level-2-shadow);


--surface-card-raised-bg:
  var(--surface-level-3-bg);

--surface-card-raised-border:
  var(--surface-level-3-border);

--surface-card-raised-highlight:
  var(--surface-level-3-highlight);

--surface-card-raised-shadow:
  var(--surface-level-3-shadow);


--surface-panel-bg:
  var(--surface-level-2-bg);

--surface-panel-border:
  var(--surface-level-2-border);

--surface-panel-highlight:
  var(--surface-level-2-highlight);

--surface-panel-shadow:
  var(--surface-level-2-shadow);


--surface-panel-raised-bg:
  var(--surface-level-3-bg);

--surface-panel-raised-border:
  var(--surface-level-3-border);

--surface-panel-raised-highlight:
  var(--surface-level-3-highlight);

--surface-panel-raised-shadow:
  var(--surface-level-3-shadow);


--surface-floating-bg:
  var(--surface-level-4-bg);

--surface-floating-border:
  var(--surface-level-4-border);

--surface-floating-highlight:
  var(--surface-level-4-highlight);

--surface-floating-shadow:
  var(--surface-level-4-shadow);


/* =======================================================
   C24. INTERACTIVE SURFACE ROLES
======================================================= */

--surface-interactive-bg:
  var(--surface-level-2-bg);

--surface-interactive-bg-hover:
  var(--surface-level-3-bg);

--surface-interactive-bg-active:
  var(--surface-alpha-92);

--surface-interactive-border:
  var(--surface-level-2-border);

--surface-interactive-border-hover:
  var(--surface-level-3-border);

--surface-interactive-border-active:
  var(--border-primary-default);

--surface-interactive-shadow:
  var(--surface-level-2-shadow);

--surface-interactive-shadow-hover:
  var(--surface-level-3-shadow);

--surface-interactive-shadow-active:
  var(--shadow-contact-xs);


/* =======================================================
   C25. PRIMARY EMPHASIS SURFACE
======================================================= */

--surface-emphasis-primary-bg:
  linear-gradient(
    180deg,
    var(--surface-primary-standard),
    var(--surface-primary-subtle)
  );

--surface-emphasis-primary-border:
  var(--border-primary-default);

--surface-emphasis-primary-highlight:
  var(--highlight-inset-standard);

--surface-emphasis-primary-shadow:
  var(--shadow-contact-sm),
  var(--glow-primary-sm);


/* =======================================================
   C26. ACCENT EMPHASIS SURFACE
======================================================= */

--surface-emphasis-accent-bg:
  linear-gradient(
    180deg,
    var(--surface-accent-standard),
    var(--surface-accent-subtle)
  );

--surface-emphasis-accent-border:
  var(--border-accent-default);

--surface-emphasis-accent-highlight:
  var(--highlight-inset-standard);

--surface-emphasis-accent-shadow:
  var(--shadow-contact-sm),
  var(--glow-accent-sm);


/* =======================================================
   C27. GLASS SYSTEM
======================================================= */

--glass-level-1-bg:
  var(--surface-alpha-64);

--glass-level-1-border:
  var(--border-light-quiet);

--glass-level-1-highlight:
  var(--highlight-inset-soft);

--glass-level-1-shadow:
  var(--shadow-ambient-xs);

--glass-level-1-blur:
  var(--blur-sm);


--glass-level-2-bg:
  var(--surface-alpha-72);

--glass-level-2-border:
  var(--border-light-subtle);

--glass-level-2-highlight:
  var(--highlight-inset-standard);

--glass-level-2-shadow:
  var(--shadow-contact-sm),
  var(--shadow-ambient-sm);

--glass-level-2-blur:
  var(--blur-md);


--glass-level-3-bg:
  var(--surface-alpha-80);

--glass-level-3-border:
  var(--border-light-default);

--glass-level-3-highlight:
  var(--highlight-inset-strong);

--glass-level-3-shadow:
  var(--shadow-floating-sm),
  var(--shadow-ambient-md);

--glass-level-3-blur:
  var(--blur-lg);


/* =======================================================
   C28. GLASS SEMANTIC ALIASES
======================================================= */

--glass-subtle-bg:
  var(--glass-level-1-bg);

--glass-subtle-border:
  var(--glass-level-1-border);

--glass-subtle-highlight:
  var(--glass-level-1-highlight);

--glass-subtle-shadow:
  var(--glass-level-1-shadow);

--glass-subtle-blur:
  var(--glass-level-1-blur);


--glass-default-bg:
  var(--glass-level-2-bg);

--glass-default-border:
  var(--glass-level-2-border);

--glass-default-highlight:
  var(--glass-level-2-highlight);

--glass-default-shadow:
  var(--glass-level-2-shadow);

--glass-default-blur:
  var(--glass-level-2-blur);


--glass-strong-bg:
  var(--glass-level-3-bg);

--glass-strong-border:
  var(--glass-level-3-border);

--glass-strong-highlight:
  var(--glass-level-3-highlight);

--glass-strong-shadow:
  var(--glass-level-3-shadow);

--glass-strong-blur:
  var(--glass-level-3-blur);

  /* =======================================================
     C29. GLASS SURFACE SEMANTIC CONTRACTS
======================================================= */

--surface-glass-subtle-bg:
  var(--glass-level-1-bg);

--surface-glass-subtle-border:
  var(--glass-level-1-border);

--surface-glass-subtle-highlight:
  var(--glass-level-1-highlight);

--surface-glass-subtle-shadow:
  var(--glass-level-1-shadow);


--surface-glass-default-bg:
  var(--glass-level-2-bg);

--surface-glass-default-border:
  var(--glass-level-2-border);

--surface-glass-default-highlight:
  var(--glass-level-2-highlight);

--surface-glass-default-shadow:
  var(--glass-level-2-shadow);


--surface-glass-strong-bg:
  var(--glass-level-3-bg);

--surface-glass-strong-border:
  var(--glass-level-3-border);

--surface-glass-strong-highlight:
  var(--glass-level-3-highlight);

--surface-glass-strong-shadow:
  var(--glass-level-3-shadow);



/* =======================================================
   C30. OVERLAY AND BACKDROP ROLES
======================================================= */

--overlay-subtle-bg:
  var(--overlay-black-sm);

--overlay-default-bg:
  var(--overlay-black-md);

--overlay-strong-bg:
  var(--overlay-black-lg);

--overlay-modal-bg:
  rgba(var(--black-rgb) / var(--a-72));

--overlay-drawer-bg:
  rgba(var(--black-rgb) / var(--a-64));

--overlay-loading-bg:
  rgba(var(--black-rgb) / var(--a-40));

--overlay-blur-sm:
  var(--blur-sm);

--overlay-blur-md:
  var(--blur-md);

--overlay-blur-lg:
  var(--blur-lg);


/* =======================================================
   C31. RAIL COLOR ROLES
======================================================= */

--rail-primary:
  var(--brand-primary);

--rail-primary-muted:
  var(--border-primary-default);

--rail-accent:
  var(--brand-accent);

--rail-accent-muted:
  var(--border-accent-default);

--rail-neutral:
  var(--border-light-default);

--rail-muted:
  var(--border-light-subtle);


/* =======================================================
   C32. RAIL DIMENSION ROLES
======================================================= */

--rail-size-sm:
  var(--stroke-1);

--rail-size-md:
  var(--stroke-2);

--rail-size-lg:
  var(--stroke-4);


--rail-length-sm:
  var(--space-5);

--rail-length-md:
  var(--space-7);

--rail-length-lg:
  var(--space-9);


/* =======================================================
   C33. SEMANTIC ELEVATION ROLES
======================================================= */

--elevation-flat:
  none;

--elevation-recessed:
  inset
  0
  var(--translate-xs)
  var(--translate-md)
  var(--shadow-black-18);

--elevation-low:
  var(--shadow-contact-xs),
  var(--shadow-ambient-xs);

--elevation-default:
  var(--shadow-contact-sm),
  var(--shadow-ambient-sm);

--elevation-raised:
  var(--shadow-contact-md),
  var(--shadow-ambient-md);

--elevation-floating:
  var(--shadow-floating-sm),
  var(--shadow-ambient-md);

--elevation-overlay:
  var(--shadow-floating-md),
  var(--shadow-ambient-lg);

--elevation-modal:
  var(--shadow-floating-lg),
  var(--shadow-ambient-lg);


/* =======================================================
   C34. HOVER ELEVATION ROLES
======================================================= */

--elevation-hover-low:
  var(--shadow-contact-sm),
  var(--shadow-ambient-sm);

--elevation-hover-default:
  var(--shadow-contact-md),
  var(--shadow-ambient-md);

--elevation-hover-raised:
  var(--shadow-floating-sm),
  var(--shadow-ambient-md);
  
/* =======================================================
    C35. STICKY ELEVATION CONTRACT
======================================================= */

--elevation-sticky:
  var(--shadow-contact-sm),
  var(--shadow-ambient-sm);

/* =======================================================
   C36. SELECTED SURFACE ROLES
======================================================= */

--surface-selected-bg:
  var(--surface-primary-muted);

--surface-selected-border:
  var(--border-primary-default);

--surface-selected-highlight:
  var(--highlight-inset-standard);

--surface-selected-shadow:
  var(--shadow-contact-sm),
  var(--glow-primary-sm);


/* =======================================================
   C37. DISABLED SURFACE ROLES
======================================================= */

--surface-disabled-bg:
  var(--surface-alpha-40);

--surface-disabled-border:
  var(--border-light-quiet);

--surface-disabled-highlight:
  none;

--surface-disabled-shadow:
  none;


/* =======================================================
   C38. DANGER SURFACE ROLES
======================================================= */

--surface-danger-bg:
  rgba(var(--danger-500-rgb) / var(--a-10));

--surface-danger-border:
  rgba(var(--danger-500-rgb) / var(--a-32));

--surface-danger-shadow:
  0
  0
  var(--translate-md)
  rgba(var(--danger-500-rgb) / var(--a-12));


/* =======================================================
   C39. WARNING SURFACE ROLES
======================================================= */

--surface-warning-bg:
  rgba(var(--warning-500-rgb) / var(--a-10));

--surface-warning-border:
  rgba(var(--warning-500-rgb) / var(--a-32));

--surface-warning-shadow:
  0
  0
  var(--translate-md)
  rgba(var(--warning-500-rgb) / var(--a-12));


/* =======================================================
   C40. SUCCESS SURFACE ROLES
======================================================= */

--surface-success-bg:
  rgba(var(--success-500-rgb) / var(--a-10));

--surface-success-border:
  rgba(var(--success-500-rgb) / var(--a-32));

--surface-success-shadow:
  0
  0
  var(--translate-md)
  rgba(var(--success-500-rgb) / var(--a-12));


/* =======================================================
   C41. INFO SURFACE ROLES
======================================================= */

--surface-info-bg:
  rgba(var(--info-500-rgb) / var(--a-10));

--surface-info-border:
  rgba(var(--info-500-rgb) / var(--a-32));

--surface-info-shadow:
  0
  0
  var(--translate-md)
  rgba(var(--info-500-rgb) / var(--a-12));


/* =======================================================
   C42. LEGACY SURFACE COMPATIBILITY
======================================================= */

/*
  Existing surface names can temporarily map to the new
  depth hierarchy.
*/

--color-bg:
  var(--surface-page-bg);

--color-surface:
  var(--surface-card-bg);

--color-surface-raised:
  var(--surface-card-raised-bg);

--color-panel:
  var(--surface-panel-bg);

--color-panel-raised:
  var(--surface-panel-raised-bg);


--glass-bg-subtle:
  var(--glass-subtle-bg);

--glass-bg:
  var(--glass-default-bg);

--glass-bg-strong:
  var(--glass-strong-bg);


--shadow-sm:
  var(--elevation-low);

--shadow-md:
  var(--elevation-default);

--shadow-lg:
  var(--elevation-raised);

--shadow-xl:
  var(--elevation-floating);


/* =======================================================
   C43. SURFACE RECIPE REFERENCE
======================================================= */

/*
  APPLYING A SURFACE RECIPE

  A complete surface normally consumes four coordinated roles:

  background:
    var(--surface-card-bg);

  border:
    var(--stroke-1)
    solid
    var(--surface-card-border);

  box-shadow:
    var(--surface-card-highlight),
    var(--surface-card-shadow);

  border-radius:
    a semantic shape role from a later component package.

  Components must not mix arbitrary surface levels unless
  the design intentionally calls for a hybrid treatment.
*/


/* =======================================================
   C44. SURFACE DEPTH GOVERNANCE
======================================================= */

/*
  SURFACE RULES

  1. Surface depth must be expressed through approved level
     or semantic surface roles.

  2. Components must not invent local rgba() backgrounds.

  3. Background, border, highlight, and shadow should be
     selected as one coordinated recipe.

  4. Level 0 is reserved for page and deeply recessed
     surfaces.

  5. Level 1 is reserved for sections and quiet recessed
     areas.

  6. Level 2 is the default card and panel depth.

  7. Level 3 is reserved for raised or emphasized surfaces.

  8. Level 4 is reserved for floating and modal surfaces.

  9. Brand glows must reinforce hierarchy, not decorate
     every interactive element.

  10. Glass surfaces must use an approved glass level.

  11. Floating shadows must not be used for ordinary cards.

  12. Inset highlights should remain subtle and must not
      create glossy toy-like surfaces.

  13. Page-specific effects may alias a global recipe but
      should not redefine the depth ladder.

  14. Status surfaces must use their matching status colour
      family.

  15. Compatibility aliases remain until selector usage has
      been audited and migrated.
*/

/* =========================================================
   PACKAGE D
   MEDIA + TEXTURE + BACKGROUND SYSTEMS
========================================================= */

/*
  PURPOSE
  - Establish a complete media-treatment system.
  - Standardize image ratios, cropping, overlays, and filters.
  - Create controlled texture and background atmosphere.
  - Support job photography, fleet imagery, Steve assets,
    galleries, videos, campaign media, and feature sections.
  - Prevent components and pages from inventing local image
    treatments, overlays, textures, or aura recipes.

  RULES
  - Raw media values belong in foundation sections.
  - Semantic media roles describe visual intent.
  - Components consume semantic media roles.
  - Page-specific media roles may alias global contracts.
  - Decorative backgrounds must not interfere with content.
  - Texture and aura effects must remain restrained.
*/


/* =======================================================
   D1. MEDIA RATIO FOUNDATION
======================================================= */

/*
  Package A defines the base aspect-ratio foundation.

  Package D adds operational ratios required by the RH Media
  photography, gallery, video, and character systems.
*/

--ratio-banner:
  5 / 2;

--ratio-ultrawide:
  24 / 9;

--ratio-vehicle:
  16 / 10;

--ratio-equipment:
  4 / 3;

--ratio-document:
  8.5 / 11;

--ratio-avatar:
  1 / 1;

--ratio-logo-horizontal:
  3 / 1;

--ratio-logo-square:
  1 / 1;


/* =======================================================
   D2. SEMANTIC MEDIA RATIO ROLES
======================================================= */

--media-ratio-card:
  var(--ratio-landscape);

--media-ratio-card-wide:
  var(--ratio-photo);

--media-ratio-feature:
  var(--ratio-wide);

--media-ratio-feature-tall:
  var(--ratio-vehicle);

--media-ratio-hero:
  var(--ratio-cinematic);

--media-ratio-banner:
  var(--ratio-banner);

--media-ratio-gallery-thumb:
  var(--ratio-square);

--media-ratio-gallery-item:
  var(--ratio-photo);

--media-ratio-gallery-feature:
  var(--ratio-wide);

--media-ratio-video:
  var(--ratio-wide);

--media-ratio-story:
  var(--ratio-story);

--media-ratio-poster:
  var(--ratio-poster);

--media-ratio-avatar:
  var(--ratio-avatar);

--media-ratio-logo:
  var(--ratio-logo-horizontal);

--media-ratio-logo-mark:
  var(--ratio-logo-square);

--media-ratio-character:
  var(--ratio-square);

--media-ratio-environment:
  var(--ratio-square);

--media-ratio-equipment:
  var(--ratio-equipment);

--media-ratio-vehicle:
  var(--ratio-vehicle);


/* =======================================================
   D3. MEDIA SIZE FOUNDATION
======================================================= */

/*
  Media sizes provide controlled dimensions for thumbnails,
  logos, avatars, illustrations, and application imagery.
*/

--media-size-xs:
  var(--space-8);

--media-size-sm:
  var(--space-12);

--media-size-md:
  var(--dimension-160);

--media-size-lg:
  var(--dimension-240);

--media-size-xl:
  var(--dimension-280);

--media-size-2xl:
  var(--dimension-540);


/* =======================================================
   D4. SEMANTIC MEDIA SIZE ROLES
======================================================= */

--media-size-avatar-sm:
  var(--space-8);

--media-size-avatar-md:
  var(--space-10);

--media-size-avatar-lg:
  var(--space-12);

--media-size-icon-image:
  var(--space-8);

--media-size-logo-sm:
  var(--dimension-130);

--media-size-logo-md:
  var(--dimension-180);

--media-size-logo-lg:
  var(--dimension-240);

--media-size-character-sm:
  var(--dimension-160);

--media-size-character-md:
  var(--dimension-240);

--media-size-character-lg:
  var(--dimension-280);

--media-size-thumbnail-sm:
  var(--dimension-130);

--media-size-thumbnail-md:
  var(--dimension-180);

--media-size-thumbnail-lg:
  var(--dimension-240);


/* =======================================================
   D5. OBJECT-FIT SEMANTIC ROLES
======================================================= */

--media-fit-cover:
  var(--fit-cover);

--media-fit-contain:
  var(--fit-contain);

--media-fit-natural:
  var(--fit-scale-down);

--media-fit-fill:
  var(--fit-fill);


/* =======================================================
   D6. OBJECT-POSITION SEMANTIC ROLES
======================================================= */

--media-position-center:
  var(--position-center);

--media-position-top:
  var(--position-top);

--media-position-bottom:
  var(--position-bottom);

--media-position-left:
  var(--position-left);

--media-position-right:
  var(--position-right);

--media-position-vehicle:
  center 62%;

--media-position-trailer:
  center 58%;

--media-position-equipment:
  center 55%;

--media-position-character:
  center 28%;

--media-position-environment:
  center center;

--media-position-portrait:
  center 24%;

--media-position-landscape:
  center center;


/* =======================================================
   D7. MEDIA BACKGROUND FOUNDATION
======================================================= */

--media-bg-dark:
  var(--surface-level-0-bg);

--media-bg-muted:
  var(--surface-level-1-bg);

--media-bg-default:
  var(--surface-level-2-bg);

--media-bg-light:
  var(--neutral-50);

--media-bg-transparent:
  transparent;

--media-bg-checker-a:
  var(--surface-light-alpha-04);

--media-bg-checker-b:
  var(--surface-light-alpha-08);


/* =======================================================
   D8. MEDIA BORDER FOUNDATION
======================================================= */

--media-border-quiet:
  var(--border-quiet);

--media-border-default:
  var(--border-default);

--media-border-strong:
  var(--border-emphasis);

--media-border-primary:
  var(--border-primary);

--media-border-accent:
  var(--border-accent);


/* =======================================================
   D9. MEDIA RADIUS ROLES
======================================================= */

--media-radius-none:
  var(--radius-none);

--media-radius-sm:
  var(--radius-sm);

--media-radius-md:
  var(--radius-md);

--media-radius-lg:
  var(--radius-lg);

--media-radius-xl:
  var(--radius-xl);

--media-radius-round:
  var(--radius-round);


/* =======================================================
   D10. MEDIA SHADOW ROLES
======================================================= */

--media-shadow-none:
  none;

--media-shadow-subtle:
  var(--elevation-low);

--media-shadow-default:
  var(--elevation-default);

--media-shadow-raised:
  var(--elevation-raised);

--media-shadow-floating:
  var(--elevation-floating);


/* =======================================================
   D11. MEDIA OVERLAY FOUNDATION
======================================================= */

/*
  Neutral overlays improve legibility and image hierarchy.
*/

--media-overlay-none:
  transparent;

--media-overlay-xs:
  rgba(var(--black-rgb) / var(--a-08));

--media-overlay-sm:
  rgba(var(--black-rgb) / var(--a-16));

--media-overlay-md:
  rgba(var(--black-rgb) / var(--a-28));

--media-overlay-lg:
  rgba(var(--black-rgb) / var(--a-40));

--media-overlay-xl:
  rgba(var(--black-rgb) / var(--a-64));

--media-overlay-light-xs:
  rgba(var(--white-rgb) / var(--a-04));

--media-overlay-light-sm:
  rgba(var(--white-rgb) / var(--a-08));

--media-overlay-light-md:
  rgba(var(--white-rgb) / var(--a-16));


/* =======================================================
   D12. BRAND MEDIA OVERLAYS
======================================================= */

--media-overlay-primary-subtle:
  rgba(var(--brand-primary-rgb) / var(--a-06));

--media-overlay-primary-default:
  rgba(var(--brand-primary-rgb) / var(--a-12));

--media-overlay-primary-strong:
  rgba(var(--brand-primary-rgb) / var(--a-24));

--media-overlay-accent-subtle:
  rgba(var(--brand-accent-rgb) / var(--a-06));

--media-overlay-accent-default:
  rgba(var(--brand-accent-rgb) / var(--a-12));

--media-overlay-accent-strong:
  rgba(var(--brand-accent-rgb) / var(--a-24));


/* =======================================================
   D13. SEMANTIC MEDIA OVERLAY ROLES
======================================================= */

--media-overlay-subtle:
  var(--media-overlay-sm);

--media-overlay-standard:
  var(--media-overlay-md);

--media-overlay-strong:
  var(--media-overlay-lg);

--media-overlay-cinematic:
  var(--media-overlay-xl);

--media-overlay-readable:
  var(--media-overlay-lg);

--media-overlay-muted:
  var(--media-overlay-sm);

--media-overlay-feature:
  var(--media-overlay-md);

--media-overlay-primary:
  var(--media-overlay-primary-default);

--media-overlay-accent:
  var(--media-overlay-accent-default);


/* =======================================================
   D14. MEDIA GRADIENT FOUNDATION
======================================================= */

--media-gradient-bottom:
  linear-gradient(
    180deg,
    transparent 0%,
    rgba(var(--black-rgb) / var(--a-10)) 42%,
    rgba(var(--black-rgb) / var(--a-72)) 100%
  );

--media-gradient-bottom-soft:
  linear-gradient(
    180deg,
    transparent 24%,
    rgba(var(--black-rgb) / var(--a-08)) 58%,
    rgba(var(--black-rgb) / var(--a-52)) 100%
  );

--media-gradient-bottom-strong:
  linear-gradient(
    180deg,
    transparent 0%,
    rgba(var(--black-rgb) / var(--a-20)) 38%,
    rgba(var(--black-rgb) / var(--a-92)) 100%
  );

--media-gradient-top:
  linear-gradient(
    0deg,
    transparent 0%,
    rgba(var(--black-rgb) / var(--a-10)) 42%,
    rgba(var(--black-rgb) / var(--a-64)) 100%
  );

--media-gradient-left:
  linear-gradient(
    90deg,
    rgba(var(--black-rgb) / var(--a-72)) 0%,
    rgba(var(--black-rgb) / var(--a-28)) 44%,
    transparent 100%
  );

--media-gradient-right:
  linear-gradient(
    270deg,
    rgba(var(--black-rgb) / var(--a-72)) 0%,
    rgba(var(--black-rgb) / var(--a-28)) 44%,
    transparent 100%
  );

--media-gradient-vignette:
  radial-gradient(
    ellipse at center,
    transparent 38%,
    rgba(var(--black-rgb) / var(--a-12)) 68%,
    rgba(var(--black-rgb) / var(--a-52)) 100%
  );

--media-gradient-cinematic:
  linear-gradient(
    180deg,
    rgba(var(--black-rgb) / var(--a-24)) 0%,
    transparent 34%,
    transparent 58%,
    rgba(var(--black-rgb) / var(--a-72)) 100%
  );


/* =======================================================
   D15. BRAND MEDIA GRADIENTS
======================================================= */

--media-gradient-primary:
  linear-gradient(
    135deg,
    rgba(var(--brand-primary-rgb) / var(--a-20)),
    transparent 58%
  );

--media-gradient-accent:
  linear-gradient(
    135deg,
    rgba(var(--brand-accent-rgb) / var(--a-20)),
    transparent 58%
  );

--media-gradient-dual-brand:
  linear-gradient(
    135deg,
    rgba(var(--brand-primary-rgb) / var(--a-16)),
    transparent 42%,
    rgba(var(--brand-accent-rgb) / var(--a-12))
  );

--media-gradient-brand-bottom:
  linear-gradient(
    180deg,
    transparent 28%,
    rgba(var(--brand-primary-rgb) / var(--a-08)) 58%,
    rgba(var(--surface-dark-rgb) / var(--a-92)) 100%
  );


/* =======================================================
   D16. MEDIA FILTER FOUNDATION
======================================================= */

/*
  Filters must be applied sparingly.

  They should enhance consistency without making real job
  photography look synthetic.
*/

--media-filter-none:
  none;

--media-filter-muted:
  saturate(0.86)
  contrast(0.96)
  brightness(0.94);

--media-filter-soft:
  saturate(0.94)
  contrast(0.96)
  brightness(1.02);

--media-filter-contrast:
  saturate(1.04)
  contrast(1.08)
  brightness(0.98);

--media-filter-desaturated:
  saturate(0.35)
  contrast(1.02)
  brightness(0.94);

--media-filter-monochrome:
  grayscale(1)
  contrast(1.06);

--media-filter-feature:
  saturate(1.04)
  contrast(1.06)
  brightness(0.96);

--media-filter-dark:
  saturate(0.9)
  contrast(1.04)
  brightness(0.78);

--media-filter-light:
  saturate(0.94)
  contrast(0.96)
  brightness(1.08);


/* =======================================================
   D17. MEDIA FILTER INTERACTION ROLES
======================================================= */

--media-filter-default:
  var(--media-filter-none);

--media-filter-hover:
  var(--media-filter-feature);

--media-filter-disabled:
  var(--media-filter-desaturated);

--media-filter-background:
  var(--media-filter-dark);

--media-filter-gallery:
  var(--media-filter-soft);

--media-filter-gallery-hover:
  var(--media-filter-feature);


/* =======================================================
   D18. MEDIA TRANSITION ROLES
======================================================= */

--media-transition-filter:
  filter
  var(--duration-md)
  var(--ease-standard);

--media-transition-transform:
  transform
  var(--duration-md)
  var(--ease-emphasized);

--media-transition-opacity:
  opacity
  var(--duration-md)
  var(--ease-standard);

--media-transition-overlay:
  background-color
  var(--duration-md)
  var(--ease-standard);

--media-transition-complete:
  filter
  var(--duration-md)
  var(--ease-standard),
  transform
  var(--duration-md)
  var(--ease-emphasized),
  opacity
  var(--duration-md)
  var(--ease-standard);


/* =======================================================
   D19. MEDIA INTERACTION TRANSFORMS
======================================================= */

--media-scale-hover:
  var(--scale-up-sm);

--media-scale-active:
  var(--scale-down-sm);

--media-translate-hover:
  var(--translate-xs);


/* =======================================================
   D20. IMAGE PLACEHOLDER SYSTEM
======================================================= */

--media-placeholder-bg:
  var(--surface-level-1-bg);

--media-placeholder-border:
  var(--border-quiet);

--media-placeholder-text:
  var(--fg-tertiary);

--media-placeholder-icon:
  var(--fg-disabled);

--media-placeholder-gradient:
  linear-gradient(
    135deg,
    var(--surface-level-1-bg),
    var(--surface-level-2-bg)
  );


/* =======================================================
   D21. TRANSPARENT-ASSET BACKGROUND
======================================================= */

/*
  Useful for logos, Steve SVGs, PNG assets, and product
  imagery with transparent backgrounds.
*/

--media-checker-size:
  var(--space-4);

--media-checker-bg:
  linear-gradient(
      45deg,
      var(--media-bg-checker-a) 25%,
      transparent 25%
    ),
  linear-gradient(
      -45deg,
      var(--media-bg-checker-a) 25%,
      transparent 25%
    ),
  linear-gradient(
      45deg,
      transparent 75%,
      var(--media-bg-checker-a) 75%
    ),
  linear-gradient(
      -45deg,
      transparent 75%,
      var(--media-bg-checker-a) 75%
    );

--media-checker-position:
  0 0,
  0 calc(var(--media-checker-size) / 2),
  calc(var(--media-checker-size) / 2)
    calc(var(--media-checker-size) / -2),
  calc(var(--media-checker-size) / -2) 0;


/* =======================================================
   D22. TEXTURE COLOR FOUNDATION
======================================================= */

--texture-light-quiet:
  rgba(var(--white-rgb) / var(--a-02));

--texture-light-subtle:
  rgba(var(--white-rgb) / var(--a-04));

--texture-light-default:
  rgba(var(--white-rgb) / var(--a-06));

--texture-light-strong:
  rgba(var(--white-rgb) / var(--a-10));

--texture-dark-quiet:
  rgba(var(--black-rgb) / var(--a-02));

--texture-dark-subtle:
  rgba(var(--black-rgb) / var(--a-04));

--texture-dark-default:
  rgba(var(--black-rgb) / var(--a-06));

--texture-dark-strong:
  rgba(var(--black-rgb) / var(--a-10));

--texture-primary:
  rgba(var(--brand-primary-rgb) / var(--a-08));

--texture-accent:
  rgba(var(--brand-accent-rgb) / var(--a-08));


/* =======================================================
   D23. TEXTURE OPACITY ROLES
======================================================= */

--texture-opacity-none:
  var(--a-00);

--texture-opacity-quiet:
  var(--a-02);

--texture-opacity-subtle:
  var(--a-04);

--texture-opacity-standard:
  var(--a-06);

--texture-opacity-strong:
  var(--a-10);


/* =======================================================
   D24. TEXTURE DENSITY FOUNDATION
======================================================= */

--texture-density-xs:
  var(--space-3);

--texture-density-sm:
  var(--space-4);

--texture-density-md:
  var(--space-6);

--texture-density-lg:
  var(--space-8);

--texture-density-xl:
  var(--space-12);


/* =======================================================
   D25. SEMANTIC TEXTURE DENSITY
======================================================= */

--texture-density-tight:
  var(--texture-density-sm);

--texture-density-standard:
  var(--texture-density-md);

--texture-density-loose:
  var(--texture-density-lg);

--texture-density-wide:
  var(--texture-density-xl);


/* =======================================================
   D26. DOT TEXTURE FOUNDATION
======================================================= */

--texture-dot-size-sm:
  var(--stroke-1);

--texture-dot-size-md:
  var(--stroke-2);

--texture-dot-size-lg:
  var(--stroke-3);

--texture-dot-light:
  radial-gradient(
    circle,
    var(--texture-light-default)
      var(--texture-dot-size-sm),
    transparent
      var(--texture-dot-size-sm)
  );

--texture-dot-dark:
  radial-gradient(
    circle,
    var(--texture-dark-default)
      var(--texture-dot-size-sm),
    transparent
      var(--texture-dot-size-sm)
  );

--texture-dot-primary:
  radial-gradient(
    circle,
    var(--texture-primary)
      var(--texture-dot-size-sm),
    transparent
      var(--texture-dot-size-sm)
  );

--texture-dot-accent:
  radial-gradient(
    circle,
    var(--texture-accent)
      var(--texture-dot-size-sm),
    transparent
      var(--texture-dot-size-sm)
  );


/* =======================================================
   D27. GRID TEXTURE FOUNDATION
======================================================= */

--texture-grid-light:
  linear-gradient(
    var(--texture-light-subtle)
      var(--stroke-1),
    transparent
      var(--stroke-1)
  ),
  linear-gradient(
    90deg,
    var(--texture-light-subtle)
      var(--stroke-1),
    transparent
      var(--stroke-1)
  );

--texture-grid-dark:
  linear-gradient(
    var(--texture-dark-subtle)
      var(--stroke-1),
    transparent
      var(--stroke-1)
  ),
  linear-gradient(
    90deg,
    var(--texture-dark-subtle)
      var(--stroke-1),
    transparent
      var(--stroke-1)
  );

--texture-grid-primary:
  linear-gradient(
    var(--texture-primary)
      var(--stroke-1),
    transparent
      var(--stroke-1)
  ),
  linear-gradient(
    90deg,
    var(--texture-primary)
      var(--stroke-1),
    transparent
      var(--stroke-1)
  );

--texture-grid-accent:
  linear-gradient(
    var(--texture-accent)
      var(--stroke-1),
    transparent
      var(--stroke-1)
  ),
  linear-gradient(
    90deg,
    var(--texture-accent)
      var(--stroke-1),
    transparent
      var(--stroke-1)
  );


/* =======================================================
   D28. BLUEPRINT TEXTURE FOUNDATION
======================================================= */

--texture-blueprint-major:
  linear-gradient(
    rgba(var(--brand-primary-rgb) / var(--a-08))
      var(--stroke-1),
    transparent
      var(--stroke-1)
  ),
  linear-gradient(
    90deg,
    rgba(var(--brand-primary-rgb) / var(--a-08))
      var(--stroke-1),
    transparent
      var(--stroke-1)
  );

--texture-blueprint-minor:
  linear-gradient(
    rgba(var(--brand-primary-rgb) / var(--a-04))
      var(--stroke-1),
    transparent
      var(--stroke-1)
  ),
  linear-gradient(
    90deg,
    rgba(var(--brand-primary-rgb) / var(--a-04))
      var(--stroke-1),
    transparent
      var(--stroke-1)
  );

--texture-blueprint-size-major:
  var(--space-12)
  var(--space-12);

--texture-blueprint-size-minor:
  var(--space-4)
  var(--space-4);


/* =======================================================
   D29. DIAGONAL TEXTURE FOUNDATION
======================================================= */

--texture-diagonal-light:
  repeating-linear-gradient(
    135deg,
    transparent 0,
    transparent var(--space-3),
    var(--texture-light-subtle) var(--space-3),
    var(--texture-light-subtle)
      calc(var(--space-3) + var(--stroke-1))
  );

--texture-diagonal-dark:
  repeating-linear-gradient(
    135deg,
    transparent 0,
    transparent var(--space-3),
    var(--texture-dark-subtle) var(--space-3),
    var(--texture-dark-subtle)
      calc(var(--space-3) + var(--stroke-1))
  );

--texture-diagonal-primary:
  repeating-linear-gradient(
    135deg,
    transparent 0,
    transparent var(--space-4),
    var(--texture-primary) var(--space-4),
    var(--texture-primary)
      calc(var(--space-4) + var(--stroke-1))
  );


/* =======================================================
   D30. CROSSHATCH TEXTURE FOUNDATION
======================================================= */

--texture-crosshatch-light:
  repeating-linear-gradient(
    45deg,
    transparent 0,
    transparent var(--space-4),
    var(--texture-light-subtle) var(--space-4),
    var(--texture-light-subtle)
      calc(var(--space-4) + var(--stroke-1))
  ),
  repeating-linear-gradient(
    -45deg,
    transparent 0,
    transparent var(--space-4),
    var(--texture-light-subtle) var(--space-4),
    var(--texture-light-subtle)
      calc(var(--space-4) + var(--stroke-1))
  );

--texture-crosshatch-dark:
  repeating-linear-gradient(
    45deg,
    transparent 0,
    transparent var(--space-4),
    var(--texture-dark-subtle) var(--space-4),
    var(--texture-dark-subtle)
      calc(var(--space-4) + var(--stroke-1))
  ),
  repeating-linear-gradient(
    -45deg,
    transparent 0,
    transparent var(--space-4),
    var(--texture-dark-subtle) var(--space-4),
    var(--texture-dark-subtle)
      calc(var(--space-4) + var(--stroke-1))
  );


/* =======================================================
   D31. GRAIN FOUNDATION
======================================================= */

/*
  CSS cannot generate true photographic grain cleanly
  without an asset.

  Package D defines controlled grain roles that may consume
  an approved local SVG, PNG, or data-safe asset later.
*/

--texture-grain-image:
  none;

--texture-grain-size:
  auto;

--texture-grain-position:
  center;

--texture-grain-repeat:
  repeat;

--texture-grain-opacity:
  var(--texture-opacity-subtle);

--texture-grain-blend:
  soft-light;


/* =======================================================
   D32. SEMANTIC TEXTURE ROLES
======================================================= */

--texture-page-image:
  var(--texture-grid-light);

--texture-page-size:
  var(--texture-density-loose)
  var(--texture-density-loose);

--texture-page-position:
  center;

--texture-page-opacity:
  var(--texture-opacity-quiet);


--texture-section-image:
  var(--texture-dot-light);

--texture-section-size:
  var(--texture-density-loose)
  var(--texture-density-loose);

--texture-section-position:
  center;

--texture-section-opacity:
  var(--texture-opacity-subtle);


--texture-panel-image:
  var(--texture-grid-light);

--texture-panel-size:
  var(--texture-density-standard)
  var(--texture-density-standard);

--texture-panel-position:
  center;

--texture-panel-opacity:
  var(--texture-opacity-quiet);


--texture-tool-image:
  var(--texture-blueprint-minor);

--texture-tool-size:
  var(--texture-blueprint-size-minor);

--texture-tool-position:
  center;

--texture-tool-opacity:
  var(--texture-opacity-subtle);


--texture-feature-image:
  var(--texture-diagonal-light);

--texture-feature-size:
  auto;

--texture-feature-position:
  center;

--texture-feature-opacity:
  var(--texture-opacity-subtle);


--texture-industrial-image:
  var(--texture-crosshatch-light);

--texture-industrial-size:
  auto;

--texture-industrial-position:
  center;

--texture-industrial-opacity:
  var(--texture-opacity-subtle);


/* =======================================================
   D33. BACKGROUND SOLID ROLES
======================================================= */

--background-page:
  var(--surface-page-bg);

--background-section:
  var(--surface-section-bg);

--background-card:
  var(--surface-card-bg);

--background-panel:
  var(--surface-panel-bg);

--background-floating:
  var(--surface-floating-bg);

--background-light:
  var(--neutral-0);

--background-dark:
  var(--neutral-900);

--background-transparent:
  transparent;


/* =======================================================
   D34. BACKGROUND GRADIENT FOUNDATION
======================================================= */

--background-gradient-dark:
  linear-gradient(
    180deg,
    var(--surface-level-0-bg),
    var(--surface-level-1-bg)
  );

--background-gradient-dark-reverse:
  linear-gradient(
    0deg,
    var(--surface-level-0-bg),
    var(--surface-level-1-bg)
  );

--background-gradient-surface:
  linear-gradient(
    180deg,
    var(--surface-level-2-bg),
    var(--surface-level-1-bg)
  );

--background-gradient-raised:
  linear-gradient(
    180deg,
    var(--surface-level-3-bg),
    var(--surface-level-2-bg)
  );

--background-gradient-primary:
  linear-gradient(
    135deg,
    var(--surface-primary-standard),
    var(--surface-level-0-bg)
  );

--background-gradient-accent:
  linear-gradient(
    135deg,
    var(--surface-accent-standard),
    var(--surface-level-0-bg)
  );

--background-gradient-brand:
  linear-gradient(
    135deg,
    rgba(var(--brand-primary-rgb) / var(--a-14)),
    transparent 46%,
    rgba(var(--brand-accent-rgb) / var(--a-10))
  );


/* =======================================================
   D35. SECTION TRANSITION GRADIENTS
======================================================= */

/*
  These tokens help adjacent sections blend without touching
  visually or creating hard colour seams.
*/

--background-transition-top:
  linear-gradient(
    180deg,
    var(--surface-level-0-bg),
    transparent
  );

--background-transition-bottom:
  linear-gradient(
    0deg,
    var(--surface-level-0-bg),
    transparent
  );

--background-transition-dark:
  linear-gradient(
    180deg,
    transparent,
    rgba(var(--black-rgb) / var(--a-20)),
    transparent
  );

--background-transition-primary:
  linear-gradient(
    180deg,
    transparent,
    rgba(var(--brand-primary-rgb) / var(--a-06)),
    transparent
  );

--background-transition-accent:
  linear-gradient(
    180deg,
    transparent,
    rgba(var(--brand-accent-rgb) / var(--a-06)),
    transparent
  );


/* =======================================================
   D36. AURA COLOR FOUNDATION
======================================================= */

--aura-primary-subtle:
  rgba(var(--brand-primary-rgb) / var(--a-06));

--aura-primary-default:
  rgba(var(--brand-primary-rgb) / var(--a-12));

--aura-primary-strong:
  rgba(var(--brand-primary-rgb) / var(--a-20));

--aura-accent-subtle:
  rgba(var(--brand-accent-rgb) / var(--a-06));

--aura-accent-default:
  rgba(var(--brand-accent-rgb) / var(--a-12));

--aura-accent-strong:
  rgba(var(--brand-accent-rgb) / var(--a-20));

--aura-light-subtle:
  rgba(var(--white-rgb) / var(--a-04));

--aura-dark-subtle:
  rgba(var(--black-rgb) / var(--a-12));


/* =======================================================
   D37. AURA SIZE FOUNDATION
======================================================= */

--aura-size-sm:
  var(--dimension-180);

--aura-size-md:
  var(--dimension-240);

--aura-size-lg:
  var(--dimension-280);

--aura-size-xl:
  var(--dimension-540);


/* =======================================================
   D38. AURA POSITION FOUNDATION
======================================================= */

--aura-position-top-start:
  left top;

--aura-position-top-center:
  center top;

--aura-position-top-end:
  right top;

--aura-position-center-start:
  left center;

--aura-position-center:
  center center;

--aura-position-center-end:
  right center;

--aura-position-bottom-start:
  left bottom;

--aura-position-bottom-center:
  center bottom;

--aura-position-bottom-end:
  right bottom;


/* =======================================================
   D39. AURA SHAPE FOUNDATION
======================================================= */

--aura-shape-circle:
  circle;

--aura-shape-ellipse:
  ellipse;

--aura-shape-wide:
  ellipse 70% 44%;

--aura-shape-tall:
  ellipse 44% 70%;


/* =======================================================
   D40. AURA GRADIENT RECIPES
======================================================= */

--aura-gradient-primary:
  radial-gradient(
    var(--aura-shape-circle)
    at center,
    var(--aura-primary-default),
    transparent 70%
  );

--aura-gradient-primary-soft:
  radial-gradient(
    var(--aura-shape-circle)
    at center,
    var(--aura-primary-subtle),
    transparent 72%
  );

--aura-gradient-accent:
  radial-gradient(
    var(--aura-shape-circle)
    at center,
    var(--aura-accent-default),
    transparent 70%
  );

--aura-gradient-accent-soft:
  radial-gradient(
    var(--aura-shape-circle)
    at center,
    var(--aura-accent-subtle),
    transparent 72%
  );

--aura-gradient-dual:
  radial-gradient(
    circle at 24% 34%,
    var(--aura-primary-default),
    transparent 44%
  ),
  radial-gradient(
    circle at 78% 64%,
    var(--aura-accent-default),
    transparent 46%
  );

--aura-gradient-light:
  radial-gradient(
    var(--aura-shape-circle)
    at center,
    var(--aura-light-subtle),
    transparent 72%
  );


/* =======================================================
   D41. SEMANTIC AURA ROLES
======================================================= */

--aura-page-image:
  var(--aura-gradient-dual);

--aura-page-size:
  var(--aura-size-xl);

--aura-page-position:
  var(--aura-position-top-center);

--aura-page-repeat:
  no-repeat;


--aura-section-image:
  var(--aura-gradient-primary-soft);

--aura-section-size:
  var(--aura-size-lg);

--aura-section-position:
  var(--aura-position-center-end);

--aura-section-repeat:
  no-repeat;


--aura-feature-image:
  var(--aura-gradient-dual);

--aura-feature-size:
  var(--aura-size-xl);

--aura-feature-position:
  var(--aura-position-center);

--aura-feature-repeat:
  no-repeat;


--aura-panel-image:
  var(--aura-gradient-light);

--aura-panel-size:
  var(--aura-size-md);

--aura-panel-position:
  var(--aura-position-top-start);

--aura-panel-repeat:
  no-repeat;


/* =======================================================
   D42. LARGE WATERMARK FOUNDATION
======================================================= */

/*
  Supports oversized RH logos or marks used as subtle
  structural background texture.
*/

--watermark-image:
  none;

--watermark-size-sm:
  var(--dimension-240);

--watermark-size-md:
  var(--dimension-280);

--watermark-size-lg:
  var(--dimension-540);

--watermark-position-center:
  center;

--watermark-position-start:
  left center;

--watermark-position-end:
  right center;

--watermark-opacity-subtle:
  var(--a-02);

--watermark-opacity-default:
  var(--a-04);

--watermark-opacity-strong:
  var(--a-06);

--watermark-filter:
  grayscale(1)
  contrast(0.8);

--watermark-blend:
  soft-light;


/* =======================================================
   D43. SEMANTIC WATERMARK ROLES
======================================================= */

--watermark-page-size:
  var(--watermark-size-lg);

--watermark-page-position:
  var(--watermark-position-center);

--watermark-page-opacity:
  var(--watermark-opacity-subtle);


--watermark-section-size:
  var(--watermark-size-md);

--watermark-section-position:
  var(--watermark-position-end);

--watermark-section-opacity:
  var(--watermark-opacity-default);


--watermark-feature-size:
  var(--watermark-size-lg);

--watermark-feature-position:
  var(--watermark-position-center);

--watermark-feature-opacity:
  var(--watermark-opacity-default);


/* =======================================================
   D44. BACKGROUND BLEND FOUNDATION
======================================================= */

--blend-normal:
  normal;

--blend-multiply:
  multiply;

--blend-screen:
  screen;

--blend-overlay:
  overlay;

--blend-soft-light:
  soft-light;

--blend-hard-light:
  hard-light;

--blend-luminosity:
  luminosity;


/* =======================================================
   D45. SEMANTIC BLEND ROLES
======================================================= */

--blend-texture:
  var(--blend-soft-light);

--blend-aura:
  var(--blend-screen);

--blend-watermark:
  var(--blend-soft-light);

--blend-media-overlay:
  var(--blend-normal);

--blend-brand:
  var(--blend-screen);


/* =======================================================
   D46. BACKGROUND ATTACHMENT FOUNDATION
======================================================= */

--background-attachment-scroll:
  scroll;

--background-attachment-fixed:
  fixed;

--background-attachment-local:
  local;


/* =======================================================
   D47. BACKGROUND REPEAT FOUNDATION
======================================================= */

--background-repeat-none:
  no-repeat;

--background-repeat-all:
  repeat;

--background-repeat-x:
  repeat-x;

--background-repeat-y:
  repeat-y;


/* =======================================================
   D48. BACKGROUND SIZE FOUNDATION
======================================================= */

--background-size-cover:
  cover;

--background-size-contain:
  contain;

--background-size-auto:
  auto;

--background-size-full:
  100% 100%;


/* =======================================================
   D49. MEDIA MASK FOUNDATION
======================================================= */

--mask-fade-bottom:
  linear-gradient(
    180deg,
    var(--neutral-900) 72%,
    transparent 100%
  );

--mask-fade-top:
  linear-gradient(
    0deg,
    var(--neutral-900) 72%,
    transparent 100%
  );

--mask-fade-horizontal:
  linear-gradient(
    90deg,
    transparent 0%,
    var(--neutral-900) 14%,
    var(--neutral-900) 86%,
    transparent 100%
  );

--mask-vignette:
  radial-gradient(
    ellipse at center,
    var(--neutral-900) 48%,
    transparent 100%
  );


/* =======================================================
   D50. SEMANTIC MASK ROLES
======================================================= */

--media-mask-none:
  none;

--media-mask-bottom:
  var(--mask-fade-bottom);

--media-mask-top:
  var(--mask-fade-top);

--media-mask-horizontal:
  var(--mask-fade-horizontal);

--media-mask-vignette:
  var(--mask-vignette);


/* =======================================================
   D51. GALLERY MEDIA CONTRACT
======================================================= */

--gallery-media-ratio:
  var(--media-ratio-gallery-item);

--gallery-media-fit:
  var(--media-fit-cover);

--gallery-media-position:
  var(--media-position-center);

--gallery-media-radius:
  var(--media-radius-lg);

--gallery-media-border:
  var(--media-border-default);

--gallery-media-shadow:
  var(--media-shadow-subtle);

--gallery-media-filter:
  var(--media-filter-gallery);

--gallery-media-filter-hover:
  var(--media-filter-gallery-hover);

--gallery-media-overlay:
  var(--media-overlay-subtle);

--gallery-media-overlay-hover:
  var(--media-overlay-standard);

--gallery-media-scale-hover:
  var(--media-scale-hover);

--gallery-media-transition:
  var(--media-transition-complete);


/* =======================================================
   D52. CARD MEDIA CONTRACT
======================================================= */

--card-media-ratio:
  var(--media-ratio-card);

--card-media-fit:
  var(--media-fit-cover);

--card-media-position:
  var(--media-position-center);

--card-media-radius:
  var(--media-radius-lg);

--card-media-border:
  var(--media-border-default);

--card-media-shadow:
  var(--media-shadow-none);

--card-media-overlay:
  var(--media-overlay-subtle);

--card-media-gradient:
  var(--media-gradient-bottom-soft);

--card-media-filter:
  var(--media-filter-default);

--card-media-filter-hover:
  var(--media-filter-hover);

--card-media-transition:
  var(--media-transition-complete);


/* =======================================================
   D53. FEATURE MEDIA CONTRACT
======================================================= */

--feature-media-ratio:
  var(--media-ratio-feature);

--feature-media-fit:
  var(--media-fit-cover);

--feature-media-position:
  var(--media-position-center);

--feature-media-radius:
  var(--media-radius-xl);

--feature-media-border:
  var(--media-border-strong);

--feature-media-shadow:
  var(--media-shadow-raised);

--feature-media-overlay:
  var(--media-overlay-feature);

--feature-media-gradient:
  var(--media-gradient-cinematic);

--feature-media-filter:
  var(--media-filter-feature);

--feature-media-transition:
  var(--media-transition-complete);


/* =======================================================
   D54. HERO MEDIA CONTRACT
======================================================= */

--hero-media-ratio:
  var(--media-ratio-hero);

--hero-media-fit:
  var(--media-fit-cover);

--hero-media-position:
  var(--media-position-center);

--hero-media-radius:
  var(--media-radius-none);

--hero-media-border:
  transparent;

--hero-media-shadow:
  var(--media-shadow-none);

--hero-media-overlay:
  var(--media-overlay-cinematic);

--hero-media-gradient:
  var(--media-gradient-cinematic);

--hero-media-filter:
  var(--media-filter-feature);


/* =======================================================
   D55. EQUIPMENT MEDIA CONTRACT
======================================================= */

--equipment-media-ratio:
  var(--media-ratio-equipment);

--equipment-media-fit:
  var(--media-fit-contain);

--equipment-media-position:
  var(--media-position-equipment);

--equipment-media-radius:
  var(--media-radius-md);

--equipment-media-bg:
  var(--media-bg-muted);

--equipment-media-border:
  var(--media-border-default);

--equipment-media-shadow:
  var(--media-shadow-subtle);

--equipment-media-filter:
  var(--media-filter-default);


/* =======================================================
   D56. VEHICLE MEDIA CONTRACT
======================================================= */

--vehicle-media-ratio:
  var(--media-ratio-vehicle);

--vehicle-media-fit:
  var(--media-fit-cover);

--vehicle-media-position:
  var(--media-position-vehicle);

--vehicle-media-radius:
  var(--media-radius-lg);

--vehicle-media-border:
  var(--media-border-default);

--vehicle-media-shadow:
  var(--media-shadow-default);

--vehicle-media-overlay:
  var(--media-overlay-subtle);

--vehicle-media-filter:
  var(--media-filter-feature);


/* =======================================================
   D57. CHARACTER MEDIA CONTRACT
======================================================= */

--character-media-ratio:
  var(--media-ratio-character);

--character-media-fit:
  var(--media-fit-contain);

--character-media-position:
  var(--media-position-character);

--character-media-radius:
  var(--media-radius-none);

--character-media-bg:
  var(--media-bg-transparent);

--character-media-border:
  transparent;

--character-media-shadow:
  var(--media-shadow-none);

--character-media-filter:
  var(--media-filter-none);


/* =======================================================
   D58. ENVIRONMENT MEDIA CONTRACT
======================================================= */

--environment-media-ratio:
  var(--media-ratio-environment);

--environment-media-fit:
  var(--media-fit-cover);

--environment-media-position:
  var(--media-position-environment);

--environment-media-radius:
  var(--media-radius-lg);

--environment-media-border:
  var(--media-border-default);

--environment-media-shadow:
  var(--media-shadow-raised);

--environment-media-filter:
  var(--media-filter-feature);


/* =======================================================
   D59. LOGO MEDIA CONTRACT
======================================================= */

--logo-media-ratio:
  var(--media-ratio-logo);

--logo-media-fit:
  var(--media-fit-contain);

--logo-media-position:
  var(--media-position-center);

--logo-media-bg:
  var(--media-bg-transparent);

--logo-media-border:
  transparent;

--logo-media-shadow:
  var(--media-shadow-none);

--logo-media-filter:
  var(--media-filter-none);


/* =======================================================
   D60. VIDEO MEDIA CONTRACT
======================================================= */

--video-media-ratio:
  var(--media-ratio-video);

--video-media-fit:
  var(--media-fit-cover);

--video-media-position:
  var(--media-position-center);

--video-media-radius:
  var(--media-radius-lg);

--video-media-bg:
  var(--media-bg-dark);

--video-media-border:
  var(--media-border-default);

--video-media-shadow:
  var(--media-shadow-default);

--video-media-overlay:
  var(--media-overlay-standard);


/* =======================================================
   D61. BACKGROUND RECIPE CONTRACTS
======================================================= */

/*
  These recipes coordinate base colour, texture, aura, and
  watermark systems without forcing a component to assemble
  unrelated values manually.
*/

--background-recipe-page-base:
  var(--background-page);

--background-recipe-page-texture:
  var(--texture-page-image);

--background-recipe-page-texture-size:
  var(--texture-page-size);

--background-recipe-page-aura:
  var(--aura-page-image);

--background-recipe-page-aura-size:
  var(--aura-page-size);


--background-recipe-section-base:
  var(--background-section);

--background-recipe-section-texture:
  var(--texture-section-image);

--background-recipe-section-texture-size:
  var(--texture-section-size);

--background-recipe-section-aura:
  var(--aura-section-image);

--background-recipe-section-aura-size:
  var(--aura-section-size);


--background-recipe-feature-base:
  var(--background-gradient-surface);

--background-recipe-feature-texture:
  var(--texture-feature-image);

--background-recipe-feature-aura:
  var(--aura-feature-image);

--background-recipe-feature-aura-size:
  var(--aura-feature-size);


/* =======================================================
   D62. LEGACY MEDIA COMPATIBILITY
======================================================= */

/*
  Existing generic media names may temporarily map into the
  expanded system.
*/

--image-fit:
  var(--media-fit-cover);

--image-position:
  var(--media-position-center);

--image-radius:
  var(--media-radius-lg);

--image-overlay:
  var(--media-overlay-standard);

--image-filter:
  var(--media-filter-default);

--image-transition:
  var(--media-transition-complete);

--image-ratio:
  var(--media-ratio-card);


/* =======================================================
   D63. LEGACY TEXTURE COMPATIBILITY
======================================================= */

--texture-grid:
  var(--texture-grid-light);

--texture-dot-grid:
  var(--texture-dot-light);

--texture-blueprint-grid:
  var(--texture-blueprint-minor);

--texture-grain:
  var(--texture-grain-image);


/* =======================================================
   D64. MEDIA RECIPE REFERENCE
======================================================= */

/*
  STANDARD CARD IMAGE

  aspect-ratio:
    var(--card-media-ratio);

  object-fit:
    var(--card-media-fit);

  object-position:
    var(--card-media-position);

  border-radius:
    var(--card-media-radius);

  filter:
    var(--card-media-filter);

  transition:
    var(--card-media-transition);


  STANDARD FEATURE IMAGE

  aspect-ratio:
    var(--feature-media-ratio);

  object-fit:
    var(--feature-media-fit);

  object-position:
    var(--feature-media-position);

  border-radius:
    var(--feature-media-radius);

  filter:
    var(--feature-media-filter);

  box-shadow:
    var(--feature-media-shadow);


  BACKGROUND TEXTURE

  background-image:
    var(--texture-section-image);

  background-size:
    var(--texture-section-size);

  background-position:
    var(--texture-section-position);
*/


/* =======================================================
   D65. MEDIA GOVERNANCE
======================================================= */

/*
  MEDIA RULES

  1. Components must consume approved media contracts.

  2. Components must not define local aspect ratios unless
     a new global or page-specific role is authorized.

  3. Object-position roles must reflect actual subject
     cropping requirements.

  4. Real job photography should remain recognizable and
     must not receive excessive filters.

  5. Feature images may receive stronger contrast than
     gallery or documentation images.

  6. Text placed over media must use an approved overlay or
     gradient that preserves readability.

  7. Character and logo assets should use contain rather
     than cover unless deliberate cropping is required.

  8. Transparent assets must not inherit photographic
     filters.

  9. Background textures must never reduce text contrast.

  10. Texture opacity should remain within the approved
      quiet-to-strong range.

  11. Aura effects must remain decorative and must not
      compete with component hierarchy.

  12. Watermarks should be subtle structural elements,
      never primary content.

  13. Grain requires an approved local asset before
      --texture-grain-image is assigned.

  14. Fixed background attachment should be avoided on
      mobile unless performance testing proves it safe.

  15. Blend modes must not be relied upon to repair weak
      contrast or poor asset selection.

  16. Masks must not hide essential content.

  17. Gallery interaction must preserve consistent crop,
      ratio, and focal positioning.

  18. Page-specific media roles may alias global contracts
      but must not redefine global foundations.

  19. Existing images should be audited before broad filter
      changes are applied.

  20. Compatibility aliases remain until selector usage has
      been audited and migrated.
*/

/* =========================================================
   PACKAGE E
   MOTION + STATE + LOADING SYSTEMS
========================================================= */

/*
  PURPOSE
  - Establish complete interaction-state architecture.
  - Standardize motion, feedback, validation, loading,
    skeleton, progress, and transition behaviour.
  - Separate duration, easing, distance, and state visuals.
  - Prevent components from inventing local animation recipes.
  - Support tools, forms, cards, navigation, modals, drawers,
    accordions, galleries, and application workflows.

  RULES
  - Duration tokens contain time values only.
  - Easing tokens contain timing functions only.
  - Motion recipes consume duration, easing, and transforms.
  - State roles describe interaction intent.
  - Components consume approved state and motion contracts.
  - Reduced-motion behaviour must remain available globally.
*/


/* =======================================================
   E1. MOTION DISTANCE FOUNDATION
======================================================= */

/*
  Direction-neutral distances.

  Components decide whether movement occurs on the X axis,
  Y axis, or both.
*/

--motion-distance-none:
  var(--translate-none);

--motion-distance-xs:
  var(--translate-xs);

--motion-distance-sm:
  var(--translate-sm);

--motion-distance-md:
  var(--translate-md);

--motion-distance-lg:
  var(--translate-lg);

--motion-distance-xl:
  var(--translate-xl);

--motion-distance-2xl:
  var(--translate-2xl);


/* =======================================================
   E2. MOTION SCALE FOUNDATION
======================================================= */

--motion-scale-none:
  var(--scale-none);

--motion-scale-enter:
  var(--scale-down-sm);

--motion-scale-exit:
  var(--scale-up-xs);

--motion-scale-hover:
  var(--scale-up-sm);

--motion-scale-active:
  var(--scale-down-sm);

--motion-scale-emphasis:
  var(--scale-up-md);


/* =======================================================
   E3. MOTION ROTATION FOUNDATION
======================================================= */

--motion-rotate-none:
  var(--rotate-none);

--motion-rotate-xs:
  var(--rotate-xs);

--motion-rotate-sm:
  var(--rotate-sm);

--motion-rotate-md:
  var(--rotate-md);

--motion-rotate-quarter:
  var(--rotate-quarter);

--motion-rotate-half:
  var(--rotate-half);

--motion-rotate-full:
  var(--rotate-full);


/* =======================================================
   E4. MOTION BLUR FOUNDATION
======================================================= */

--motion-blur-none:
  var(--blur-none);

--motion-blur-sm:
  var(--blur-xs);

--motion-blur-md:
  var(--blur-sm);

--motion-blur-lg:
  var(--blur-md);


/* =======================================================
   E5. MOTION OPACITY FOUNDATION
======================================================= */

--motion-opacity-hidden:
  var(--a-00);

--motion-opacity-muted:
  var(--a-40);

--motion-opacity-visible:
  var(--a-100);


/* =======================================================
   E6. MOTION ORIGIN FOUNDATION
======================================================= */

--motion-origin-center:
  center;

--motion-origin-top:
  center top;

--motion-origin-bottom:
  center bottom;

--motion-origin-left:
  left center;

--motion-origin-right:
  right center;

--motion-origin-top-left:
  left top;

--motion-origin-top-right:
  right top;

--motion-origin-bottom-left:
  left bottom;

--motion-origin-bottom-right:
  right bottom;


/* =======================================================
   E7. MOTION DIRECTION FOUNDATION
======================================================= */

--motion-direction-normal:
  normal;

--motion-direction-reverse:
  reverse;

--motion-direction-alternate:
  alternate;

--motion-direction-alternate-reverse:
  alternate-reverse;


/* =======================================================
   E8. MOTION ITERATION FOUNDATION
======================================================= */

--motion-iteration-once:
  1;

--motion-iteration-twice:
  2;

--motion-iteration-infinite:
  infinite;


/* =======================================================
   E9. MOTION FILL FOUNDATION
======================================================= */

--motion-fill-none:
  none;

--motion-fill-forwards:
  forwards;

--motion-fill-backwards:
  backwards;

--motion-fill-both:
  both;


/* =======================================================
   E10. TRANSITION PROPERTY FOUNDATION
======================================================= */

--transition-property-none:
  none;

--transition-property-color:
  color;

--transition-property-background:
  background-color;

--transition-property-border:
  border-color;

--transition-property-opacity:
  opacity;

--transition-property-transform:
  transform;

--transition-property-filter:
  filter;

--transition-property-shadow:
  box-shadow;

--transition-property-height:
  height;

--transition-property-max-height:
  max-height;


/* =======================================================
   E11. COMPOSITE TRANSITION FOUNDATION
======================================================= */

--transition-colors:
  color
  var(--duration-sm)
  var(--ease-standard),
  background-color
  var(--duration-sm)
  var(--ease-standard),
  border-color
  var(--duration-sm)
  var(--ease-standard);

--transition-interactive:
  color
  var(--duration-sm)
  var(--ease-standard),
  background-color
  var(--duration-sm)
  var(--ease-standard),
  border-color
  var(--duration-sm)
  var(--ease-standard),
  box-shadow
  var(--duration-sm)
  var(--ease-standard),
  transform
  var(--duration-sm)
  var(--ease-emphasized);

--transition-surface:
  background-color
  var(--duration-md)
  var(--ease-standard),
  border-color
  var(--duration-md)
  var(--ease-standard),
  box-shadow
  var(--duration-md)
  var(--ease-standard);

--transition-visibility:
  opacity
  var(--duration-md)
  var(--ease-standard),
  visibility
  var(--duration-md)
  var(--ease-standard);

--transition-collapse:
  max-height
  var(--duration-lg)
  var(--ease-emphasized),
  opacity
  var(--duration-md)
  var(--ease-standard);

--transition-overlay:
  opacity
  var(--duration-md)
  var(--ease-standard),
  backdrop-filter
  var(--duration-md)
  var(--ease-standard);


/* =======================================================
   E12. MOTION RECIPE
   FADE
======================================================= */

--motion-fade-duration:
  var(--duration-md);

--motion-fade-ease:
  var(--ease-standard);

--motion-fade-from-opacity:
  var(--motion-opacity-hidden);

--motion-fade-to-opacity:
  var(--motion-opacity-visible);

--motion-fade-fill:
  var(--motion-fill-both);


/* =======================================================
   E13. MOTION RECIPE
   FADE FAST
======================================================= */

--motion-fade-fast-duration:
  var(--duration-sm);

--motion-fade-fast-ease:
  var(--ease-standard);

--motion-fade-fast-from-opacity:
  var(--motion-opacity-hidden);

--motion-fade-fast-to-opacity:
  var(--motion-opacity-visible);

--motion-fade-fast-fill:
  var(--motion-fill-both);


/* =======================================================
   E14. MOTION RECIPE
   LIFT
======================================================= */

--motion-lift-duration:
  var(--duration-md);

--motion-lift-ease:
  var(--ease-emphasized);

--motion-lift-from-y:
  var(--motion-distance-sm);

--motion-lift-to-y:
  var(--motion-distance-none);

--motion-lift-from-opacity:
  var(--motion-opacity-hidden);

--motion-lift-to-opacity:
  var(--motion-opacity-visible);

--motion-lift-fill:
  var(--motion-fill-both);


/* =======================================================
   E15. MOTION RECIPE
   RISE
======================================================= */

--motion-rise-duration:
  var(--duration-lg);

--motion-rise-ease:
  var(--ease-decelerate);

--motion-rise-from-y:
  var(--motion-distance-lg);

--motion-rise-to-y:
  var(--motion-distance-none);

--motion-rise-from-opacity:
  var(--motion-opacity-hidden);

--motion-rise-to-opacity:
  var(--motion-opacity-visible);

--motion-rise-fill:
  var(--motion-fill-both);


/* =======================================================
   E16. MOTION RECIPE
   SLIDE
======================================================= */

--motion-slide-duration:
  var(--duration-lg);

--motion-slide-ease:
  var(--ease-emphasized);

--motion-slide-distance:
  var(--motion-distance-xl);

--motion-slide-fill:
  var(--motion-fill-both);


/* =======================================================
   E17. MOTION RECIPE
   SCALE
======================================================= */

--motion-scale-duration:
  var(--duration-md);

--motion-scale-ease:
  var(--ease-emphasized);

--motion-scale-from:
  var(--motion-scale-enter);

--motion-scale-to:
  var(--motion-scale-none);

--motion-scale-from-opacity:
  var(--motion-opacity-hidden);

--motion-scale-to-opacity:
  var(--motion-opacity-visible);

--motion-scale-fill:
  var(--motion-fill-both);


/* =======================================================
   E18. MOTION RECIPE
   REVEAL
======================================================= */

--motion-reveal-duration:
  var(--duration-lg);

--motion-reveal-ease:
  var(--ease-emphasized);

--motion-reveal-from-opacity:
  var(--motion-opacity-hidden);

--motion-reveal-to-opacity:
  var(--motion-opacity-visible);

--motion-reveal-from-y:
  var(--motion-distance-md);

--motion-reveal-to-y:
  var(--motion-distance-none);

--motion-reveal-fill:
  var(--motion-fill-both);


/* =======================================================
   E19. MOTION RECIPE
   COLLAPSE
======================================================= */

--motion-collapse-duration:
  var(--duration-lg);

--motion-collapse-ease:
  var(--ease-emphasized);

--motion-collapse-from-opacity:
  var(--motion-opacity-visible);

--motion-collapse-to-opacity:
  var(--motion-opacity-hidden);

--motion-collapse-fill:
  var(--motion-fill-both);


/* =======================================================
   E20. MOTION RECIPE
   EXPAND
======================================================= */

--motion-expand-duration:
  var(--duration-lg);

--motion-expand-ease:
  var(--ease-decelerate);

--motion-expand-from-opacity:
  var(--motion-opacity-hidden);

--motion-expand-to-opacity:
  var(--motion-opacity-visible);

--motion-expand-fill:
  var(--motion-fill-both);


/* =======================================================
   E21. MOTION RECIPE
   EMPHASIS
======================================================= */

--motion-emphasis-duration:
  var(--duration-md);

--motion-emphasis-ease:
  var(--ease-emphasized);

--motion-emphasis-scale:
  var(--motion-scale-emphasis);

--motion-emphasis-iteration:
  var(--motion-iteration-once);


/* =======================================================
   E22. MOTION RECIPE
   FEEDBACK
======================================================= */

--motion-feedback-duration:
  var(--duration-sm);

--motion-feedback-ease:
  var(--ease-standard);

--motion-feedback-scale:
  var(--motion-scale-active);

--motion-feedback-fill:
  var(--motion-fill-both);


/* =======================================================
   E23. MOTION RECIPE
   SHAKE
======================================================= */

--motion-shake-duration:
  var(--duration-lg);

--motion-shake-ease:
  var(--ease-standard);

--motion-shake-distance:
  var(--motion-distance-sm);

--motion-shake-iteration:
  var(--motion-iteration-once);


/* =======================================================
   E24. MOTION RECIPE
   SPIN
======================================================= */

--motion-spin-duration:
  var(--duration-2xl);

--motion-spin-ease:
  var(--ease-linear);

--motion-spin-rotation:
  var(--motion-rotate-full);

--motion-spin-iteration:
  var(--motion-iteration-infinite);


/* =======================================================
   E25. MOTION RECIPE
   PULSE
======================================================= */

--motion-pulse-duration:
  var(--duration-2xl);

--motion-pulse-ease:
  var(--ease-standard);

--motion-pulse-opacity-min:
  var(--a-40);

--motion-pulse-opacity-max:
  var(--a-100);

--motion-pulse-iteration:
  var(--motion-iteration-infinite);

--motion-pulse-direction:
  var(--motion-direction-alternate);


/* =======================================================
   E26. MODAL MOTION CONTRACT
======================================================= */

--modal-motion-enter-duration:
  var(--duration-lg);

--modal-motion-enter-ease:
  var(--ease-decelerate);

--modal-motion-enter-scale:
  var(--motion-scale-enter);

--modal-motion-enter-y:
  var(--motion-distance-sm);

--modal-motion-enter-opacity:
  var(--motion-opacity-hidden);


--modal-motion-exit-duration:
  var(--duration-md);

--modal-motion-exit-ease:
  var(--ease-accelerate);

--modal-motion-exit-scale:
  var(--motion-scale-exit);

--modal-motion-exit-y:
  var(--motion-distance-xs);

--modal-motion-exit-opacity:
  var(--motion-opacity-hidden);


/* =======================================================
   E27. DRAWER MOTION CONTRACT
======================================================= */

--drawer-motion-enter-duration:
  var(--duration-lg);

--drawer-motion-enter-ease:
  var(--ease-decelerate);

--drawer-motion-enter-distance:
  var(--motion-distance-2xl);

--drawer-motion-enter-opacity:
  var(--motion-opacity-hidden);


--drawer-motion-exit-duration:
  var(--duration-md);

--drawer-motion-exit-ease:
  var(--ease-accelerate);

--drawer-motion-exit-distance:
  var(--motion-distance-xl);

--drawer-motion-exit-opacity:
  var(--motion-opacity-hidden);


/* =======================================================
   E28. DROPDOWN MOTION CONTRACT
======================================================= */

--dropdown-motion-enter-duration:
  var(--duration-sm);

--dropdown-motion-enter-ease:
  var(--ease-decelerate);

--dropdown-motion-enter-y:
  var(--motion-distance-xs);

--dropdown-motion-enter-scale:
  var(--scale-down-sm);

--dropdown-motion-enter-opacity:
  var(--motion-opacity-hidden);


--dropdown-motion-exit-duration:
  var(--duration-xs);

--dropdown-motion-exit-ease:
  var(--ease-accelerate);

--dropdown-motion-exit-y:
  var(--motion-distance-xs);

--dropdown-motion-exit-opacity:
  var(--motion-opacity-hidden);


/* =======================================================
   E29. TOOLTIP MOTION CONTRACT
======================================================= */

--tooltip-motion-enter-duration:
  var(--duration-sm);

--tooltip-motion-enter-ease:
  var(--ease-decelerate);

--tooltip-motion-enter-y:
  var(--motion-distance-xs);

--tooltip-motion-enter-opacity:
  var(--motion-opacity-hidden);


--tooltip-motion-exit-duration:
  var(--duration-xs);

--tooltip-motion-exit-ease:
  var(--ease-accelerate);

--tooltip-motion-exit-opacity:
  var(--motion-opacity-hidden);


/* =======================================================
   E30. ACCORDION MOTION CONTRACT
======================================================= */

--accordion-motion-duration:
  var(--duration-lg);

--accordion-motion-ease:
  var(--ease-emphasized);

--accordion-motion-opacity-duration:
  var(--duration-md);

--accordion-icon-motion:
  transform
  var(--duration-md)
  var(--ease-emphasized);


/* =======================================================
   E31. CAROUSEL MOTION CONTRACT
======================================================= */

--carousel-motion-duration:
  var(--duration-lg);

--carousel-motion-ease:
  var(--ease-emphasized);

--carousel-motion-distance:
  var(--motion-distance-xl);

--carousel-transition-opacity:
  opacity
  var(--duration-md)
  var(--ease-standard);


/* =======================================================
   E32. STATE OPACITY FOUNDATION
======================================================= */

--state-hidden-opacity:
  var(--a-00);

--state-disabled-opacity:
  var(--a-40);

--state-muted-opacity:
  var(--a-64);

--state-loading-opacity:
  var(--a-72);

--state-readonly-opacity:
  var(--a-80);

--state-hover-opacity:
  var(--a-100);

--state-active-opacity:
  var(--a-100);

--state-dragging-opacity:
  var(--a-80);


/* =======================================================
   E33. DEFAULT STATE CONTRACT
======================================================= */

--state-default-bg:
  var(--surface-interactive-bg);

--state-default-border:
  var(--surface-interactive-border);

--state-default-text:
  var(--fg-primary);

--state-default-icon:
  var(--fg-secondary);

--state-default-shadow:
  var(--surface-interactive-shadow);

--state-default-opacity:
  var(--a-100);


/* =======================================================
   E34. HOVER STATE CONTRACT
======================================================= */

--state-hover-bg:
  var(--surface-interactive-bg-hover);

--state-hover-border:
  var(--surface-interactive-border-hover);

--state-hover-text:
  var(--fg-primary);

--state-hover-icon:
  var(--fg-primary);

--state-hover-shadow:
  var(--surface-interactive-shadow-hover);

--state-hover-scale:
  var(--motion-scale-hover);

--state-hover-translate-y:
  calc(var(--motion-distance-xs) * -1);




/* =======================================================
   E35. ACTIVE STATE CONTRACT
======================================================= */

--state-active-bg:
  var(--surface-interactive-bg-active);

--state-active-border:
  var(--surface-interactive-border-active);

--state-active-text:
  var(--fg-primary);

--state-active-icon:
  var(--fg-primary);

--state-active-shadow:
  var(--surface-interactive-shadow-active);

--state-active-scale:
  var(--motion-scale-active);

--state-active-translate-y:
  var(--motion-distance-none);



/* =======================================================
   E36. SELECTED STATE CONTRACT
======================================================= */

--state-selected-bg:
  var(--surface-selected-bg);

--state-selected-border:
  var(--surface-selected-border);

--state-selected-text:
  var(--fg-primary);

--state-selected-icon:
  var(--brand-primary);

--state-selected-highlight:
  var(--surface-selected-highlight);

--state-selected-shadow:
  var(--surface-selected-shadow);

--state-selected-ring:
  0
  0
  0
  var(--stroke-2)
  var(--border-primary-subtle);

--state-selected-opacity:
  var(--a-100);


/* =======================================================
   E37. PRESSED STATE CONTRACT
======================================================= */

--state-pressed-bg:
  var(--surface-primary-standard);

--state-pressed-border:
  var(--border-primary-strong);

--state-pressed-text:
  var(--fg-primary);

--state-pressed-icon:
  var(--brand-primary);

--state-pressed-shadow:
  var(--shadow-contact-xs);

--state-pressed-scale:
  var(--motion-scale-active);


/* =======================================================
   E38. FOCUS STATE CONTRACT
======================================================= */

--state-focus-bg:
  var(--surface-interactive-bg);

--state-focus-border:
  var(--border-primary-strong);

--state-focus-text:
  var(--fg-primary);

--state-focus-icon:
  var(--brand-primary);

--state-focus-ring-color:
  rgba(var(--brand-primary-rgb) / var(--a-32));

--state-focus-ring-width:
  var(--stroke-3);

--state-focus-ring-offset:
  var(--stroke-2);

--state-focus-ring-offset-color:
  var(--surface-page-bg);

--state-focus-ring:
  0
  0
  0
  var(--state-focus-ring-offset)
  var(--state-focus-ring-offset-color),
  0
  0
  0
  calc(
    var(--state-focus-ring-offset) +
    var(--state-focus-ring-width)
  )
  var(--state-focus-ring-color);


/* =======================================================
   E39. DISABLED STATE CONTRACT
======================================================= */

--state-disabled-bg:
  var(--surface-disabled-bg);

--state-disabled-border:
  var(--surface-disabled-border);

--state-disabled-text:
  var(--fg-disabled);

--state-disabled-icon:
  var(--fg-disabled);

--state-disabled-shadow:
  var(--surface-disabled-shadow);


--state-disabled-cursor:
  not-allowed;


/* =======================================================
   E40. READONLY STATE CONTRACT
======================================================= */

--state-readonly-bg:
  var(--surface-recessed-bg);

--state-readonly-border:
  var(--border-quiet);

--state-readonly-text:
  var(--fg-secondary);

--state-readonly-icon:
  var(--fg-tertiary);

--state-readonly-shadow:
  var(--surface-recessed-shadow);



--state-readonly-cursor:
  default;


/* =======================================================
   E41. EXPANDED STATE CONTRACT
======================================================= */

--state-expanded-bg:
  var(--surface-panel-raised-bg);

--state-expanded-border:
  var(--surface-panel-raised-border);

--state-expanded-text:
  var(--fg-primary);

--state-expanded-icon:
  var(--brand-primary);

--state-expanded-shadow:
  var(--surface-panel-raised-shadow);

--state-expanded-icon-rotation:
  var(--motion-rotate-half);


/* =======================================================
   E42. DRAGGING STATE CONTRACT
======================================================= */

--state-dragging-bg:
  var(--surface-card-raised-bg);

--state-dragging-border:
  var(--border-primary);

--state-dragging-text:
  var(--fg-primary);

--state-dragging-shadow:
  var(--elevation-floating);

--state-dragging-scale:
  var(--scale-up-xs);



--state-dragging-cursor:
  grabbing;


/* =======================================================
   E43. DROP TARGET STATE CONTRACT
======================================================= */

--state-drop-target-bg:
  var(--surface-primary-subtle);

--state-drop-target-border:
  var(--border-primary-strong);

--state-drop-target-text:
  var(--fg-primary);

--state-drop-target-icon:
  var(--brand-primary);

--state-drop-target-shadow:
  var(--glow-primary-sm);

--state-drop-target-ring:
  inset
  0
  0
  0
  var(--stroke-2)
  var(--border-primary-default);


/* =======================================================
   E44. VALIDATION STATUS FOUNDATION
======================================================= */

--state-valid-color:
  var(--success-500);

--state-invalid-color:
  var(--danger-500);

--state-warning-color:
  var(--warning-500);

--state-info-color:
  var(--info-500);

--state-pending-color:
  var(--brand-accent);


/* =======================================================
   E45. VALID STATE CONTRACT
======================================================= */

--state-valid-bg:
  var(--surface-success-bg);

--state-valid-border:
  var(--surface-success-border);

--state-valid-text:
  var(--state-valid-color);

--state-valid-icon:
  var(--state-valid-color);

--state-valid-shadow:
  var(--surface-success-shadow);

--state-valid-ring:
  0
  0
  0
  var(--stroke-2)
  rgba(var(--success-500-rgb) / var(--a-18));


/* =======================================================
   E46. INVALID STATE CONTRACT
======================================================= */

--state-invalid-bg:
  var(--surface-danger-bg);

--state-invalid-border:
  var(--surface-danger-border);

--state-invalid-text:
  var(--state-invalid-color);

--state-invalid-icon:
  var(--state-invalid-color);

--state-invalid-shadow:
  var(--surface-danger-shadow);

--state-invalid-ring:
  0
  0
  0
  var(--stroke-2)
  rgba(var(--danger-500-rgb) / var(--a-18));


/* =======================================================
   E47. WARNING STATE CONTRACT
======================================================= */

--state-warning-bg:
  var(--surface-warning-bg);

--state-warning-border:
  var(--surface-warning-border);

--state-warning-text:
  var(--state-warning-color);

--state-warning-icon:
  var(--state-warning-color);

--state-warning-shadow:
  var(--surface-warning-shadow);

--state-warning-ring:
  0
  0
  0
  var(--stroke-2)
  rgba(var(--warning-500-rgb) / var(--a-18));


/* =======================================================
   E48. INFO STATE CONTRACT
======================================================= */

--state-info-bg:
  var(--surface-info-bg);

--state-info-border:
  var(--surface-info-border);

--state-info-text:
  var(--state-info-color);

--state-info-icon:
  var(--state-info-color);

--state-info-shadow:
  var(--surface-info-shadow);

--state-info-ring:
  0
  0
  0
  var(--stroke-2)
  rgba(var(--info-500-rgb) / var(--a-18));


/* =======================================================
   E49. PENDING STATE CONTRACT
======================================================= */

--state-pending-bg:
  var(--surface-accent-subtle);

--state-pending-border:
  var(--border-accent-default);

--state-pending-text:
  var(--state-pending-color);

--state-pending-icon:
  var(--state-pending-color);

--state-pending-shadow:
  var(--glow-accent-sm);

--state-pending-ring:
  0
  0
  0
  var(--stroke-2)
  rgba(var(--brand-accent-rgb) / var(--a-18));


/* =======================================================
   E50. LOADING STATE CONTRACT
======================================================= */

--state-loading-bg:
  var(--surface-alpha-72);

--state-loading-border:
  var(--border-quiet);

--state-loading-text:
  var(--fg-secondary);

--state-loading-icon:
  var(--brand-primary);

--state-loading-shadow:
  none;



--state-loading-cursor:
  progress;


/* =======================================================
   E51. SKELETON FOUNDATION
======================================================= */

--skeleton-bg:
  var(--surface-light-alpha-04);

--skeleton-bg-strong:
  var(--surface-light-alpha-08);

--skeleton-highlight:
  var(--surface-light-alpha-12);

--skeleton-border:
  var(--border-light-quiet);

--skeleton-radius-sm:
  var(--radius-sm);

--skeleton-radius-md:
  var(--radius-md);

--skeleton-radius-lg:
  var(--radius-lg);

--skeleton-opacity:
  var(--a-100);


/* =======================================================
   E52. SKELETON GRADIENT
======================================================= */

--skeleton-gradient:
  linear-gradient(
    90deg,
    var(--skeleton-bg) 0%,
    var(--skeleton-highlight) 48%,
    var(--skeleton-bg) 100%
  );

--skeleton-gradient-subtle:
  linear-gradient(
    90deg,
    transparent 0%,
    var(--skeleton-highlight) 50%,
    transparent 100%
  );


/* =======================================================
   E53. SHIMMER FOUNDATION
======================================================= */

--shimmer-angle:
  90deg;

--shimmer-width:
  42%;

--shimmer-position-start:
  -100%;

--shimmer-position-end:
  200%;

--shimmer-duration:
  var(--duration-2xl);

--shimmer-ease:
  var(--ease-linear);

--shimmer-iteration:
  var(--motion-iteration-infinite);


/* =======================================================
   E54. SKELETON SIZE ROLES
======================================================= */

--skeleton-line-h-sm:
  var(--space-2);

--skeleton-line-h-md:
  var(--space-3);

--skeleton-line-h-lg:
  var(--space-4);

--skeleton-line-w-short:
  36%;

--skeleton-line-w-medium:
  64%;

--skeleton-line-w-long:
  88%;

--skeleton-line-w-full:
  100%;

--skeleton-avatar-sm:
  var(--media-size-avatar-sm);

--skeleton-avatar-md:
  var(--media-size-avatar-md);

--skeleton-avatar-lg:
  var(--media-size-avatar-lg);


/* =======================================================
   E55. PROGRESS FOUNDATION
======================================================= */

--progress-track-bg:
  var(--surface-light-alpha-08);

--progress-track-border:
  var(--border-light-quiet);

--progress-fill-bg:
  var(--brand-primary);

--progress-fill-success:
  var(--success-500);

--progress-fill-warning:
  var(--warning-500);

--progress-fill-danger:
  var(--danger-500);

--progress-fill-info:
  var(--info-500);

--progress-fill-pending:
  var(--brand-accent);


/* =======================================================
   E56. PROGRESS DIMENSIONS
======================================================= */

--progress-h-xs:
  var(--stroke-2);

--progress-h-sm:
  var(--space-1);

--progress-h-md:
  var(--space-2);

--progress-h-lg:
  var(--space-3);

--progress-radius:
  var(--radius-pill);


/* =======================================================
   E57. PROGRESS MOTION
======================================================= */

--progress-motion:
  width
  var(--duration-lg)
  var(--ease-emphasized);

--progress-motion-fast:
  width
  var(--duration-md)
  var(--ease-standard);

--progress-stripe-motion:
  background-position
  var(--duration-2xl)
  var(--ease-linear);


/* =======================================================
   E58. PROGRESS STRIPE FOUNDATION
======================================================= */

--progress-stripe-size:
  var(--space-6)
  var(--space-6);

--progress-stripe-bg:
  linear-gradient(
    135deg,
    rgba(var(--white-rgb) / var(--a-08)) 25%,
    transparent 25%,
    transparent 50%,
    rgba(var(--white-rgb) / var(--a-08)) 50%,
    rgba(var(--white-rgb) / var(--a-08)) 75%,
    transparent 75%,
    transparent
  );


/* =======================================================
   E59. INDETERMINATE PROGRESS CONTRACT
======================================================= */

--progress-indeterminate-width:
  36%;

--progress-indeterminate-duration:
  var(--duration-2xl);

--progress-indeterminate-ease:
  var(--ease-emphasized);

--progress-indeterminate-iteration:
  var(--motion-iteration-infinite);


/* =======================================================
   E60. LOADING MASK CONTRACT
======================================================= */

--loading-mask-bg:
  rgba(var(--black-rgb) / var(--a-40));

--loading-mask-bg-strong:
  rgba(var(--black-rgb) / var(--a-64));

--loading-mask-border:
  var(--border-light-quiet);

--loading-mask-blur:
  var(--blur-sm);

--loading-mask-opacity:
  var(--a-100);

--loading-mask-z:
  var(--layer-floating);


/* =======================================================
   E61. SPINNER FOUNDATION
======================================================= */

--spinner-size-sm:
  var(--space-4);

--spinner-size-md:
  var(--space-6);

--spinner-size-lg:
  var(--space-8);

--spinner-stroke-sm:
  var(--stroke-1);

--spinner-stroke-md:
  var(--stroke-2);

--spinner-stroke-lg:
  var(--stroke-3);

--spinner-track:
  var(--surface-light-alpha-12);

--spinner-fill:
  var(--brand-primary);

--spinner-fill-accent:
  var(--brand-accent);

--spinner-duration:
  var(--motion-spin-duration);

--spinner-ease:
  var(--motion-spin-ease);

--spinner-iteration:
  var(--motion-spin-iteration);


/* =======================================================
   E62. DOT LOADER FOUNDATION
======================================================= */

--loader-dot-size-sm:
  var(--space-1);

--loader-dot-size-md:
  var(--space-2);

--loader-dot-size-lg:
  var(--space-3);

--loader-dot-gap:
  var(--space-2);

--loader-dot-bg:
  var(--brand-primary);

--loader-dot-bg-muted:
  var(--surface-light-alpha-20);

--loader-dot-duration:
  var(--duration-2xl);

--loader-dot-delay:
  var(--delay-sm);

--loader-dot-iteration:
  var(--motion-iteration-infinite);


/* =======================================================
   E63. CALCULATING STATE CONTRACT
======================================================= */

/*
  Generic application-calculation state.

  Suitable for Steve's Guess and future tools without
  coupling the contract to a single feature.
*/

--calculating-bg:
  var(--surface-primary-subtle);

--calculating-border:
  var(--border-primary-default);

--calculating-text:
  var(--fg-primary);

--calculating-icon:
  var(--brand-primary);

--calculating-shadow:
  var(--glow-primary-sm);

--calculating-progress-track:
  var(--progress-track-bg);

--calculating-progress-fill:
  var(--progress-fill-bg);

--calculating-motion-duration:
  var(--duration-2xl);

--calculating-motion-ease:
  var(--ease-standard);


/* =======================================================
   E64. SAVING STATE CONTRACT
======================================================= */

--saving-bg:
  var(--surface-accent-subtle);

--saving-border:
  var(--border-accent-default);

--saving-text:
  var(--fg-primary);

--saving-icon:
  var(--brand-accent);

--saving-shadow:
  var(--glow-accent-sm);

--saving-cursor:
  progress;


/* =======================================================
   E65. COMPLETE STATE CONTRACT
======================================================= */

--state-complete-bg:
  var(--surface-success-bg);

--state-complete-border:
  var(--surface-success-border);

--state-complete-text:
  var(--state-valid-text);

--state-complete-icon:
  var(--state-valid-icon);

--state-complete-shadow:
  var(--surface-success-shadow);


/* =======================================================
   E66. ERROR STATE CONTRACT
======================================================= */

--state-error-bg:
  var(--surface-danger-bg);

--state-error-border:
  var(--surface-danger-border);

--state-error-text:
  var(--state-invalid-text);

--state-error-icon:
  var(--state-invalid-icon);

--state-error-shadow:
  var(--surface-danger-shadow);


/* =======================================================
   E67. EMPTY STATE CONTRACT
======================================================= */

--state-empty-bg:
  var(--surface-recessed-bg);

--state-empty-border:
  var(--border-quiet);

--state-empty-text:
  var(--fg-secondary);

--state-empty-icon:
  var(--fg-tertiary);

--state-empty-shadow:
  var(--surface-recessed-shadow);


/* =======================================================
   E68. OFFLINE STATE CONTRACT
======================================================= */

--state-offline-bg:
  var(--surface-warning-bg);

--state-offline-border:
  var(--surface-warning-border);

--state-offline-text:
  var(--state-warning-text);

--state-offline-icon:
  var(--state-warning-icon);

--state-offline-shadow:
  var(--surface-warning-shadow);


/* =======================================================
   E69. SUCCESS FEEDBACK CONTRACT
======================================================= */

--feedback-success-bg:
  var(--surface-success-bg);

--feedback-success-border:
  var(--surface-success-border);

--feedback-success-text:
  var(--state-valid-text);

--feedback-success-icon:
  var(--state-valid-icon);

--feedback-success-shadow:
  var(--surface-success-shadow);

--feedback-success-duration:
  var(--duration-lg);

--feedback-success-ease:
  var(--ease-emphasized);


/* =======================================================
   E70. ERROR FEEDBACK CONTRACT
======================================================= */

--feedback-error-bg:
  var(--surface-danger-bg);

--feedback-error-border:
  var(--surface-danger-border);

--feedback-error-text:
  var(--state-invalid-text);

--feedback-error-icon:
  var(--state-invalid-icon);

--feedback-error-shadow:
  var(--surface-danger-shadow);

--feedback-error-duration:
  var(--duration-lg);

--feedback-error-ease:
  var(--ease-emphasized);


/* =======================================================
   E71. WARNING FEEDBACK CONTRACT
======================================================= */

--feedback-warning-bg:
  var(--surface-warning-bg);

--feedback-warning-border:
  var(--surface-warning-border);

--feedback-warning-text:
  var(--state-warning-text);

--feedback-warning-icon:
  var(--state-warning-icon);

--feedback-warning-shadow:
  var(--surface-warning-shadow);


/* =======================================================
   E72. INFO FEEDBACK CONTRACT
======================================================= */

--feedback-info-bg:
  var(--surface-info-bg);

--feedback-info-border:
  var(--surface-info-border);

--feedback-info-text:
  var(--state-info-text);

--feedback-info-icon:
  var(--state-info-icon);

--feedback-info-shadow:
  var(--surface-info-shadow);


/* =======================================================
   E73. TOAST MOTION CONTRACT
======================================================= */

--toast-motion-enter-duration:
  var(--duration-lg);

--toast-motion-enter-ease:
  var(--ease-decelerate);

--toast-motion-enter-y:
  var(--motion-distance-lg);

--toast-motion-enter-opacity:
  var(--motion-opacity-hidden);


--toast-motion-exit-duration:
  var(--duration-md);

--toast-motion-exit-ease:
  var(--ease-accelerate);

--toast-motion-exit-y:
  var(--motion-distance-sm);

--toast-motion-exit-opacity:
  var(--motion-opacity-hidden);


/* =======================================================
   E74. NOTIFICATION MOTION CONTRACT
======================================================= */

--notification-motion-enter-duration:
  var(--duration-md);

--notification-motion-enter-ease:
  var(--ease-decelerate);

--notification-motion-enter-x:
  var(--motion-distance-xl);

--notification-motion-enter-opacity:
  var(--motion-opacity-hidden);


--notification-motion-exit-duration:
  var(--duration-sm);

--notification-motion-exit-ease:
  var(--ease-accelerate);

--notification-motion-exit-x:
  var(--motion-distance-lg);

--notification-motion-exit-opacity:
  var(--motion-opacity-hidden);


/* =======================================================
   E75. STEP TRANSITION CONTRACT
======================================================= */

--step-motion-exit-duration:
  var(--duration-md);

--step-motion-exit-ease:
  var(--ease-accelerate);

--step-motion-exit-x:
  calc(var(--motion-distance-md) * -1);

--step-motion-exit-opacity:
  var(--motion-opacity-hidden);


--step-motion-enter-duration:
  var(--duration-lg);

--step-motion-enter-ease:
  var(--ease-decelerate);

--step-motion-enter-x:
  var(--motion-distance-md);

--step-motion-enter-opacity:
  var(--motion-opacity-hidden);

--step-motion-stagger:
  var(--delay-xs);


/* =======================================================
   E76. RESULT TRANSITION CONTRACT
======================================================= */

--result-motion-enter-duration:
  var(--duration-lg);

--result-motion-enter-ease:
  var(--ease-emphasized);

--result-motion-enter-y:
  var(--motion-distance-md);

--result-motion-enter-scale:
  var(--scale-down-sm);

--result-motion-enter-opacity:
  var(--motion-opacity-hidden);


--result-motion-exit-duration:
  var(--duration-md);

--result-motion-exit-ease:
  var(--ease-accelerate);

--result-motion-exit-opacity:
  var(--motion-opacity-hidden);


/* =======================================================
   E77. DECISION TRANSITION CONTRACT
======================================================= */

--decision-motion-delay:
  var(--delay-2xl);

--decision-motion-enter-duration:
  var(--duration-lg);

--decision-motion-enter-ease:
  var(--ease-decelerate);

--decision-motion-enter-y:
  var(--motion-distance-sm);

--decision-motion-enter-opacity:
  var(--motion-opacity-hidden);


/* =======================================================
   E78. CHARACTER STATE MOTION
======================================================= */

--character-state-exit-duration:
  var(--duration-md);

--character-state-exit-ease:
  var(--ease-accelerate);

--character-state-exit-scale:
  var(--scale-down-md);

--character-state-exit-opacity:
  var(--motion-opacity-hidden);


--character-state-enter-duration:
  var(--duration-lg);

--character-state-enter-ease:
  var(--ease-decelerate);

--character-state-enter-scale:
  var(--scale-up-xs);

--character-state-enter-opacity:
  var(--motion-opacity-hidden);


/* =======================================================
   E79. REDUCED-MOTION FOUNDATION
======================================================= */

--motion-reduced-duration:
  var(--duration-instant);

--motion-reduced-delay:
  var(--delay-none);

--motion-reduced-distance:
  var(--motion-distance-none);

--motion-reduced-scale:
  var(--motion-scale-none);

--motion-reduced-rotation:
  var(--motion-rotate-none);

--motion-reduced-blur:
  var(--motion-blur-none);

--motion-reduced-iteration:
  var(--motion-iteration-once);


/* =======================================================
   E80. REDUCED-MOTION CONTRACTS
======================================================= */

--transition-reduced:
  none;

--animation-reduced:
  none;

--scroll-behavior-reduced:
  auto;


/* =======================================================
   E81. LEGACY STATE COMPATIBILITY
======================================================= */

--opacity-disabled:
  var(--state-disabled-opacity);

--opacity-muted:
  var(--state-muted-opacity);

--opacity-loading:
  var(--state-loading-opacity);

--state-success-bg:
  var(--state-valid-bg);

--state-success-border:
  var(--state-valid-border);

--state-success-text:
  var(--state-valid-text);






/* =======================================================
   E82. LEGACY LOADING COMPATIBILITY
======================================================= */

--loading-bg:
  var(--loading-mask-bg);

--loading-blur:
  var(--loading-mask-blur);

--loading-spinner-size:
  var(--spinner-size-md);

--loading-spinner-stroke:
  var(--spinner-stroke-md);

--loading-spinner-track:
  var(--spinner-track);

--loading-spinner-fill:
  var(--spinner-fill);

--loading-progress-track:
  var(--progress-track-bg);

--loading-progress-fill:
  var(--progress-fill-bg);


/* =======================================================
   E83. MOTION RECIPE REFERENCE
======================================================= */

/*
  STANDARD INTERACTIVE ELEMENT

  transition:
    var(--transition-interactive);

  hover transform:
    translateY(
      var(--state-hover-translate-y)
    )
    scale(
      var(--state-hover-scale)
    );

  active transform:
    translateY(
      var(--state-active-translate-y)
    )
    scale(
      var(--state-active-scale)
    );


  STANDARD LOADING SPINNER

  width:
    var(--spinner-size-md);

  height:
    var(--spinner-size-md);

  border-width:
    var(--spinner-stroke-md);

  border-color:
    var(--spinner-track);

  border-top-color:
    var(--spinner-fill);

  animation-duration:
    var(--spinner-duration);

  animation-timing-function:
    var(--spinner-ease);

  animation-iteration-count:
    var(--spinner-iteration);


  STANDARD PROGRESS BAR

  height:
    var(--progress-h-md);

  background:
    var(--progress-track-bg);

  border-radius:
    var(--progress-radius);

  fill background:
    var(--progress-fill-bg);

  fill transition:
    var(--progress-motion);
*/


/* =======================================================
   E84. MOTION GOVERNANCE
======================================================= */

/*
  MOTION RULES

  1. Components must not create local duration values.

  2. Components must not create local easing curves.

  3. Duration tokens contain time values only.

  4. Easing tokens contain timing functions only.

  5. Transition recipes may combine properties, duration,
     and easing.

  6. Movement distance must consume the approved motion
     distance scale.

  7. Motion must reinforce state changes and hierarchy.

  8. Motion must not delay critical user actions.

  9. Exit motion should generally be faster than entrance
     motion.

  10. Hover motion should remain subtle.

  11. Infinite animation is reserved for active loading,
      progress, or deliberate ambient states.

  12. Decorative infinite motion must not compete with
      interactive content.

  13. Reduced-motion contracts must be available for every
      animated system.

  14. Components must not animate layout-heavy properties
      when transform or opacity can express the same change.

  15. Staggered animation should remain short and should not
      create long waiting sequences.

  16. Modal, drawer, tooltip, dropdown, accordion, carousel,
      toast, and notification systems must consume their
      approved motion contracts.

  17. Page-specific motion may alias global recipes but must
      not redefine the duration or easing foundations.
*/


/* =======================================================
   E85. STATE GOVERNANCE
======================================================= */

/*
  STATE RULES

  1. Default, hover, active, selected, pressed, focused,
     disabled, readonly, expanded, dragging, and drop-target
     states must use approved contracts.

  2. State visuals must remain distinguishable without
     relying only on colour.

  3. Focus treatment must remain visible and must not be
     removed for aesthetic reasons.

  4. Disabled controls must communicate both visual and
     behavioural unavailability.

  5. Readonly controls must remain visually distinct from
     disabled controls.

  6. Validation states must use matching background, border,
     text, icon, shadow, and ring roles.

  7. Loading must not appear identical to disabled.

  8. Selected and pressed states must remain distinct.

  9. Dragging and drop-target states must not use modal or
     global overlay elevation.

  10. State contracts may be consumed by components but
      must not contain component-specific selector logic.
*/


/* =======================================================
   E86. LOADING GOVERNANCE
======================================================= */

/*
  LOADING RULES

  1. Skeletons represent content structure, not decoration.

  2. Skeleton dimensions should approximate the real content
     that replaces them.

  3. Shimmer must stop when loading completes.

  4. Indeterminate progress is used only when progress cannot
     be measured.

  5. Determinate progress must expose the true completion
     value.

  6. Loading masks must not hide error messages.

  7. Spinners should be used for compact local operations.

  8. Progress bars are preferred for longer application
     operations.

  9. Calculating and saving states should use their distinct
     contracts.

  10. Infinite loaders must respect reduced-motion settings.

  11. Loading visuals must not block cancellation or escape
      actions when cancellation is supported.

  12. Compatibility aliases remain until selector usage has
      been audited and migrated.
*/

/* =========================================================
   PACKAGE F
   LAYOUT + GRID + SPATIAL ARCHITECTURE
========================================================= */

/*
  PURPOSE
  - Establish the complete structural token system.
  - Control containers, sections, grids, stacks, clusters,
    forms, sidebars, tools, dashboards, and responsive flow.
  - Preserve compatibility with the current layout.css.
  - Keep structural decisions out of components.

  RULES
  - Layout tokens control dimensions and spatial behaviour.
  - Layout tokens do not control colour, typography,
    borders, shadows, or decorative effects.
  - Components consume layouts but do not redefine them.
*/


/* =======================================================
   F1. VIEWPORT FOUNDATION
======================================================= */

--viewport-w:
  100vw;

--viewport-h:
  100vh;

--viewport-h-small:
  100svh;

--viewport-h-large:
  100lvh;

--viewport-h-dynamic:
  100dvh;

--viewport-min-h:
  var(--viewport-h-small);

--viewport-app-h:
  var(--viewport-h-dynamic);

--viewport-hero-h:
  var(--viewport-h-small);

  /* =========================================================
   VIEWPORT CAP FOUNDATION
========================================================= */

--viewport-cap-70: 70dvh;
--viewport-cap-80: 80dvh;
--viewport-cap-80-small: 80svh;


/* =======================================================
   F2. SAFE AREA FOUNDATION
======================================================= */

--safe-area-top:
  env(safe-area-inset-top, 0px);

--safe-area-right:
  env(safe-area-inset-right, 0px);

--safe-area-bottom:
  env(safe-area-inset-bottom, 0px);

--safe-area-left:
  env(safe-area-inset-left, 0px);


/* =======================================================
   F3. BREAKPOINT FOUNDATION
======================================================= */

/*
  These tokens document the responsive contract used by
  layout.css and components.css.

  Native custom properties cannot currently be consumed
  directly inside standard @media conditions.

  Media queries therefore use the equivalent literal rem
  values while this foundation remains the authoritative
  breakpoint reference.
*/

--breakpoint-2xs:
  22rem;

--breakpoint-xs:
  36rem;

--breakpoint-sm:
  48rem;

--breakpoint-md:
  56rem;

--breakpoint-lg:
  64rem;

--breakpoint-xl:
  75rem;

--breakpoint-2xl:
  90rem;
/* =======================================================
   F4. CONTAINER WIDTH FOUNDATION
======================================================= */

--container-xs:
  30rem;

--container-sm:
  40rem;

--container-md:
  48rem;

--container-lg:
  64rem;

--container-xl:
  75rem;

  
--container-2xl:
  87.5rem;

  --container-wide:
  90rem;

--container-ultra:
  100rem;

--container-full:
  100%;


/* =======================================================
   F5. SEMANTIC CONTAINER CONTRACTS
======================================================= */

--container-max:
  var(--container-xl);

--container-page:
  var(--container-xl);

--container-page-wide:
  var(--container-wide);

--container-header:
  var(--container-wide);

--container-footer:
  var(--container-wide);

--container-hero:
  var(--container-wide);

--container-feature:
  var(--container-xl);

--container-content:
  var(--container-lg);

--container-article:
  var(--container-md);

--container-form:
  var(--container-sm);

--container-tool:
  var(--container-xl);

--container-dashboard:
  var(--container-ultra);

--container-gallery:
  var(--container-wide);

--container-modal:
  var(--container-md);

--container-modal-wide:
  var(--container-xl);


/* =======================================================
   F6. CONTENT WIDTH FOUNDATION
======================================================= */

--content-xs:
  20rem;

--content-sm:
  28rem;

--content-md:
  36rem;

--content-lg:
  48rem;

--content-xl:
  62rem;

--content-wide:
  72rem;

--content-full:
  100%;


/* =======================================================
   F7. SEMANTIC CONTENT WIDTHS
======================================================= */

--content-max:
  var(--content-lg);

--content-narrow:
  var(--content-sm);

--content-default:
  var(--content-md);

--content-reading:
  var(--content-lg);

--content-editorial:
  var(--content-xl);

--content-legal:
  var(--content-wide);

--content-form:
  var(--content-sm);

--content-callout:
  var(--content-md);

--content-feature:
  var(--content-xl);


/* =======================================================
   F8. CONTAINER GUTTER FOUNDATION
======================================================= */

--gutter-xs:
  var(--space-3);

--gutter-sm:
  var(--space-4);

--gutter-md:
  var(--space-5);

--gutter-lg:
  var(--space-6);

--gutter-xl:
  var(--space-8);

--viewport-gutter-compact:
  3vw;

--viewport-gutter-default:
  4vw;

--viewport-gutter-wide:
  5vw;
/* =======================================================
   F9. SEMANTIC CONTAINER GUTTERS
======================================================= */

--space-container-x:
  clamp(
    var(--gutter-sm),
   var(--viewport-gutter-default),
    var(--gutter-xl)
  );

--space-container-x-compact:
  clamp(
    var(--gutter-xs),
    var(--viewport-gutter-compact),
    var(--gutter-md)
  );

--space-container-x-wide:
  clamp(
    var(--gutter-md),
   var(--viewport-gutter-wide),
    var(--space-10)
  );

--space-container-safe-left:
  max(
    var(--space-container-x),
    var(--safe-area-left)
  );

--space-container-safe-right:
  max(
    var(--space-container-x),
    var(--safe-area-right)
  );


/* =======================================================
   F10. SECTION SPACING FOUNDATION
======================================================= */

/*
  PASS 1 RHYTHM REFINEMENT

  Keeps the existing spacing ladder authoritative while
  reducing oversized section breathing room.

  Large spacing remains reserved for true chapter breaks.
*/

--section-space-xs:
  clamp(
    var(--space-5),
    3vw,
    var(--space-6)
  );

--section-space-sm:
  clamp(
    var(--space-6),
    4vw,
    var(--space-7)
  );

--section-space-md:
  clamp(
    var(--space-7),
    5vw,
    var(--space-9)
  );

--section-space-lg:
  clamp(
    var(--space-8),
    6vw,
    var(--space-10)
  );

--section-space-xl:
  clamp(
    var(--space-9),
    8vw,
    var(--space-12)
  );

/* =======================================================
   F11. SEMANTIC SECTION SPACING
======================================================= */

--space-section-y-sm:
  var(--section-space-sm);

--space-section-y:
  var(--section-space-md);

--space-section-y-lg:
  var(--section-space-lg);

--space-section-y-hero:
  var(--section-space-xl);

--space-section-y-feature:
  var(--section-space-lg);

--space-section-y-cta:
  var(--section-space-lg);

--space-section-y-footer:
  var(--section-space-lg);

--space-section-y-tool:
  var(--section-space-md);

--space-section-y-dashboard:
  var(--section-space-sm);


/* =======================================================
   F12. SECTION SEPARATION CONTRACTS
======================================================= */

--space-section-separation-sm:
  var(--space-6);

--space-section-separation:
  var(--space-8);

--space-section-separation-lg:
  var(--space-10);

--space-section-pause:
  var(--space-12);

--space-section-emphasis:
  var(--dimension-160);


/* =======================================================
   F13. FLOW SPACING FOUNDATION
======================================================= */

--flow-gap-xs:
  var(--space-1);

--flow-gap-sm:
  var(--space-2);

--flow-gap-md:
  var(--space-3);

--flow-gap-lg:
  var(--space-4);

--flow-gap-xl:
  var(--space-6);

--flow-gap-2xl:
  var(--space-8);


/* =======================================================
   F14. STACK CONTRACTS
======================================================= */

--space-stack-gap-tight:
  var(--flow-gap-sm);

--space-stack-gap-compact:
  var(--flow-gap-md);

--space-stack-gap:
  var(--flow-gap-lg);

--space-stack-gap-relaxed:
  var(--flow-gap-xl);

--space-stack-gap-loose:
  var(--flow-gap-2xl);

--space-stack-gap-editorial:
  var(--space-7);

--space-stack-gap-dashboard:
  var(--space-4);

--space-stack-gap-tool:
  var(--space-5);

--space-stack-gap-form:
  var(--space-4);


/* =======================================================
   F15. INLINE AND CLUSTER CONTRACTS
======================================================= */

--space-inline-gap-xs:
  var(--space-1);

--space-inline-gap-sm:
  var(--space-2);

--space-inline-gap:
  var(--space-3);

--space-inline-gap-lg:
  var(--space-4);

--space-inline-gap-xl:
  var(--space-6);

--space-cluster-gap:
  var(--space-inline-gap);

--space-actions-gap:
  var(--space-inline-gap);

--space-nav-gap:
  var(--space-5);

--space-filter-gap:
  var(--space-3);

--space-badge-gap:
  var(--space-2);


/* =======================================================
   F16. GRID GAP FOUNDATION
======================================================= */

/*
  Pass 1 tightens repeated content grids while preserving
  larger feature spacing for intentionally dominant layouts.
*/

--gap-grid-tight:
  var(--space-3);

--gap-grid-compact:
  var(--space-4);

--gap-grid:
  var(--space-5);

--gap-grid-comfortable:
  var(--space-6);

--gap-grid-loose:
  var(--space-7);

--gap-grid-section:
  var(--space-9);

--gap-grid-feature:
  var(--space-10);

--gap-grid-dashboard:
  var(--space-5);

--gap-grid-tool:
  var(--space-6);


/* =======================================================
   F17. COMPONENT INTERNAL SPACING CONTRACTS
======================================================= */

/*
  Normal cards and panels become denser.

  Tool and form spacing remain unchanged so application
  workflows keep their existing interaction geometry.
*/

--space-card-gap:
  var(--space-4);

--space-card-padding-sm:
  var(--space-4);

--space-card-padding:
  var(--space-5);

--space-card-padding-lg:
  var(--space-7);

--space-panel-gap:
  var(--space-4);

--space-panel-padding:
  var(--space-5);

--space-tool-gap:
  var(--space-5);

--space-tool-padding:
  var(--space-6);

--space-form-gap:
  var(--space-4);

--space-field-gap:
  var(--space-2);

--space-action-row-gap:
  var(--space-3);


/* =======================================================
   F18. GRID COLUMN FOUNDATION
======================================================= */

--cols-1:
  minmax(0, 1fr);

--cols-2:
  repeat(
    2,
    minmax(0, 1fr)
  );

--cols-3:
  repeat(
    3,
    minmax(0, 1fr)
  );

--cols-4:
  repeat(
    4,
    minmax(0, 1fr)
  );

--cols-5:
  repeat(
    5,
    minmax(0, 1fr)
  );

--cols-6:
  repeat(
    6,
    minmax(0, 1fr)
  );

--cols-8:
  repeat(
    8,
    minmax(0, 1fr)
  );

--cols-12:
  repeat(
    12,
    minmax(0, 1fr)
  );


/* =======================================================
   F19. AUTO GRID FOUNDATION
======================================================= */

--grid-item-min-xs:
  10rem;

--grid-item-min-sm:
  14rem;

--grid-item-min-md:
  17.5rem;

--grid-item-min-lg:
  22rem;

--grid-item-min-xl:
  28rem;


--grid-auto-xs:
  repeat(
    auto-fit,
    minmax(
      min(
        100%,
        var(--grid-item-min-xs)
      ),
      1fr
    )
  );

--grid-auto-sm:
  repeat(
    auto-fit,
    minmax(
      min(
        100%,
        var(--grid-item-min-sm)
      ),
      1fr
    )
  );

--grid-auto-md:
  repeat(
    auto-fit,
    minmax(
      min(
        100%,
        var(--grid-item-min-md)
      ),
      1fr
    )
  );

--grid-auto-lg:
  repeat(
    auto-fit,
    minmax(
      min(
        100%,
        var(--grid-item-min-lg)
      ),
      1fr
    )
  );

--grid-auto-xl:
  repeat(
    auto-fit,
    minmax(
      min(
        100%,
        var(--grid-item-min-xl)
      ),
      1fr
    )
  );


/* =======================================================
   F20. ASYMMETRICAL GRID CONTRACTS
======================================================= */

--cols-split-balanced:
  minmax(0, 1fr)
  minmax(0, 1fr);

--cols-split-primary:
  minmax(0, 1.15fr)
  minmax(0, 0.85fr);

--cols-split-secondary:
  minmax(0, 0.85fr)
  minmax(0, 1.15fr);

--cols-split-feature:
  minmax(0, 0.95fr)
  minmax(0, 1.05fr);

--cols-split-content:
  minmax(0, 1.05fr)
  minmax(0, 0.95fr);

--cols-split-wide-primary:
  minmax(0, 1.25fr)
  minmax(0, 0.75fr);

--cols-split-wide-secondary:
  minmax(0, 0.75fr)
  minmax(0, 1.25fr);


/* =======================================================
   F21. SIDEBAR WIDTH FOUNDATION
======================================================= */

--sidebar-w-xs:
  12rem;

--sidebar-w-sm:
  16rem;

--sidebar-w-md:
  20rem;

--sidebar-w-lg:
  24rem;

--sidebar-w-xl:
  30rem;


/* =======================================================
   F22. SIDEBAR GRID CONTRACTS
======================================================= */

--cols-sidebar-left:
  minmax(
    var(--sidebar-w-sm),
    var(--sidebar-w-md)
  )
  minmax(0, 1fr);

--cols-sidebar-right:
  minmax(0, 1fr)
  minmax(
    var(--sidebar-w-sm),
    var(--sidebar-w-md)
  );

--cols-sidebar-left-wide:
  minmax(
    var(--sidebar-w-md),
    var(--sidebar-w-lg)
  )
  minmax(0, 1fr);

--cols-sidebar-right-wide:
  minmax(0, 1fr)
  minmax(
    var(--sidebar-w-md),
    var(--sidebar-w-lg)
  );

--cols-sidebar-fluid:
  minmax(0, 1.2fr)
  minmax(0, 0.8fr);


/* =======================================================
   F23. HERO LAYOUT CONTRACTS
======================================================= */

--hero-content-max:
  var(--content-xl);

--hero-content-narrow:
  var(--content-md);

--hero-media-max:
  var(--container-md);

--hero-grid-balanced:
  var(--cols-split-balanced);

--hero-grid-content:
  var(--cols-split-primary);

--hero-grid-media:
  var(--cols-split-secondary);

--hero-gap:
  var(--gap-grid-feature);

--hero-min-height:
  min(
    var(--viewport-h-small),
  var(--dimension-896)
  );

--hero-min-height-compact:
  min(
    var(--viewport-cap-80-small),
 var(--dimension-768)
  );


/* =======================================================
   F24. FEATURE LAYOUT CONTRACTS
======================================================= */

--feature-grid:
  var(--cols-split-feature);

--feature-grid-reverse:
  var(--cols-split-content);

--feature-gap:
  var(--gap-grid-feature);

--feature-content-max:
  var(--content-lg);

--feature-media-max:
  var(--container-md);


/* =======================================================
   F25. CARD GRID CONTRACTS
======================================================= */

--card-grid-min:
  var(--grid-item-min-md);

--card-grid-columns:
  var(--grid-auto-md);

--card-grid-columns-compact:
  var(--grid-auto-sm);

--card-grid-columns-wide:
  var(--grid-auto-lg);

--card-grid-gap:
  var(--gap-grid);


/* =======================================================
   F26. GALLERY LAYOUT CONTRACTS
======================================================= */

--gallery-grid-columns:
  var(--grid-auto-md);

--gallery-grid-columns-compact:
  var(--grid-auto-sm);

--gallery-grid-columns-wide:
  var(--grid-auto-lg);

--gallery-grid-gap:
  var(--gap-grid);

--gallery-feature-grid:
  minmax(0, 1.5fr)
  minmax(0, 0.75fr);

--gallery-filmstrip-item-w:
  var(--dimension-240);

--gallery-scroll-gap:
  var(--space-4);

--gallery-scroll-padding:
  var(--space-container-x);


/* =======================================================
   F27. FORM LAYOUT CONTRACTS
======================================================= */

--form-grid-columns:
  var(--cols-2);

--form-grid-gap-x:
  var(--space-5);

--form-grid-gap-y:
  var(--space-4);

--form-stack-gap:
  var(--space-form-gap);

--form-section-gap:
  var(--space-8);

--form-actions-gap:
  var(--space-action-row-gap);

--form-content-max:
  var(--container-form);


/* =======================================================
   F28. TOOL LAYOUT CONTRACTS
======================================================= */

--tool-grid-balanced:
  var(--cols-split-balanced);

--tool-grid-primary:
  minmax(0, 0.85fr)
  minmax(0, 1.15fr);

--tool-grid-secondary:
  minmax(0, 1.15fr)
  minmax(0, 0.85fr);

--tool-grid-gap:
  var(--gap-grid-tool);

--tool-column-gap:
  var(--space-tool-gap);

--tool-content-max:
  var(--container-tool);

--tool-panel-min-height:
  var(--dimension-540);

--tool-actions-gap:
  var(--space-action-row-gap);


/* =======================================================
   F29. STEVE'S GUESS LAYOUT CONTRACTS
======================================================= */

--steves-guess-grid:
  minmax(0, 0.85fr)
  minmax(0, 1.15fr);

--steves-guess-grid-balanced:
  var(--cols-split-balanced);

--steves-guess-gap:
  var(--space-6);

--steves-guess-content-max:
  var(--container-tool);

--steves-guess-visual-min:
  var(--dimension-540);

--steves-guess-tool-min:
  var(--dimension-540);


/* =======================================================
   F30. APPLICATION SHELL FOUNDATION
======================================================= */

--app-shell-columns:
  var(--sidebar-w-md)
  minmax(0, 1fr);

--app-shell-columns-wide:
  var(--sidebar-w-lg)
  minmax(0, 1fr);

--app-shell-gap:
  0;

--app-content-gap:
  var(--gap-grid-dashboard);

--app-content-padding:
  var(--space-6);

--app-content-padding-lg:
  var(--space-8);

--app-toolbar-min-h:
  var(--space-12);

--app-statusbar-min-h:
  var(--space-10);

--app-sidebar-w:
  var(--sidebar-w-md);

--app-inspector-w:
  var(--sidebar-w-lg);


/* =======================================================
   F31. DASHBOARD GRID CONTRACTS
======================================================= */

--dashboard-grid-columns:
  var(--cols-12);

--dashboard-grid-gap:
  var(--gap-grid-dashboard);

--dashboard-card-min:
  var(--grid-item-min-sm);

--dashboard-card-grid:
  var(--grid-auto-sm);

--dashboard-main-grid:
  minmax(0, 1fr)
  minmax(
    var(--sidebar-w-md),
    var(--sidebar-w-lg)
  );

--dashboard-content-max:
  var(--container-dashboard);


/* =======================================================
   F32. MODAL DIMENSION CONTRACTS
======================================================= */

--modal-w-sm:
  min(
    calc(
      100% - (var(--space-container-x) * 2)
    ),
    var(--container-sm)
  );

--modal-w-md:
  min(
    calc(
      100% - (var(--space-container-x) * 2)
    ),
    var(--container-md)
  );

--modal-w-lg:
  min(
    calc(
      100% - (var(--space-container-x) * 2)
    ),
    var(--container-lg)
  );

--modal-w-xl:
  min(
    calc(
      100% - (var(--space-container-x) * 2)
    ),
    var(--container-xl)
  );

--modal-max-h:
  calc(
    var(--viewport-h-dynamic) -
    (var(--space-container-x) * 2)
  );

--modal-content-padding:
  var(--space-6);

--modal-content-gap:
  var(--space-5);


/* =======================================================
   F33. DRAWER DIMENSION CONTRACTS
======================================================= */

--drawer-w-sm:
  min(
    100%,
    var(--sidebar-w-md)
  );

--drawer-w-md:
  min(
    100%,
    var(--sidebar-w-lg)
  );

--drawer-w-lg:
  min(
    100%,
    var(--sidebar-w-xl)
  );

--drawer-h-bottom:
  min(
 var(--viewport-cap-80),
   var(--dimension-768)
  );

--drawer-content-padding:
  var(--space-6);

--drawer-content-gap:
  var(--space-5);


/* =======================================================
   F34. HEADER LAYOUT CONTRACTS
======================================================= */

--header-container-max:
  var(--container-header);

--header-padding-x:
  var(--space-container-x);

--header-padding-y:
  var(--space-4);

--header-gap:
  var(--space-6);

--header-nav-gap:
  var(--space-nav-gap);

--header-actions-gap:
  var(--space-3);

--header-min-height:
  var(--space-12);


/* =======================================================
   F35. FOOTER LAYOUT CONTRACTS
======================================================= */

--footer-container-max:
  var(--container-footer);

--footer-padding-y:
  var(--space-section-y-footer);

--footer-grid-columns:
  var(--cols-4);

--footer-grid-gap:
  var(--gap-grid-loose);

--footer-column-gap:
  var(--space-4);

--footer-bottom-gap:
  var(--space-6);

--footer-bottom-margin:
  var(--space-9);


/* =======================================================
   F36. NAVIGATION DIMENSION CONTRACTS
======================================================= */

--nav-gap:
  var(--space-nav-gap);

--nav-mobile-gap:
  var(--space-4);

--nav-mobile-padding:
  var(--space-5);

--nav-dropdown-min-w:
  var(--dimension-240);

--nav-mega-columns:
  var(--cols-4);

--nav-mega-gap:
  var(--gap-grid);


/* =======================================================
   F37. ALIGNMENT FOUNDATION
======================================================= */

--align-start:
  start;

--align-center:
  center;

--align-end:
  end;

--align-stretch:
  stretch;

--align-baseline:
  baseline;

--justify-start:
  start;

--justify-center:
  center;

--justify-end:
  end;

--justify-between:
  space-between;

--justify-around:
  space-around;

--justify-evenly:
  space-evenly;

--place-center:
  center;


/* =======================================================
   F38. FLEX FOUNDATION
======================================================= */

--flex-none:
  none;

--flex-auto:
  1 1 auto;

--flex-fill:
  1 1 0%;

--flex-grow:
  1 0 auto;

--flex-fixed:
  0 0 auto;

--flex-shrink:
  0 1 auto;

--flex-basis-auto:
  auto;

--flex-basis-full:
  100%;


/* =======================================================
   F39. GRID SPAN FOUNDATION
======================================================= */

--span-1:
  span 1;

--span-2:
  span 2;

--span-3:
  span 3;

--span-4:
  span 4;

--span-5:
  span 5;

--span-6:
  span 6;

--span-7:
  span 7;

--span-8:
  span 8;

--span-9:
  span 9;

--span-10:
  span 10;

--span-11:
  span 11;

--span-12:
  span 12;

--span-full:
  1 / -1;


/* =======================================================
   F40. OVERFLOW FOUNDATION
======================================================= */

--overflow-visible:
  visible;

--overflow-hidden:
  hidden;

--overflow-clip:
  clip;

--overflow-auto:
  auto;

--overflow-scroll:
  scroll;

--overscroll-auto:
  auto;

--overscroll-contain:
  contain;

--overscroll-none:
  none;


/* =======================================================
   F41. SCROLL FOUNDATION
======================================================= */

--scroll-behavior-auto:
  auto;

--scroll-behavior-smooth:
  smooth;

--scroll-snap-none:
  none;

--scroll-snap-x:
  x mandatory;

--scroll-snap-y:
  y mandatory;

--scroll-snap-both:
  both mandatory;

--scroll-snap-align-start:
  start;

--scroll-snap-align-center:
  center;

--scroll-snap-align-end:
  end;


/* =======================================================
   F42. SCROLL OFFSET CONTRACTS
======================================================= */

--scroll-offset-header:
  calc(
    var(--header-min-height) +
    var(--space-4)
  );

--scroll-margin-section:
  var(--scroll-offset-header);

--scroll-padding-page:
  var(--scroll-offset-header);

--scrollbar-gutter:
  stable;


/* =======================================================
   F43. STICKY POSITION CONTRACTS
======================================================= */

--sticky-top-header:
  0;

--sticky-top-nav:
  var(--header-min-height);

--sticky-top-content:
  calc(
    var(--header-min-height) +
    var(--space-4)
  );

--sticky-top-sidebar:
  calc(
    var(--header-min-height) +
    var(--space-6)
  );

--sticky-bottom-actions:
  max(
    var(--space-4),
    var(--safe-area-bottom)
  );

--sticky-bottom-toolbar:
  0;


/* =======================================================
   F44. POSITION INSET FOUNDATION
======================================================= */

--inset-0:
  0;

--inset-auto:
  auto;

--inset-page-x:
  var(--space-container-x);

--inset-page-y:
  var(--space-section-y);

--inset-safe-top:
  var(--safe-area-top);

--inset-safe-right:
  var(--safe-area-right);

--inset-safe-bottom:
  var(--safe-area-bottom);

--inset-safe-left:
  var(--safe-area-left);

/* =======================================================
   F45. MINIMUM INTERACTION DIMENSION FOUNDATION
======================================================= */

--target-min:
  2.75rem;

--target-comfortable:
  3rem;

--control-min-h:
  var(--target-min);

--control-comfortable-h:
  var(--target-comfortable);


/* =======================================================
   F46. PRINT LAYOUT FOUNDATION
======================================================= */

--print-page-w:
  8.5in;

--print-page-h:
  11in;

--print-margin:
  0.5in;

--print-content-w:
  calc(
    var(--print-page-w) -
    (var(--print-margin) * 2)
  );

--print-column-gap:
  var(--space-5);


/* =======================================================
   F47. CONTAINER QUERY FOUNDATION
======================================================= */

/*
  These document reusable container-query thresholds.

  Use their equivalent values directly in @container rules
  until native custom-property query support is available.
*/

--cq-xs:
  20rem;

--cq-sm:
  30rem;

--cq-md:
  40rem;

--cq-lg:
  56rem;

--cq-xl:
  72rem;


/* =======================================================
   F48. CURRENT LAYOUT.CSS COMPATIBILITY
======================================================= */




/* =======================================================
   F49. RESPONSIVE STRUCTURAL CONTRACTS
======================================================= */

--responsive-columns-mobile:
  var(--cols-1);

--responsive-columns-tablet:
  var(--cols-2);

--responsive-columns-desktop:
  var(--cols-3);

--responsive-columns-wide:
  var(--cols-4);

--responsive-stack-gap:
  var(--space-5);

--responsive-grid-gap:
  var(--gap-grid);

--responsive-section-space:
  var(--space-section-y);


/* =======================================================
   F50. LAYOUT GOVERNANCE
======================================================= */

/*
  LAYOUT RULES

  1. Layout controls structure and spatial relationships only.

  2. Layout tokens must not define colour.

  3. Layout tokens must not define typography.

  4. Layout tokens must not define borders.

  5. Layout tokens must not define shadows.

  6. Components must not create page-level structure.

  7. Components live inside approved layout objects.

  8. Pages compose layouts rather than redefining global
     structural foundations.

  9. Grid hierarchy must support one dominant focal area.

  10. Equal-width layouts are used only when equal emphasis
      is intentional.

  11. Stack contracts replace arbitrary vertical margins.

  12. Cluster contracts replace arbitrary inline gaps.

  13. Containers control maximum width and horizontal
      gutters.

  14. Section contracts control vertical breathing room.

  15. Large structural dimensions must not be inserted into
      the base spacing ladder.

  16. Responsive changes belong to layout architecture.

  17. Sticky elements must use approved sticky offsets.

  18. Scrollable regions must declare intentional overflow
      and overscroll behaviour.

  19. Application shells must remain separate from marketing
      page layouts.

  20. Existing compatibility tokens remain until every
      selector using them has been audited.
*/

/* =========================================================
   PACKAGE G
   FORMS + CONTROLS + INTERACTION CONTRACTS
========================================================= */

/*
  PURPOSE
  - Standardize form fields, buttons, toggles, selections,
    validation, focus, control sizing, and interaction states.
  - Support contact forms, calculators, booking tools,
    dashboards, filters, search, and future RH applications.
  - Prevent components from inventing control dimensions,
    padding, borders, states, or focus treatments.

  RULES
  - Tokens define values and semantic contracts only.
  - Components own visual composition.
  - Layout owns form structure and field placement.
  - State classes activate approved state contracts.
*/

/* =======================================================
   G1. CONTROL HEIGHT FOUNDATION
======================================================= */

--control-h-xs:
  var(--space-7);

--control-h-sm:
  var(--target-min);

--control-h-md:
  var(--target-comfortable);

--control-h-lg:
  calc(
    var(--target-comfortable) +
    var(--space-2)
  );

--control-h-xl:
  var(--space-9);

/* =======================================================
   G2. SEMANTIC CONTROL HEIGHTS
======================================================= */

--size-control-sm:
  var(--control-h-sm);

--size-control:
  var(--control-h-md);

--size-control-lg:
  var(--control-h-lg);

--size-input-h-sm:
  var(--control-h-sm);

--size-input-h:
  var(--control-h-md);

--size-input-h-lg:
  var(--control-h-lg);

--size-button-h-sm:
  var(--control-h-sm);

--size-button-h:
  var(--control-h-md);

--size-button-h-lg:
  var(--control-h-lg);

--size-select-h:
  var(--control-h-md);

--size-search-h:
  var(--control-h-md);


/* =======================================================
   G3. CONTROL WIDTH FOUNDATION
======================================================= */

--control-w-xs:
  var(--content-xs);

--control-w-sm:
  var(--content-sm);

--control-w-md:
  var(--content-md);

--control-w-lg:
  var(--content-lg);

--control-w-full:
  100%;


/* =======================================================
   G4. CONTROL PADDING FOUNDATION
======================================================= */

--control-padding-x-xs:
  var(--space-2);

--control-padding-x-sm:
  var(--space-3);

--control-padding-x-md:
  var(--space-4);

--control-padding-x-lg:
  var(--space-5);

--control-padding-x-xl:
  var(--space-6);


--control-padding-y-xs:
  var(--space-1);

--control-padding-y-sm:
  var(--space-2);

--control-padding-y-md:
  var(--space-3);

--control-padding-y-lg:
  var(--space-4);


/* =======================================================
   G5. INPUT SPACING CONTRACTS
======================================================= */

--space-input-x-sm:
  var(--control-padding-x-sm);

--space-input-x:
  var(--control-padding-x-md);

--space-input-x-lg:
  var(--control-padding-x-lg);


--space-input-y-sm:
  var(--control-padding-y-sm);

--space-input-y:
  var(--control-padding-y-md);

--space-input-y-lg:
  var(--control-padding-y-lg);


--space-input-gap:
  var(--space-3);

--space-input-icon-gap:
  var(--space-2);

--space-input-label-gap:
  var(--space-2);

--space-input-helper-gap:
  var(--space-1);

--space-input-message-gap:
  var(--space-2);


/* =======================================================
   G6. BUTTON SPACING CONTRACTS
======================================================= */

--space-button-x-sm:
  var(--space-4);

--space-button-x:
  var(--space-5);

--space-button-x-lg:
  var(--space-6);


--space-button-y-sm:
  var(--space-2);

--space-button-y:
  var(--space-3);

--space-button-y-lg:
  var(--space-4);


--space-button-gap:
  var(--space-2);

--space-button-group-gap:
  var(--space-3);


/* =======================================================
   G7. CONTROL RADIUS CONTRACTS
======================================================= */

--radius-control-sm:
  var(--radius-sm);

--radius-control:
  var(--radius-md);

--radius-control-lg:
  var(--radius-lg);

--radius-input:
  var(--radius-md);

--radius-select:
  var(--radius-md);

--radius-textarea:
  var(--radius-md);

--radius-button:
  var(--radius-md);

--radius-button-pill:
  var(--radius-pill);

--radius-checkbox:
  var(--radius-sm);

--radius-radio:
  var(--radius-round);

--radius-switch:
  var(--radius-pill);


/* =======================================================
   G8. CONTROL STROKE CONTRACTS
======================================================= */

--stroke-control:
  var(--stroke-1);

--stroke-control-hover:
  var(--stroke-1);

--stroke-control-focus:
  var(--stroke-2);

--stroke-control-active:
  var(--stroke-2);

--stroke-control-invalid:
  var(--stroke-2);

--stroke-control-selected:
  var(--stroke-2);


/* =======================================================
   G9. INPUT SURFACE FOUNDATION
======================================================= */

--input-bg:
  var(--surface-level-1-bg);

--input-bg-hover:
  var(--surface-level-2-bg);

--input-bg-focus:
  var(--surface-level-2-bg);

--input-bg-active:
  var(--surface-level-2-bg);

--input-bg-disabled:
  var(--surface-disabled-bg);

--input-bg-readonly:
  var(--surface-recessed-bg);

--input-bg-filled:
  var(--surface-level-2-bg);


/* =======================================================
   G10. INPUT BORDER FOUNDATION
======================================================= */

--input-border:
  var(--border-default);

--input-border-hover:
  var(--border-emphasis);

--input-border-focus:
  var(--border-primary-strong);

--input-border-active:
  var(--border-primary);

--input-border-disabled:
  var(--surface-disabled-border);

--input-border-readonly:
  var(--border-quiet);

--input-border-valid:
  var(--state-valid-border);

--input-border-invalid:
  var(--state-invalid-border);

--input-border-warning:
  var(--state-warning-border);


/* =======================================================
   G11. INPUT TEXT FOUNDATION
======================================================= */

--input-text:
  var(--fg-primary);

--input-text-muted:
  var(--fg-secondary);

--input-text-disabled:
  var(--fg-disabled);

--input-text-readonly:
  var(--fg-secondary);

--input-placeholder:
  var(--fg-tertiary);

--input-placeholder-disabled:
  var(--fg-disabled);

--input-caret:
  var(--brand-primary);


/* =======================================================
   G12. INPUT SHADOW CONTRACTS
======================================================= */

--input-shadow:
  var(--shadow-inset-subtle);

--input-shadow-hover:
  var(--shadow-inset-default);

--input-shadow-focus:
  var(--state-focus-ring);

--input-shadow-active:
  var(--shadow-inset-default);

--input-shadow-valid:
  var(--state-valid-ring);

--input-shadow-invalid:
  var(--state-invalid-ring);

--input-shadow-warning:
  var(--state-warning-ring);

--input-shadow-disabled:
  none;


/* =======================================================
   G13. INPUT TRANSITION CONTRACT
======================================================= */

--input-transition:
  background-color
  var(--duration-sm)
  var(--ease-standard),
  border-color
  var(--duration-sm)
  var(--ease-standard),
  box-shadow
  var(--duration-sm)
  var(--ease-standard),
  color
  var(--duration-sm)
  var(--ease-standard);


/* =======================================================
   G14. LABEL CONTRACTS
======================================================= */

--label-text:
  var(--fg-primary);

--label-text-muted:
  var(--fg-secondary);

--label-text-disabled:
  var(--fg-disabled);

--label-text-required:
  var(--danger-500);

--label-gap:
  var(--space-input-label-gap);

--label-font:
  var(--type-field-label-font);

--label-size:
  var(--type-field-label-size);

--label-leading:
  var(--type-field-label-leading);

--label-weight:
  var(--type-field-label-weight);

--label-tracking:
  var(--type-field-label-tracking);


/* =======================================================
   G15. HELPER TEXT CONTRACTS
======================================================= */

--helper-text:
  var(--fg-tertiary);

--helper-text-valid:
  var(--state-valid-text);

--helper-text-invalid:
  var(--state-invalid-text);

--helper-text-warning:
  var(--state-warning-text);

--helper-text-info:
  var(--state-info-text);

--helper-font:
  var(--type-field-helper-font);

--helper-size:
  var(--type-field-helper-size);

--helper-leading:
  var(--type-field-helper-leading);

--helper-weight:
  var(--type-field-helper-weight);

--helper-tracking:
  var(--type-field-helper-tracking);


/* =======================================================
   G16. TEXTAREA CONTRACTS
======================================================= */

--textarea-min-h:
  var(--dimension-130);

--textarea-min-h-lg:
  var(--dimension-180);

--textarea-max-h:
  var(--dimension-540);

--textarea-resize:
  vertical;

--textarea-padding-x:
  var(--space-input-x);

--textarea-padding-y:
  var(--space-input-y);


/* =======================================================
   G17. SELECT CONTRACTS
======================================================= */

--select-bg:
  var(--input-bg);

--select-border:
  var(--input-border);

--select-text:
  var(--input-text);

--select-icon:
  var(--fg-secondary);

--select-icon-size:
  var(--space-4);

--select-icon-gap:
  var(--space-3);

--select-padding-end:
  var(--space-10);


/* =======================================================
   G18. CHECKBOX SIZE FOUNDATION
======================================================= */

--checkbox-size-sm:
  var(--space-4);

--checkbox-size:
  var(--space-5);

--checkbox-size-lg:
  var(--space-6);

--checkbox-stroke:
  var(--stroke-2);

--checkbox-icon-size:
  var(--space-3);


/* =======================================================
   G19. CHECKBOX CONTRACTS
======================================================= */

--checkbox-bg:
  var(--surface-level-1-bg);

--checkbox-bg-hover:
  var(--surface-level-2-bg);

--checkbox-bg-checked:
  var(--brand-primary);

--checkbox-bg-disabled:
  var(--surface-disabled-bg);

--checkbox-border:
  var(--border-default);

--checkbox-border-hover:
  var(--border-emphasis);

--checkbox-border-checked:
  var(--brand-primary);

--checkbox-border-disabled:
  var(--surface-disabled-border);

--checkbox-icon:
  var(--neutral-900);

--checkbox-icon-disabled:
  var(--fg-disabled);

--checkbox-shadow:
  var(--shadow-inset-subtle);

--checkbox-shadow-focus:
  var(--state-focus-ring);

--checkbox-transition:
  var(--transition-interactive);


/* =======================================================
   G20. RADIO CONTRACTS
======================================================= */

--radio-size-sm:
  var(--space-4);

--radio-size:
  var(--space-5);

--radio-size-lg:
  var(--space-6);

--radio-dot-sm:
  var(--space-1);

--radio-dot:
  var(--space-2);

--radio-dot-lg:
  var(--space-3);


--radio-bg:
  var(--surface-level-1-bg);

--radio-bg-hover:
  var(--surface-level-2-bg);

--radio-bg-checked:
  var(--surface-level-1-bg);

--radio-border:
  var(--border-default);

--radio-border-hover:
  var(--border-emphasis);

--radio-border-checked:
  var(--brand-primary);

--radio-dot-bg:
  var(--brand-primary);

--radio-shadow-focus:
  var(--state-focus-ring);

--radio-transition:
  var(--transition-interactive);


/* =======================================================
   G21. SWITCH DIMENSION FOUNDATION
======================================================= */

--switch-w-sm:
  var(--space-8);

--switch-w:
  var(--space-10);

--switch-w-lg:
  var(--space-12);

--switch-h-sm:
  var(--space-4);

--switch-h:
  var(--space-5);

--switch-h-lg:
  var(--space-6);

--switch-thumb-sm:
  var(--space-3);

--switch-thumb:
  var(--space-4);

--switch-thumb-lg:
  var(--space-5);

--switch-padding:
  var(--stroke-2);


/* =======================================================
   G22. SWITCH CONTRACTS
======================================================= */

--switch-track-bg:
  var(--surface-light-alpha-12);

--switch-track-bg-hover:
  var(--surface-light-alpha-20);

--switch-track-bg-checked:
  var(--brand-primary);

--switch-track-bg-disabled:
  var(--surface-disabled-bg);

--switch-track-border:
  var(--border-default);

--switch-track-border-checked:
  var(--brand-primary);

--switch-thumb-bg:
  var(--neutral-0);

--switch-thumb-bg-checked:
  var(--neutral-900);

--switch-thumb-shadow:
  var(--shadow-contact-xs);

--switch-shadow-focus:
  var(--state-focus-ring);

--switch-transition:
  var(--transition-interactive);


/* =======================================================
   G23. RANGE INPUT CONTRACTS
======================================================= */

--range-track-h:
  var(--space-2);

--range-track-bg:
  var(--surface-light-alpha-12);

--range-track-fill:
  var(--brand-primary);

--range-track-radius:
  var(--radius-pill);

--range-thumb-size:
  var(--space-5);

--range-thumb-bg:
  var(--brand-primary);

--range-thumb-border:
  var(--border-primary-solid);

--range-thumb-shadow:
  var(--shadow-contact-sm);

--range-thumb-shadow-focus:
  var(--state-focus-ring);

--range-transition:
  var(--transition-interactive);


/* =======================================================
   G24. SEARCH CONTROL CONTRACTS
======================================================= */

--search-bg:
  var(--input-bg);

--search-border:
  var(--input-border);

--search-text:
  var(--input-text);

--search-placeholder:
  var(--input-placeholder);

--search-icon:
  var(--fg-secondary);

--search-clear-icon:
  var(--fg-tertiary);

--search-icon-size:
  var(--space-5);

--search-gap:
  var(--space-3);

--search-padding-x:
  var(--space-input-x);

--search-padding-y:
  var(--space-input-y);


/* =======================================================
   G25. FILE INPUT CONTRACTS
======================================================= */

--file-input-bg:
  var(--surface-recessed-bg);

--file-input-border:
  var(--border-default);

--file-input-border-hover:
  var(--border-primary);

--file-input-text:
  var(--fg-secondary);

--file-input-icon:
  var(--brand-primary);

--file-input-min-h:
  var(--dimension-130);

--file-input-padding:
  var(--space-6);

--file-input-gap:
  var(--space-3);

--file-input-radius:
  var(--radius-lg);


/* =======================================================
   G26. BUTTON FOUNDATION
======================================================= */

--button-font:
  var(--type-control-font);

--button-size:
  var(--type-control-size);

--button-leading:
  var(--type-control-leading);

--button-weight:
  var(--type-control-weight);

--button-tracking:
  var(--type-control-tracking);

--button-transform:
  var(--type-control-transform);

--button-radius:
  var(--radius-button);

--button-transition:
  var(--transition-interactive);

--button-icon-size:
  var(--space-5);

--button-icon-size-sm:
  var(--space-4);

--button-icon-size-lg:
  var(--space-6);


/* =======================================================
   G27. PRIMARY BUTTON CONTRACT
======================================================= */

--button-primary-bg:
  var(--brand-primary);

--button-primary-bg-hover:
  var(--brand-primary-hover);

--button-primary-bg-active:
  var(--brand-primary-active);

--button-primary-bg-disabled:
  var(--surface-disabled-bg);

--button-primary-border:
  var(--brand-primary);

--button-primary-border-hover:
  var(--brand-primary-hover);

--button-primary-border-active:
  var(--brand-primary-active);

--button-primary-border-disabled:
  var(--surface-disabled-border);

--button-primary-text:
  var(--neutral-900);

--button-primary-text-hover:
  var(--neutral-900);

--button-primary-text-disabled:
  var(--fg-disabled);

--button-primary-shadow:
  var(--elevation-low);

--button-primary-shadow-hover:
  var(--glow-primary-sm),
  var(--elevation-default);

--button-primary-shadow-active:
  var(--shadow-contact-xs);


/* =======================================================
   G28. SECONDARY BUTTON CONTRACT
======================================================= */

--button-secondary-bg:
  var(--surface-level-2-bg);

--button-secondary-bg-hover:
  var(--surface-level-3-bg);

--button-secondary-bg-active:
  var(--surface-level-1-bg);

--button-secondary-bg-disabled:
  var(--surface-disabled-bg);

--button-secondary-border:
  var(--border-default);

--button-secondary-border-hover:
  var(--border-emphasis);

--button-secondary-border-active:
  var(--border-strong);

--button-secondary-border-disabled:
  var(--surface-disabled-border);

--button-secondary-text:
  var(--fg-primary);

--button-secondary-text-hover:
  var(--fg-primary);

--button-secondary-text-disabled:
  var(--fg-disabled);

--button-secondary-shadow:
  var(--elevation-low);

--button-secondary-shadow-hover:
  var(--elevation-default);

--button-secondary-shadow-active:
  var(--shadow-contact-xs);


/* =======================================================
   G29. ACCENT BUTTON CONTRACT
======================================================= */

--button-accent-bg:
  var(--brand-accent);

--button-accent-bg-hover:
  var(--brand-accent-hover);

--button-accent-bg-active:
  var(--brand-accent-active);

--button-accent-border:
  var(--brand-accent);

--button-accent-border-hover:
  var(--brand-accent-hover);

--button-accent-border-active:
  var(--brand-accent-active);

--button-accent-text:
  var(--neutral-900);

--button-accent-shadow:
  var(--elevation-low);

--button-accent-shadow-hover:
  var(--glow-accent-sm),
  var(--elevation-default);


/* =======================================================
   G30. GHOST BUTTON CONTRACT
======================================================= */

--button-ghost-bg:
  transparent;

--button-ghost-bg-hover:
  var(--surface-light-alpha-08);

--button-ghost-bg-active:
  var(--surface-light-alpha-12);

--button-ghost-border:
  transparent;

--button-ghost-border-hover:
  var(--border-light-subtle);

--button-ghost-border-active:
  var(--border-light-default);

--button-ghost-text:
  var(--fg-secondary);

--button-ghost-text-hover:
  var(--fg-primary);

--button-ghost-shadow:
  none;


/* =======================================================
   G31. DANGER BUTTON CONTRACT
======================================================= */

--button-danger-bg:
  var(--danger-500);

--button-danger-bg-hover:
  var(--danger-600);

--button-danger-bg-active:
  var(--danger-700);

--button-danger-border:
  var(--danger-500);

--button-danger-border-hover:
  var(--danger-600);

--button-danger-text:
  var(--neutral-0);

--button-danger-shadow:
  var(--surface-danger-shadow);


/* =======================================================
   G32. ICON BUTTON CONTRACTS
======================================================= */

--icon-button-size-sm:
  var(--control-h-sm);

--icon-button-size:
  var(--control-h-md);

--icon-button-size-lg:
  var(--control-h-lg);

--icon-button-padding:
  var(--space-2);

--icon-button-radius:
  var(--radius-md);

--icon-button-bg:
  transparent;

--icon-button-bg-hover:
  var(--surface-light-alpha-08);

--icon-button-bg-active:
  var(--surface-light-alpha-12);

--icon-button-border:
  transparent;

--icon-button-border-hover:
  var(--border-light-subtle);

--icon-button-icon:
  var(--fg-secondary);

--icon-button-icon-hover:
  var(--fg-primary);


/* =======================================================
   G33. SEGMENTED CONTROL CONTRACTS
======================================================= */

--segment-bg:
  var(--surface-recessed-bg);

--segment-border:
  var(--border-default);

--segment-padding:
  var(--space-1);

--segment-gap:
  var(--space-1);

--segment-radius:
  var(--radius-lg);


--segment-item-bg:
  transparent;

--segment-item-bg-hover:
  var(--surface-light-alpha-08);

--segment-item-bg-active:
  var(--surface-level-3-bg);

--segment-item-text:
  var(--fg-secondary);

--segment-item-text-hover:
  var(--fg-primary);

--segment-item-text-active:
  var(--fg-primary);

--segment-item-shadow-active:
  var(--elevation-low);

--segment-item-radius:
  var(--radius-md);


/* =======================================================
   G34. CHIP AND FILTER CONTRACTS
======================================================= */

--chip-h:
  var(--control-h-sm);

--chip-padding-x:
  var(--space-3);

--chip-gap:
  var(--space-2);

--chip-radius:
  var(--radius-pill);

--chip-bg:
  var(--surface-level-2-bg);

--chip-bg-hover:
  var(--surface-level-3-bg);

--chip-bg-selected:
  var(--surface-selected-bg);

--chip-border:
  var(--border-default);

--chip-border-hover:
  var(--border-emphasis);

--chip-border-selected:
  var(--border-primary);

--chip-text:
  var(--fg-secondary);

--chip-text-hover:
  var(--fg-primary);

--chip-text-selected:
  var(--fg-primary);

--chip-icon:
  var(--fg-tertiary);

--chip-icon-selected:
  var(--brand-primary);


/* =======================================================
   G35. OPTION CARD CONTRACTS
======================================================= */

--option-card-bg:
  var(--surface-level-2-bg);

--option-card-bg-hover:
  var(--surface-level-3-bg);

--option-card-bg-selected:
  var(--surface-selected-bg);

--option-card-border:
  var(--border-default);

--option-card-border-hover:
  var(--border-emphasis);

--option-card-border-selected:
  var(--border-primary-strong);

--option-card-shadow:
  var(--elevation-low);

--option-card-shadow-hover:
  var(--elevation-default);

--option-card-shadow-selected:
  var(--surface-selected-shadow);

--option-card-padding:
  var(--space-5);

--option-card-gap:
  var(--space-3);

--option-card-radius:
  var(--radius-lg);

--option-card-transition:
  var(--transition-interactive);


/* =======================================================
   G36. FIELD GROUP CONTRACTS
======================================================= */

--field-group-gap:
  var(--space-form-gap);

--field-group-section-gap:
  var(--form-section-gap);

--field-row-gap:
  var(--form-grid-gap-x);

--field-column-gap:
  var(--form-grid-gap-y);

--field-message-gap:
  var(--space-input-message-gap);


/* =======================================================
   G37. INPUT ICON CONTRACTS
======================================================= */

--input-icon-size:
  var(--space-5);

--input-icon-size-sm:
  var(--space-4);

--input-icon-size-lg:
  var(--space-6);

--input-icon-color:
  var(--fg-secondary);

--input-icon-color-focus:
  var(--brand-primary);

--input-icon-color-valid:
  var(--state-valid-icon);

--input-icon-color-invalid:
  var(--state-invalid-icon);

--input-icon-offset:
  var(--space-input-x);

--input-icon-gap:
  var(--space-input-icon-gap);


/* =======================================================
   G38. FORM STATUS CONTRACTS
======================================================= */

--form-status-success-bg:
  var(--surface-success-bg);

--form-status-success-border:
  var(--surface-success-border);

--form-status-success-text:
  var(--state-valid-text);

--form-status-success-icon:
  var(--state-valid-icon);


--form-status-error-bg:
  var(--surface-danger-bg);

--form-status-error-border:
  var(--surface-danger-border);

--form-status-error-text:
  var(--state-invalid-text);

--form-status-error-icon:
  var(--state-invalid-icon);


--form-status-warning-bg:
  var(--surface-warning-bg);

--form-status-warning-border:
  var(--surface-warning-border);

--form-status-warning-text:
  var(--state-warning-text);

--form-status-warning-icon:
  var(--state-warning-icon);


--form-status-info-bg:
  var(--surface-info-bg);

--form-status-info-border:
  var(--surface-info-border);

--form-status-info-text:
  var(--state-info-text);

--form-status-info-icon:
  var(--state-info-icon);


/* =======================================================
   G39. FORM STATUS DIMENSIONS
======================================================= */

--form-status-padding:
  var(--space-4);

--form-status-gap:
  var(--space-3);

--form-status-radius:
  var(--radius-md);

--form-status-icon-size:
  var(--space-5);


/* =======================================================
   G40. FOCUS CONTRACTS
======================================================= */

--focus-color:
  var(--state-focus-ring-color);

--focus-width:
  var(--state-focus-ring-width);

--focus-offset:
  var(--state-focus-ring-offset);

--focus-offset-color:
  var(--state-focus-ring-offset-color);

--focus-ring:
  var(--state-focus-ring);


/* =======================================================
   G41. CURSOR FOUNDATION
======================================================= */

--cursor-auto:
  auto;

--cursor-default:
  default;

--cursor-pointer:
  pointer;

--cursor-text:
  text;

--cursor-move:
  move;

--cursor-grab:
  grab;

--cursor-grabbing:
  grabbing;

--cursor-progress:
  progress;

--cursor-wait:
  wait;

--cursor-disabled:
  not-allowed;


/* =======================================================
   G42. USER-SELECTION FOUNDATION
======================================================= */

--user-select-auto:
  auto;

--user-select-none:
  none;

--user-select-text:
  text;

--user-select-all:
  all;


/* =======================================================
   G43. TOUCH ACTION FOUNDATION
======================================================= */

--touch-action-auto:
  auto;

--touch-action-none:
  none;

--touch-action-pan-x:
  pan-x;

--touch-action-pan-y:
  pan-y;

--touch-action-manipulation:
  manipulation;


/* =======================================================
   G44. INTERACTION TARGET CONTRACTS
======================================================= */

--interaction-target-min:
  var(--target-min);

--interaction-target-comfortable:
  var(--target-comfortable);

--interaction-gap-min:
  var(--space-2);

--interaction-gap-comfortable:
  var(--space-3);


/* =======================================================
   G45. AUTOFILL CONTRACTS
======================================================= */

--autofill-bg:
  var(--input-bg);

--autofill-text:
  var(--input-text);

--autofill-border:
  var(--input-border);


/* =======================================================
   G46. PLACEHOLDER CONTRACTS
======================================================= */

--placeholder-opacity:
  var(--a-64);

--placeholder-opacity-disabled:
  var(--a-40);

--placeholder-transition:
  opacity
  var(--duration-sm)
  var(--ease-standard);


/* =======================================================
   G47. FORM LOADING CONTRACTS
======================================================= */

--form-loading-opacity:
  var(--state-loading-opacity);

--form-loading-cursor:
  var(--cursor-progress);

--form-loading-overlay:
  var(--loading-mask-bg);

--form-loading-blur:
  var(--loading-mask-blur);

--form-loading-spinner-size:
  var(--spinner-size-md);


/* =======================================================
   G48. FORM SUCCESS CONTRACTS
======================================================= */

--form-success-bg:
  var(--surface-success-bg);

--form-success-border:
  var(--surface-success-border);

--form-success-text:
  var(--state-valid-text);

--form-success-icon:
  var(--state-valid-icon);

--form-success-shadow:
  var(--surface-success-shadow);


/* =======================================================
   G49. FORM ERROR CONTRACTS
======================================================= */

--form-error-bg:
  var(--surface-danger-bg);

--form-error-border:
  var(--surface-danger-border);

--form-error-text:
  var(--state-invalid-text);

--form-error-icon:
  var(--state-invalid-icon);

--form-error-shadow:
  var(--surface-danger-shadow);


/* =======================================================
   G50. CALCULATOR CONTROL CONTRACTS
======================================================= */

--calculator-control-bg:
  var(--input-bg);

--calculator-control-border:
  var(--input-border);

--calculator-control-border-focus:
  var(--input-border-focus);

--calculator-control-text:
  var(--input-text);

--calculator-control-radius:
  var(--radius-input);

--calculator-control-height:
  var(--size-input-h);

--calculator-control-padding-x:
  var(--space-input-x);

--calculator-control-padding-y:
  var(--space-input-y);

--calculator-option-gap:
  var(--space-3);

--calculator-action-gap:
  var(--space-action-row-gap);


/* =======================================================
   G51. STEPPER CONTROL CONTRACTS
======================================================= */

--stepper-control-size:
  var(--control-h-sm);

--stepper-control-bg:
  var(--surface-level-2-bg);

--stepper-control-bg-hover:
  var(--surface-level-3-bg);

--stepper-control-border:
  var(--border-default);

--stepper-control-border-hover:
  var(--border-primary);

--stepper-control-icon:
  var(--fg-primary);

--stepper-value-min-w:
  var(--space-12);

--stepper-gap:
  var(--space-2);


/* =======================================================
   G52. LEGACY FORM COMPATIBILITY
======================================================= */

/* =======================================================
   G53. LEGACY BUTTON COMPATIBILITY
======================================================= */

--button-height:
  var(--size-button-h);

--button-height-sm:
  var(--size-button-h-sm);

--button-height-lg:
  var(--size-button-h-lg);

--button-padding-x:
  var(--space-button-x);

--button-padding-y:
  var(--space-button-y);

--button-gap:
  var(--space-button-gap);


/* =======================================================
   G54. CONTROL RECIPE REFERENCE
======================================================= */

/*
  STANDARD INPUT

  min-height:
    var(--size-input-h);

  padding:
    var(--space-input-y)
    var(--space-input-x);

  background:
    var(--input-bg);

  border:
    var(--stroke-control)
    solid
    var(--input-border);

  border-radius:
    var(--radius-input);

  color:
    var(--input-text);

  box-shadow:
    var(--input-shadow);

  transition:
    var(--input-transition);


  STANDARD PRIMARY BUTTON

  min-height:
    var(--size-button-h);

  padding:
    var(--space-button-y)
    var(--space-button-x);

  background:
    var(--button-primary-bg);

  border:
    var(--stroke-control)
    solid
    var(--button-primary-border);

  border-radius:
    var(--button-radius);

  color:
    var(--button-primary-text);

  box-shadow:
    var(--button-primary-shadow);

  transition:
    var(--button-transition);
*/


/* =======================================================
   G55. FORM GOVERNANCE
======================================================= */

/*
  FORM RULES

  1. Form layout belongs in layout.css.

  2. Form visuals belong in components.css.

  3. Form values must consume approved tokens.

  4. Inputs must use approved size, spacing, radius,
     border, background, and state contracts.

  5. Components must not create local input heights.

  6. Components must not create local focus rings.

  7. Labels, helpers, and validation messages must remain
     visually distinct.

  8. Placeholder text must not replace a visible label.

  9. Disabled and readonly states must remain different.

  10. Validation must not rely on colour alone.

  11. Touch targets must meet the interaction minimum.

  12. Textareas must use approved minimum heights.

  13. Buttons must consume an approved visual contract.

  14. Icon-only buttons require accessible names.

  15. Checkbox, radio, switch, and range controls must retain
      visible keyboard focus.

  16. Loading forms must not appear identical to disabled
      forms.

  17. Error states must preserve the entered value unless
      removal is required by security or validation logic.

  18. Components must not remove native functionality
      without replacing its accessibility behaviour.

  19. Browser defaults must be intentionally preserved or
      overridden.

  20. Compatibility aliases remain until all form selectors
      have been audited.
*/


/* =======================================================
   G56. BUTTON GOVERNANCE
======================================================= */

/*
  BUTTON RULES

  1. Primary buttons represent the main action.

  2. Secondary buttons support the primary action.

  3. Accent buttons are reserved for deliberate emphasis.

  4. Ghost buttons are used for low-priority actions.

  5. Danger buttons are reserved for destructive actions.

  6. Every button must expose hover, active, focus, loading,
     and disabled states where applicable.

  7. Button groups must preserve clear priority.

  8. Multiple primary buttons should not compete inside the
     same decision area.

  9. Button width is controlled by layout, not the component
     token contract.

  10. Button labels should remain concise and action-based.
*/

/* =========================================================
   PACKAGE H
   ICONS + SYMBOLS + VISUAL MARKER CONTRACTS
========================================================= */

/*
  PURPOSE
  - Standardize icon sizing, stroke, alignment, spacing,
    state colour, badges, indicators, markers, and controls.
  - Support navigation, buttons, forms, cards, dashboards,
    tools, alerts, galleries, accordions, and status systems.
  - Prevent components from inventing local icon dimensions,
    stroke widths, offsets, or visual-marker treatments.

  RULES
  - Tokens define icon values and semantic roles only.
  - Components determine icon placement and composition.
  - Layout determines structural alignment and spacing.
  - Icons must support the content rather than replace it.
*/


/* =======================================================
   H1. ICON SIZE FOUNDATION
======================================================= */

--icon-size-2xs:
  var(--space-2);

--icon-size-xs:
  var(--space-3);

--icon-size-sm:
  var(--space-4);

--icon-size-md:
  var(--space-5);

--icon-size-lg:
  var(--space-6);

--icon-size-xl:
  var(--space-8);

--icon-size-2xl:
  var(--space-10);

--icon-size-3xl:
  var(--space-12);

--icon-size-display:
  var(--dimension-130);

--icon-size-text:
  1em;


/* =======================================================
   H2. SEMANTIC ICON SIZE ROLES
======================================================= */

--icon-size-inline:
  var(--icon-size-sm);

--icon-size-label:
  var(--icon-size-xs);

--icon-size-button-sm:
  var(--icon-size-sm);

--icon-size-button:
  var(--icon-size-md);

--icon-size-button-lg:
  var(--icon-size-lg);

--icon-size-input:
  var(--icon-size-md);

--icon-size-nav:
  var(--icon-size-md);

--icon-size-card:
  var(--icon-size-lg);

--icon-size-feature:
  var(--icon-size-2xl);

--icon-size-status:
  var(--icon-size-md);

--icon-size-alert:
  var(--icon-size-lg);

--icon-size-empty:
  var(--icon-size-3xl);

--icon-size-hero:
  var(--icon-size-display);


/* =======================================================
   H3. ICON STROKE FOUNDATION
======================================================= */

--icon-stroke-thin:
  var(--stroke-1);

--icon-stroke-default:
  var(--stroke-2);

--icon-stroke-strong:
  var(--stroke-3);

--icon-stroke-heavy:
  var(--stroke-4);


/* =======================================================
   H4. SEMANTIC ICON STROKE ROLES
======================================================= */

--icon-stroke-inline:
  var(--icon-stroke-default);

--icon-stroke-control:
  var(--icon-stroke-default);

--icon-stroke-nav:
  var(--icon-stroke-default);

--icon-stroke-feature:
  var(--icon-stroke-strong);

--icon-stroke-status:
  var(--icon-stroke-default);

--icon-stroke-display:
  var(--icon-stroke-strong);


/* =======================================================
   H5. ICON COLOUR FOUNDATION
======================================================= */

--icon-color-primary:
  var(--fg-primary);

--icon-color-secondary:
  var(--fg-secondary);

--icon-color-tertiary:
  var(--fg-tertiary);

--icon-color-muted:
  var(--fg-disabled);

--icon-color-inverse:
  var(--neutral-900);

--icon-color-brand-primary:
  var(--brand-primary);

--icon-color-brand-accent:
  var(--brand-accent);

--icon-color-success:
  var(--success-500);

--icon-color-warning:
  var(--warning-500);

--icon-color-danger:
  var(--danger-500);

--icon-color-info:
  var(--info-500);


/* =======================================================
   H6. ICON STATE COLOUR ROLES
======================================================= */

--icon-color-default:
  var(--icon-color-secondary);

--icon-color-hover:
  var(--icon-color-primary);

--icon-color-active:
  var(--brand-primary);

--icon-color-selected:
  var(--brand-primary);

--icon-color-focus:
  var(--brand-primary);

--icon-color-disabled:
  var(--icon-color-muted);

--icon-color-loading:
  var(--brand-primary);


/* =======================================================
   H7. ICON ALIGNMENT FOUNDATION
======================================================= */

--icon-align-start:
  flex-start;

--icon-align-center:
  center;

--icon-align-end:
  flex-end;

--icon-align-baseline:
  baseline;

--icon-vertical-align-text:
  -0.125em;

--icon-vertical-align-middle:
  middle;

--icon-vertical-align-baseline:
  baseline;


/* =======================================================
   H8. ICON GAP FOUNDATION
======================================================= */

--icon-gap-xs:
  var(--space-1);

--icon-gap-sm:
  var(--space-2);

--icon-gap-md:
  var(--space-3);

--icon-gap-lg:
  var(--space-4);

--icon-gap-xl:
  var(--space-5);


/* =======================================================
   H9. SEMANTIC ICON GAP ROLES
======================================================= */

--icon-gap-inline:
  var(--icon-gap-xs);

--icon-gap-label:
  var(--icon-gap-sm);

--icon-gap-button:
  var(--icon-gap-sm);

--icon-gap-input:
  var(--icon-gap-sm);

--icon-gap-nav:
  var(--icon-gap-sm);

--icon-gap-card:
  var(--icon-gap-md);

--icon-gap-feature:
  var(--icon-gap-lg);

--icon-gap-status:
  var(--icon-gap-sm);


/* =======================================================
   H10. ICON CONTAINER SIZE FOUNDATION
======================================================= */

--icon-container-xs:
  var(--space-6);

--icon-container-sm:
  var(--space-8);

--icon-container-md:
  var(--space-10);

--icon-container-lg:
  var(--space-12);

--icon-container-xl:
  var(--dimension-130);

--icon-container-2xl:
  var(--dimension-160);


/* =======================================================
   H11. ICON CONTAINER RADIUS ROLES
======================================================= */

--icon-container-radius-sm:
  var(--radius-sm);

--icon-container-radius:
  var(--radius-md);

--icon-container-radius-lg:
  var(--radius-lg);

--icon-container-radius-pill:
  var(--radius-pill);

--icon-container-radius-round:
  var(--radius-round);


/* =======================================================
   H12. ICON CONTAINER SURFACE CONTRACT
======================================================= */

--icon-container-bg:
  var(--surface-level-2-bg);

--icon-container-bg-hover:
  var(--surface-level-3-bg);

--icon-container-bg-active:
  var(--surface-selected-bg);

--icon-container-bg-disabled:
  var(--surface-disabled-bg);

--icon-container-border:
  var(--border-default);

--icon-container-border-hover:
  var(--border-emphasis);

--icon-container-border-active:
  var(--border-primary);

--icon-container-border-disabled:
  var(--surface-disabled-border);

--icon-container-shadow:
  var(--elevation-low);

--icon-container-shadow-hover:
  var(--elevation-default);

--icon-container-shadow-active:
  var(--surface-selected-shadow);


/* =======================================================
   H13. PRIMARY ICON CONTAINER
======================================================= */

--icon-container-primary-bg:
  var(--surface-primary-muted);

--icon-container-primary-border:
  var(--border-primary-default);

--icon-container-primary-color:
  var(--brand-primary);

--icon-container-primary-shadow:
  var(--glow-primary-sm);


/* =======================================================
   H14. ACCENT ICON CONTAINER
======================================================= */

--icon-container-accent-bg:
  var(--surface-accent-muted);

--icon-container-accent-border:
  var(--border-accent-default);

--icon-container-accent-color:
  var(--brand-accent);

--icon-container-accent-shadow:
  var(--glow-accent-sm);


/* =======================================================
   H15. STATUS ICON CONTAINERS
======================================================= */

--icon-container-success-bg:
  var(--surface-success-bg);

--icon-container-success-border:
  var(--surface-success-border);

--icon-container-success-color:
  var(--success-500);


--icon-container-warning-bg:
  var(--surface-warning-bg);

--icon-container-warning-border:
  var(--surface-warning-border);

--icon-container-warning-color:
  var(--warning-500);


--icon-container-danger-bg:
  var(--surface-danger-bg);

--icon-container-danger-border:
  var(--surface-danger-border);

--icon-container-danger-color:
  var(--danger-500);


--icon-container-info-bg:
  var(--surface-info-bg);

--icon-container-info-border:
  var(--surface-info-border);

--icon-container-info-color:
  var(--info-500);


/* =======================================================
   H16. ICON MOTION CONTRACTS
======================================================= */

--icon-transition:
  color
  var(--duration-sm)
  var(--ease-standard),
  background-color
  var(--duration-sm)
  var(--ease-standard),
  border-color
  var(--duration-sm)
  var(--ease-standard),
  transform
  var(--duration-sm)
  var(--ease-emphasized),
  opacity
  var(--duration-sm)
  var(--ease-standard);

--icon-transform-hover:
  scale(
    var(--scale-up-sm)
  );

--icon-transform-active:
  scale(
    var(--scale-down-sm)
  );

--icon-transform-expanded:
  rotate(
    var(--rotate-half)
  );

--icon-transform-collapse:
  rotate(
    var(--rotate-none)
  );

--icon-transform-next:
  translateX(
    var(--translate-xs)
  );

--icon-transform-previous:
  translateX(
    calc(var(--translate-xs) * -1)
  );


/* =======================================================
   H17. DIRECTIONAL ICON CONTRACTS
======================================================= */

--icon-direction-next:
  var(--rotate-none);

--icon-direction-previous:
  var(--rotate-half);

--icon-direction-up:
  calc(var(--rotate-quarter) * -1);

--icon-direction-down:
  var(--rotate-quarter);

--icon-direction-expand:
  var(--rotate-quarter);

--icon-direction-collapse:
  calc(var(--rotate-quarter) * -1);


/* =======================================================
   H18. NAVIGATION ICON CONTRACT
======================================================= */

--nav-icon-size:
  var(--icon-size-nav);

--nav-icon-color:
  var(--icon-color-secondary);

--nav-icon-color-hover:
  var(--icon-color-primary);

--nav-icon-color-active:
  var(--brand-primary);

--nav-icon-gap:
  var(--icon-gap-nav);

--nav-icon-stroke:
  var(--icon-stroke-nav);

--nav-icon-transition:
  var(--icon-transition);


/* =======================================================
   H19. BUTTON ICON CONTRACT
======================================================= */




--button-icon-gap:
  var(--icon-gap-button);

--button-icon-stroke:
  var(--icon-stroke-control);

--button-icon-color:
  currentColor;

--button-icon-transition:
  var(--icon-transition);


/* =======================================================
   H20. INPUT ICON CONTRACT
======================================================= */

--field-icon-size:
  var(--icon-size-input);

--field-icon-color:
  var(--icon-color-secondary);

--field-icon-color-hover:
  var(--icon-color-primary);

--field-icon-color-focus:
  var(--brand-primary);

--field-icon-color-valid:
  var(--success-500);

--field-icon-color-invalid:
  var(--danger-500);

--field-icon-color-disabled:
  var(--icon-color-disabled);

--field-icon-gap:
  var(--icon-gap-input);

--field-icon-offset:
  var(--space-input-x);


/* =======================================================
   H21. STATUS ICON CONTRACT
======================================================= */

--status-icon-size:
  var(--icon-size-status);

--status-icon-stroke:
  var(--icon-stroke-status);

--status-icon-success:
  var(--success-500);

--status-icon-warning:
  var(--warning-500);

--status-icon-danger:
  var(--danger-500);

--status-icon-info:
  var(--info-500);

--status-icon-pending:
  var(--brand-accent);

--status-icon-neutral:
  var(--fg-secondary);


/* =======================================================
   H22. ALERT ICON CONTRACT
======================================================= */

--alert-icon-size:
  var(--icon-size-alert);

--alert-icon-gap:
  var(--icon-gap-md);

--alert-icon-success:
  var(--success-500);

--alert-icon-warning:
  var(--warning-500);

--alert-icon-danger:
  var(--danger-500);

--alert-icon-info:
  var(--info-500);


/* =======================================================
   H23. CARD ICON CONTRACT
======================================================= */

--card-icon-size:
  var(--icon-size-card);

--card-icon-container-size:
  var(--icon-container-md);

--card-icon-gap:
  var(--icon-gap-card);

--card-icon-color:
  var(--brand-primary);

--card-icon-bg:
  var(--surface-primary-muted);

--card-icon-border:
  var(--border-primary-default);

--card-icon-radius:
  var(--icon-container-radius);

--card-icon-shadow:
  var(--glow-primary-sm);


/* =======================================================
   H24. FEATURE ICON CONTRACT
======================================================= */

--feature-icon-size:
  var(--icon-size-feature);

--feature-icon-container-size:
  var(--icon-container-xl);

--feature-icon-gap:
  var(--icon-gap-feature);

--feature-icon-color:
  var(--brand-primary);

--feature-icon-bg:
  var(--surface-primary-muted);

--feature-icon-border:
  var(--border-primary-default);

--feature-icon-radius:
  var(--icon-container-radius-lg);

--feature-icon-shadow:
  var(--glow-primary-md);


/* =======================================================
   H25. EMPTY-STATE ICON CONTRACT
======================================================= */

--empty-icon-size:
  var(--icon-size-empty);

--empty-icon-container-size:
  var(--icon-container-2xl);

--empty-icon-color:
  var(--fg-tertiary);

--empty-icon-bg:
  var(--surface-recessed-bg);

--empty-icon-border:
  var(--border-quiet);

--empty-icon-radius:
  var(--icon-container-radius-round);

--empty-icon-shadow:
  var(--elevation-recessed);


/* =======================================================
   H26. BADGE SIZE FOUNDATION
======================================================= */

--badge-h-xs:
  var(--space-5);

--badge-h-sm:
  var(--space-6);

--badge-h-md:
  var(--space-8);

--badge-padding-x-xs:
  var(--space-2);

--badge-padding-x-sm:
  var(--space-3);

--badge-padding-x-md:
  var(--space-4);

--badge-gap:
  var(--space-1);


/* =======================================================
   H27. BADGE CONTRACT
======================================================= */

--badge-bg:
  var(--surface-level-2-bg);

--badge-border:
  var(--border-default);

--badge-text:
  var(--fg-secondary);

--badge-icon:
  var(--fg-tertiary);

--badge-radius:
  var(--radius-pill);

--badge-shadow:
  none;

--badge-transition:
  var(--transition-colors);


/* =======================================================
   H28. PRIMARY BADGE CONTRACT
======================================================= */

--badge-primary-bg:
  var(--surface-primary-muted);

--badge-primary-border:
  var(--border-primary-default);

--badge-primary-text:
  var(--brand-primary);

--badge-primary-icon:
  var(--brand-primary);


/* =======================================================
   H29. ACCENT BADGE CONTRACT
======================================================= */

--badge-accent-bg:
  var(--surface-accent-muted);

--badge-accent-border:
  var(--border-accent-default);

--badge-accent-text:
  var(--brand-accent);

--badge-accent-icon:
  var(--brand-accent);


/* =======================================================
   H30. STATUS BADGE CONTRACTS
======================================================= */

--badge-success-bg:
  var(--surface-success-bg);

--badge-success-border:
  var(--surface-success-border);

--badge-success-text:
  var(--success-500);

--badge-success-icon:
  var(--success-500);


--badge-warning-bg:
  var(--surface-warning-bg);

--badge-warning-border:
  var(--surface-warning-border);

--badge-warning-text:
  var(--warning-500);

--badge-warning-icon:
  var(--warning-500);


--badge-danger-bg:
  var(--surface-danger-bg);

--badge-danger-border:
  var(--surface-danger-border);

--badge-danger-text:
  var(--danger-500);

--badge-danger-icon:
  var(--danger-500);


--badge-info-bg:
  var(--surface-info-bg);

--badge-info-border:
  var(--surface-info-border);

--badge-info-text:
  var(--info-500);

--badge-info-icon:
  var(--info-500);


/* =======================================================
   H31. INDICATOR SIZE FOUNDATION
======================================================= */

--indicator-size-xs:
  var(--space-1);

--indicator-size-sm:
  var(--space-2);

--indicator-size-md:
  var(--space-3);

--indicator-size-lg:
  var(--space-4);


/* =======================================================
   H32. INDICATOR CONTRACTS
======================================================= */

--indicator-neutral:
  var(--fg-tertiary);

--indicator-primary:
  var(--brand-primary);

--indicator-accent:
  var(--brand-accent);

--indicator-success:
  var(--success-500);

--indicator-warning:
  var(--warning-500);

--indicator-danger:
  var(--danger-500);

--indicator-info:
  var(--info-500);

--indicator-border:
  var(--surface-page-bg);

--indicator-border-width:
  var(--stroke-2);

--indicator-radius:
  var(--radius-round);


/* =======================================================
   H33. NOTIFICATION DOT CONTRACT
======================================================= */

--notification-dot-size:
  var(--indicator-size-md);

--notification-dot-bg:
  var(--danger-500);

--notification-dot-border:
  var(--surface-page-bg);

--notification-dot-border-width:
  var(--stroke-2);

--notification-dot-offset:
  calc(var(--space-1) * -1);


/* =======================================================
   H34. STEP MARKER FOUNDATION
======================================================= */

--step-marker-size-sm:
  var(--space-8);

--step-marker-size:
  var(--space-10);

--step-marker-size-lg:
  var(--space-12);

--step-marker-icon-size:
  var(--icon-size-sm);

--step-marker-gap:
  var(--space-3);


/* =======================================================
   H35. STEP MARKER CONTRACT
======================================================= */

--step-marker-bg:
  var(--surface-level-2-bg);

--step-marker-border:
  var(--border-default);

--step-marker-text:
  var(--fg-secondary);

--step-marker-icon:
  var(--fg-secondary);

--step-marker-shadow:
  var(--elevation-low);

--step-marker-radius:
  var(--radius-round);


/* =======================================================
   H36. ACTIVE STEP MARKER CONTRACT
======================================================= */

--step-marker-active-bg:
  var(--surface-primary-muted);

--step-marker-active-border:
  var(--border-primary-strong);

--step-marker-active-text:
  var(--brand-primary);

--step-marker-active-icon:
  var(--brand-primary);

--step-marker-active-shadow:
  var(--glow-primary-sm);


/* =======================================================
   H37. COMPLETE STEP MARKER CONTRACT
======================================================= */

--step-marker-complete-bg:
  var(--surface-success-bg);

--step-marker-complete-border:
  var(--surface-success-border);

--step-marker-complete-text:
  var(--success-500);

--step-marker-complete-icon:
  var(--success-500);

--step-marker-complete-shadow:
  var(--surface-success-shadow);


/* =======================================================
   H38. ERROR STEP MARKER CONTRACT
======================================================= */

--step-marker-error-bg:
  var(--surface-danger-bg);

--step-marker-error-border:
  var(--surface-danger-border);

--step-marker-error-text:
  var(--danger-500);

--step-marker-error-icon:
  var(--danger-500);

--step-marker-error-shadow:
  var(--surface-danger-shadow);


/* =======================================================
   H39. TIMELINE MARKER CONTRACTS
======================================================= */

--timeline-marker-size:
  var(--indicator-size-lg);

--timeline-marker-bg:
  var(--surface-level-2-bg);

--timeline-marker-border:
  var(--border-default);

--timeline-marker-active-bg:
  var(--brand-primary);

--timeline-marker-active-border:
  var(--brand-primary);

--timeline-marker-complete-bg:
  var(--success-500);

--timeline-marker-complete-border:
  var(--success-500);

--timeline-line-width:
  var(--stroke-2);

--timeline-line-bg:
  var(--divider-default);

--timeline-line-active:
  var(--brand-primary);


/* =======================================================
   H40. BULLET FOUNDATION
======================================================= */

--bullet-size-sm:
  var(--space-1);

--bullet-size:
  var(--space-2);

--bullet-size-lg:
  var(--space-3);

--bullet-gap:
  var(--space-3);

--bullet-color:
  var(--brand-primary);

--bullet-color-secondary:
  var(--fg-tertiary);

--bullet-radius:
  var(--radius-round);


/* =======================================================
   H41. CHECKMARK CONTRACT
======================================================= */

--checkmark-size:
  var(--icon-size-sm);

--checkmark-stroke:
  var(--icon-stroke-strong);

--checkmark-color:
  var(--success-500);

--checkmark-bg:
  var(--surface-success-bg);

--checkmark-border:
  var(--surface-success-border);

--checkmark-container-size:
  var(--icon-container-sm);

--checkmark-radius:
  var(--radius-round);


/* =======================================================
   H42. CHEVRON CONTRACT
======================================================= */

--chevron-size-sm:
  var(--icon-size-xs);

--chevron-size:
  var(--icon-size-sm);

--chevron-size-lg:
  var(--icon-size-md);

--chevron-stroke:
  var(--icon-stroke-default);

--chevron-color:
  var(--fg-secondary);

--chevron-color-hover:
  var(--fg-primary);

--chevron-color-active:
  var(--brand-primary);

--chevron-transition:
  var(--icon-transition);


/* =======================================================
   H43. DISCLOSURE CONTRACT
======================================================= */

--disclosure-icon-size:
  var(--chevron-size);

--disclosure-icon-color:
  var(--chevron-color);

--disclosure-icon-color-hover:
  var(--chevron-color-hover);

--disclosure-icon-rotation-closed:
  var(--rotate-none);

--disclosure-icon-rotation-open:
  var(--rotate-half);

--disclosure-icon-transition:
  transform
  var(--duration-md)
  var(--ease-emphasized);


/* =======================================================
   H44. CLOSE ICON CONTRACT
======================================================= */

--close-icon-size:
  var(--icon-size-md);

--close-icon-stroke:
  var(--icon-stroke-default);

--close-icon-color:
  var(--fg-secondary);

--close-icon-color-hover:
  var(--fg-primary);

--close-icon-color-active:
  var(--danger-500);

--close-icon-transition:
  var(--icon-transition);


/* =======================================================
   H45. MENU ICON CONTRACT
======================================================= */

--menu-icon-size:
  var(--icon-size-lg);

--menu-icon-stroke:
  var(--icon-stroke-default);

--menu-icon-color:
  var(--fg-primary);

--menu-icon-gap:
  var(--space-1);

--menu-icon-transition:
  var(--icon-transition);


/* =======================================================
   H46. DRAG HANDLE CONTRACT
======================================================= */

--drag-handle-size:
  var(--icon-size-md);

--drag-handle-color:
  var(--fg-tertiary);

--drag-handle-color-hover:
  var(--fg-secondary);

--drag-handle-color-active:
  var(--brand-primary);

--drag-handle-cursor:
  var(--cursor-grab);

--drag-handle-cursor-active:
  var(--cursor-grabbing);


/* =======================================================
   H47. LOGO MARK CONTRACT
======================================================= */

--mark-size-sm:
  var(--media-size-logo-sm);

--mark-size-md:
  var(--media-size-logo-md);

--mark-size-lg:
  var(--media-size-logo-lg);

--mark-color:
  currentColor;

--mark-bg:
  transparent;

--mark-shadow:
  none;


/* =======================================================
   H48. DECORATIVE SYMBOL CONTRACT
======================================================= */

--symbol-size-sm:
  var(--icon-size-xl);

--symbol-size-md:
  var(--icon-size-2xl);

--symbol-size-lg:
  var(--icon-size-3xl);

--symbol-color:
  var(--fg-tertiary);

--symbol-color-primary:
  var(--brand-primary);

--symbol-color-accent:
  var(--brand-accent);

--symbol-opacity:
  var(--a-16);

--symbol-opacity-strong:
  var(--a-28);


/* =======================================================
   H49. ICON ACCESSIBILITY CONTRACTS
======================================================= */

--icon-decorative-aria:
  hidden;

--icon-touch-target:
  var(--interaction-target-min);

--icon-touch-target-comfortable:
  var(--interaction-target-comfortable);

--icon-focus-ring:
  var(--focus-ring);

--icon-disabled-opacity:
  var(--state-disabled-opacity);


/* =======================================================
   H50. ICON LOADING CONTRACT
======================================================= */

--icon-loading-size:
  var(--icon-size-md);

--icon-loading-color:
  var(--brand-primary);

--icon-loading-track:
  var(--surface-light-alpha-12);

--icon-loading-duration:
  var(--spinner-duration);

--icon-loading-ease:
  var(--spinner-ease);

--icon-loading-iteration:
  var(--spinner-iteration);


/* =======================================================
   H51. LEGACY ICON COMPATIBILITY
======================================================= */

--size-icon-xs:
  var(--icon-size-xs);

--size-icon-sm:
  var(--icon-size-sm);

--size-icon:
  var(--icon-size-md);

--size-icon-lg:
  var(--icon-size-lg);

--size-icon-xl:
  var(--icon-size-xl);

--icon-gap:
  var(--icon-gap-md);

--icon-color:
  var(--icon-color-default);






/* =======================================================
   H52. ICON RECIPE REFERENCE
======================================================= */

/*
  STANDARD INLINE ICON

  width:
    var(--icon-size-inline);

  height:
    var(--icon-size-inline);

  color:
    var(--icon-color-default);

  stroke-width:
    var(--icon-stroke-inline);

  vertical-align:
    var(--icon-vertical-align-text);


  STANDARD ICON CONTAINER

  width:
    var(--icon-container-md);

  height:
    var(--icon-container-md);

  background:
    var(--icon-container-bg);

  border:
    var(--stroke-1)
    solid
    var(--icon-container-border);

  border-radius:
    var(--icon-container-radius);

  color:
    var(--icon-color-default);

  box-shadow:
    var(--icon-container-shadow);


  STANDARD STATUS BADGE

  min-height:
    var(--badge-h-sm);

  padding-inline:
    var(--badge-padding-x-sm);

  gap:
    var(--badge-gap);

  border-radius:
    var(--badge-radius);
*/


/* =======================================================
   H53. ICON GOVERNANCE
======================================================= */

/*
  ICON RULES

  1. Icons must consume approved size roles.

  2. Components must not invent local icon dimensions.

  3. Stroke-based icon families must use approved stroke
     roles consistently.

  4. Filled and stroked icon styles should not be mixed
     casually within the same component family.

  5. Icons must support meaning rather than replace clear
     labels when the action may be ambiguous.

  6. Icon-only controls require accessible names.

  7. Decorative icons must be hidden from assistive
     technology.

  8. Status icons must use the matching status colour.

  9. Disabled icons must use the approved disabled treatment.

  10. Navigation icons must remain visually subordinate to
      primary navigation labels unless icon-only navigation
      is explicitly required.

  11. Directional icons must respect reading direction when
      localization requires it.

  12. Icon containers must use coordinated surface, border,
      radius, and shadow contracts.

  13. Large feature icons must not compete with the section's
      primary focal point.

  14. Infinite icon motion is reserved for active loading.

  15. Expanded and collapsed icons must use approved
      rotation and transition contracts.

  16. Badges must communicate status or category, not act as
      decoration.

  17. Indicators must not rely on colour alone when the
      represented state is important.

  18. Notification dots must not obscure their parent icon.

  19. Logo marks must preserve approved proportions.

  20. Compatibility aliases remain until all icon selectors
      have been audited.
*/

/* =========================================================
   PACKAGE I
   DATA DISPLAY + TABLES + LISTS + METRICS
========================================================= */

/*
  PURPOSE
  - Standardize tables, data rows, statistics, scorecards,
    summaries, timelines, definition lists, activity feeds,
    pricing breakdowns, and operational records.
  - Support Ronnie OS, Steve's Guess, dispatch tools,
    dashboards, invoices, client portals, and reports.
  - Prevent components from inventing local row heights,
    column gaps, dividers, numeric alignment, or data states.

  RULES
  - Tokens define values and semantic contracts only.
  - Layout controls structural grid placement.
  - Components own visual composition.
  - Typography consumes Package B semantic roles.
  - Surfaces consume Package C contracts.
  - States consume Package E contracts.
*/


/* =======================================================
   I1. DATA DENSITY FOUNDATION
======================================================= */

--data-density-compact:
  var(--space-2);

--data-density-default:
  var(--space-3);

--data-density-comfortable:
  var(--space-4);

--data-density-relaxed:
  var(--space-5);

--data-density-spacious:
  var(--space-6);

--table-min-w:
  40rem;



/* =======================================================
   I2. DATA ROW HEIGHT FOUNDATION
======================================================= */

--data-row-h-xs:
  var(--space-8);

--data-row-h-sm:
  var(--space-10);

--data-row-h-md:
  var(--space-12);

--data-row-h-lg:
  var(--dimension-130);

--data-row-h-xl:
  var(--dimension-160);


/* =======================================================
   I3. SEMANTIC ROW HEIGHTS
======================================================= */

--table-row-h-compact:
  var(--data-row-h-sm);

--table-row-h:
  var(--data-row-h-md);

--table-row-h-comfortable:
  var(--data-row-h-lg);

--summary-row-h:
  var(--data-row-h-sm);

--metric-row-h:
  var(--data-row-h-md);

--activity-row-min-h:
  var(--data-row-h-lg);

--invoice-row-h:
  var(--data-row-h-md);

--dispatch-row-h:
  var(--data-row-h-lg);


/* =======================================================
   I4. DATA CELL PADDING FOUNDATION
======================================================= */

--data-cell-x-xs:
  var(--space-2);

--data-cell-x-sm:
  var(--space-3);

--data-cell-x-md:
  var(--space-4);

--data-cell-x-lg:
  var(--space-5);

--data-cell-x-xl:
  var(--space-6);


--data-cell-y-xs:
  var(--space-1);

--data-cell-y-sm:
  var(--space-2);

--data-cell-y-md:
  var(--space-3);

--data-cell-y-lg:
  var(--space-4);

--data-cell-y-xl:
  var(--space-5);


/* =======================================================
   I5. SEMANTIC CELL PADDING
======================================================= */

--table-cell-x-compact:
  var(--data-cell-x-sm);

--table-cell-y-compact:
  var(--data-cell-y-sm);

--table-cell-x:
  var(--data-cell-x-md);

--table-cell-y:
  var(--data-cell-y-md);

--table-cell-x-comfortable:
  var(--data-cell-x-lg);

--table-cell-y-comfortable:
  var(--data-cell-y-lg);

--summary-cell-x:
  var(--data-cell-x-md);

--summary-cell-y:
  var(--data-cell-y-sm);

--invoice-cell-x:
  var(--data-cell-x-md);

--invoice-cell-y:
  var(--data-cell-y-md);


/* =======================================================
   I6. DATA COLUMN GAP FOUNDATION
======================================================= */

--data-column-gap-xs:
  var(--space-2);

--data-column-gap-sm:
  var(--space-3);

--data-column-gap-md:
  var(--space-4);

--data-column-gap-lg:
  var(--space-6);

--data-column-gap-xl:
  var(--space-8);


/* =======================================================
   I7. TABLE SURFACE CONTRACT
======================================================= */

--table-bg:
  var(--surface-level-1-bg);

--table-border:
  var(--border-default);

--table-radius:
  var(--radius-lg);

--table-shadow:
  var(--elevation-low);

--table-overflow:
  var(--overflow-auto);

/* =======================================================
   I8. TABLE HEADER CONTRACT
======================================================= */

--table-header-bg:
  var(--surface-level-2-bg);

--table-header-border:
  var(--border-emphasis);

--table-header-text:
  var(--fg-secondary);

--table-header-icon:
  var(--fg-tertiary);

--table-header-padding-x:
  var(--table-cell-x);

--table-header-padding-y:
  var(--table-cell-y);

--table-header-height:
  var(--table-row-h);

--table-header-shadow:
  none;


/* =======================================================
   I9. TABLE BODY CONTRACT
======================================================= */

--table-body-bg:
  var(--surface-level-1-bg);

--table-body-text:
  var(--fg-primary);

--table-body-text-muted:
  var(--fg-secondary);

--table-body-border:
  var(--divider-default);

--table-body-icon:
  var(--fg-secondary);


/* =======================================================
   I10. TABLE FOOTER CONTRACT
======================================================= */

--table-footer-bg:
  var(--surface-level-2-bg);

--table-footer-border:
  var(--border-emphasis);

--table-footer-text:
  var(--fg-primary);

--table-footer-padding-x:
  var(--table-cell-x);

--table-footer-padding-y:
  var(--table-cell-y);


/* =======================================================
   I11. TABLE ROW STATES
======================================================= */

--table-row-bg:
  transparent;

--table-row-bg-hover:
  var(--surface-light-alpha-04);

--table-row-bg-selected:
  var(--surface-selected-bg);

--table-row-bg-active:
  var(--surface-primary-subtle);

--table-row-bg-disabled:
  var(--surface-disabled-bg);

--table-row-border:
  var(--divider-default);

--table-row-border-selected:
  var(--border-primary);

--table-row-text:
  var(--fg-primary);

--table-row-text-muted:
  var(--fg-secondary);

--table-row-text-disabled:
  var(--fg-disabled);

--table-row-shadow-selected:
  inset
  var(--stroke-3)
  0
  0
  var(--brand-primary);

--table-row-transition:
  var(--transition-colors);


/* =======================================================
   I12. STRIPED TABLE CONTRACT
======================================================= */

--table-stripe-bg:
  var(--surface-light-alpha-02);

--table-stripe-bg-hover:
  var(--surface-light-alpha-06);

--table-stripe-frequency:
  even;


/* =======================================================
   I13. TABLE CELL ALIGNMENT
======================================================= */

--table-align-text:
  left;

--table-align-number:
  right;

--table-align-status:
  center;

--table-align-actions:
  right;

--table-align-checkbox:
  center;

--table-valign:
  middle;

--table-valign-top:
  top;

--table-valign-bottom:
  bottom;


/* =======================================================
   I14. TABLE COLUMN WIDTH FOUNDATION
======================================================= */

--table-column-xs:
  var(--space-10);

--table-column-sm:
  var(--dimension-130);

--table-column-md:
  var(--dimension-180);

--table-column-lg:
  var(--dimension-240);

--table-column-xl:
  var(--dimension-280);

--table-column-fluid:
  auto;

--table-column-fill:
  100%;


/* =======================================================
   I15. TABLE ACTION COLUMN CONTRACT
======================================================= */

--table-actions-w:
  var(--table-column-sm);

--table-actions-gap:
  var(--space-2);

--table-actions-align:
  flex-end;

--table-actions-icon-size:
  var(--icon-size-sm);


/* =======================================================
   I16. TABLE SELECTION COLUMN CONTRACT
======================================================= */

--table-select-w:
  var(--space-10);

--table-select-padding:
  var(--space-3);

--table-select-align:
  center;


/* =======================================================
   I17. TABLE SORT CONTRACT
======================================================= */

--table-sort-icon-size:
  var(--icon-size-xs);

--table-sort-icon:
  var(--fg-tertiary);

--table-sort-icon-hover:
  var(--fg-primary);

--table-sort-icon-active:
  var(--brand-primary);

--table-sort-gap:
  var(--space-2);

--table-sort-transition:
  var(--icon-transition);


/* =======================================================
   I18. TABLE STICKY CONTRACTS
======================================================= */

--table-sticky-header-top:
  0;

--table-sticky-header-z:
  var(--layer-sticky);

--table-sticky-column-start:
  0;

--table-sticky-column-end:
  0;

--table-sticky-bg:
  var(--surface-level-2-bg);

--table-sticky-shadow-start:
  var(--shadow-contact-sm);

--table-sticky-shadow-end:
  calc(var(--shadow-contact-sm) * -1);


/* =======================================================
   I19. RESPONSIVE TABLE CONTRACTS
======================================================= */

--table-mobile-label-w:
  var(--content-xs);

--table-mobile-row-gap:
  var(--space-3);

--table-mobile-cell-gap:
  var(--space-2);

--table-mobile-padding:
  var(--space-4);

--table-mobile-radius:
  var(--radius-md);

--table-scroll-shadow:
  var(--elevation-low);


/* =======================================================
   I20. DATA LIST CONTRACT
======================================================= */

--data-list-bg:
  var(--surface-level-1-bg);

--data-list-border:
  var(--border-default);

--data-list-radius:
  var(--radius-lg);

--data-list-shadow:
  var(--elevation-low);

--data-list-gap:
  0;


/* =======================================================
   I21. DATA LIST ITEM CONTRACT
======================================================= */

--data-list-item-bg:
  transparent;

--data-list-item-bg-hover:
  var(--surface-light-alpha-04);

--data-list-item-bg-selected:
  var(--surface-selected-bg);

--data-list-item-border:
  var(--divider-default);

--data-list-item-padding-x:
  var(--space-4);

--data-list-item-padding-y:
  var(--space-3);

--data-list-item-gap:
  var(--space-3);

--data-list-item-min-h:
  var(--data-row-h-md);

--data-list-item-transition:
  var(--transition-colors);


/* =======================================================
   I22. DEFINITION LIST CONTRACT
======================================================= */

--definition-list-gap:
  var(--space-3);

--definition-row-gap:
  var(--space-4);

--definition-label-w:
  var(--content-xs);

--definition-label-text:
  var(--fg-secondary);

--definition-value-text:
  var(--fg-primary);

--definition-divider:
  var(--divider-default);

--definition-padding-y:
  var(--space-3);


/* =======================================================
   I23. SUMMARY LIST CONTRACT
======================================================= */

--summary-bg:
  var(--surface-recessed-bg);

--summary-border:
  var(--border-default);

--summary-radius:
  var(--radius-lg);

--summary-shadow:
  var(--elevation-recessed);

--summary-padding:
  var(--space-5);

--summary-gap:
  var(--space-2);


/* =======================================================
   I24. SUMMARY ROW CONTRACT
======================================================= */

--summary-row-padding-y:
  var(--summary-cell-y);

--summary-row-gap:
  var(--space-4);

--summary-row-border:
  var(--divider-default);

--summary-label-text:
  var(--fg-secondary);

--summary-value-text:
  var(--fg-primary);

--summary-value-align:
  right;


/* =======================================================
   I25. SUMMARY TOTAL CONTRACT
======================================================= */

--summary-total-padding-top:
  var(--space-4);

--summary-total-margin-top:
  var(--space-3);

--summary-total-border:
  var(--border-emphasis);

--summary-total-label:
  var(--fg-primary);

--summary-total-value:
  var(--brand-primary);

--summary-total-gap:
  var(--space-4);


/* =======================================================
   I26. PRICE BREAKDOWN CONTRACT
======================================================= */

--price-breakdown-bg:
  var(--surface-recessed-bg);

--price-breakdown-border:
  var(--border-default);

--price-breakdown-radius:
  var(--radius-lg);

--price-breakdown-padding:
  var(--space-5);

--price-breakdown-gap:
  var(--space-2);

--price-breakdown-label:
  var(--fg-secondary);

--price-breakdown-value:
  var(--fg-primary);

--price-breakdown-adjustment:
  var(--brand-accent);

--price-breakdown-total:
  var(--brand-primary);


/* =======================================================
   I27. METRIC CARD CONTRACT
======================================================= */

--metric-card-bg:
  var(--surface-card-bg);

--metric-card-border:
  var(--surface-card-border);

--metric-card-radius:
  var(--radius-card);

--metric-card-shadow:
  var(--surface-card-shadow);

--metric-card-padding:
  var(--space-card-padding);

--metric-card-gap:
  var(--space-3);

--metric-card-min-h:
  var(--dimension-180);


/* =======================================================
   I28. METRIC TYPOGRAPHY CONTRACT
======================================================= */

--metric-label-font:
  var(--type-label-font);

--metric-label-size:
  var(--type-label-size);

--metric-label-leading:
  var(--type-label-leading);

--metric-label-weight:
  var(--type-label-weight);

--metric-label-tracking:
  var(--type-label-tracking);

--metric-label-text:
  var(--fg-secondary);


--metric-value-font:
  var(--type-stat-font);

--metric-value-size:
  var(--type-stat-size);

--metric-value-leading:
  var(--type-stat-leading);

--metric-value-weight:
  var(--type-stat-weight);

--metric-value-tracking:
  var(--type-stat-tracking);

--metric-value-text:
  var(--fg-primary);


/* =======================================================
   I29. METRIC CHANGE CONTRACT
======================================================= */

--metric-change-size:
  var(--type-caption-size);

--metric-change-weight:
  var(--weight-semibold);

--metric-change-gap:
  var(--space-1);

--metric-change-positive:
  var(--success-500);

--metric-change-negative:
  var(--danger-500);

--metric-change-neutral:
  var(--fg-secondary);

--metric-change-warning:
  var(--warning-500);


/* =======================================================
   I30. METRIC ICON CONTRACT
======================================================= */

--metric-icon-size:
  var(--icon-size-lg);

--metric-icon-container:
  var(--icon-container-md);

--metric-icon-bg:
  var(--surface-primary-muted);

--metric-icon-border:
  var(--border-primary-default);

--metric-icon-color:
  var(--brand-primary);

--metric-icon-radius:
  var(--radius-md);


/* =======================================================
   I31. KPI CONTRACT
======================================================= */

--kpi-bg:
  var(--surface-level-2-bg);

--kpi-border:
  var(--border-default);

--kpi-radius:
  var(--radius-lg);

--kpi-shadow:
  var(--elevation-low);

--kpi-padding:
  var(--space-5);

--kpi-gap:
  var(--space-3);

--kpi-value-text:
  var(--fg-primary);

--kpi-label-text:
  var(--fg-secondary);

--kpi-target-text:
  var(--fg-tertiary);


/* =======================================================
   I32. KPI STATUS CONTRACTS
======================================================= */

--kpi-success-bg:
  var(--surface-success-bg);

--kpi-success-border:
  var(--surface-success-border);

--kpi-success-accent:
  var(--success-500);


--kpi-warning-bg:
  var(--surface-warning-bg);

--kpi-warning-border:
  var(--surface-warning-border);

--kpi-warning-accent:
  var(--warning-500);


--kpi-danger-bg:
  var(--surface-danger-bg);

--kpi-danger-border:
  var(--surface-danger-border);

--kpi-danger-accent:
  var(--danger-500);


/* =======================================================
   I33. SCORECARD CONTRACT
======================================================= */

--scorecard-bg:
  var(--surface-panel-bg);

--scorecard-border:
  var(--surface-panel-border);

--scorecard-radius:
  var(--radius-xl);

--scorecard-shadow:
  var(--surface-panel-shadow);

--scorecard-padding:
  var(--space-6);

--scorecard-gap:
  var(--space-5);

--scorecard-grid:
  var(--grid-auto-sm);


/* =======================================================
   I34. STAT GROUP CONTRACT
======================================================= */

--stat-group-gap:
  var(--space-6);

--stat-group-divider:
  var(--divider-default);

--stat-group-padding:
  var(--space-5);

--stat-group-columns:
  var(--grid-auto-sm);


/* =======================================================
   I35. PROGRESS METRIC CONTRACT
======================================================= */

--metric-progress-track:
  var(--progress-track-bg);

--metric-progress-fill:
  var(--progress-fill-bg);

--metric-progress-h:
  var(--progress-h-sm);

--metric-progress-radius:
  var(--progress-radius);

--metric-progress-gap:
  var(--space-2);

--metric-progress-transition:
  var(--progress-motion);


/* =======================================================
   I36. CAPACITY METER CONTRACT
======================================================= */

--capacity-track-bg:
  var(--progress-track-bg);

--capacity-track-border:
  var(--progress-track-border);

--capacity-fill-available:
  var(--success-500);

--capacity-fill-limited:
  var(--warning-500);

--capacity-fill-full:
  var(--danger-500);

--capacity-fill-pending:
  var(--brand-accent);

--capacity-fill-closed:
  var(--fg-disabled);

--capacity-height:
  var(--progress-h-md);

--capacity-radius:
  var(--radius-pill);

--capacity-gap:
  var(--space-2);


/* =======================================================
   I37. STATUS CELL CONTRACT
======================================================= */

--status-cell-gap:
  var(--space-2);

--status-cell-indicator-size:
  var(--indicator-size-sm);

--status-cell-text:
  var(--fg-secondary);

--status-cell-active:
  var(--brand-primary);

--status-cell-success:
  var(--success-500);

--status-cell-warning:
  var(--warning-500);

--status-cell-danger:
  var(--danger-500);

--status-cell-info:
  var(--info-500);


/* =======================================================
   I38. ACTIVITY FEED CONTRACT
======================================================= */

--activity-feed-gap:
  var(--space-4);

--activity-feed-padding:
  var(--space-5);

--activity-feed-bg:
  var(--surface-level-1-bg);

--activity-feed-border:
  var(--border-default);

--activity-feed-radius:
  var(--radius-lg);


/* =======================================================
   I39. ACTIVITY ITEM CONTRACT
======================================================= */

--activity-item-gap:
  var(--space-3);

--activity-item-padding-y:
  var(--space-3);

--activity-item-border:
  var(--divider-default);

--activity-item-icon-size:
  var(--icon-container-sm);

--activity-item-icon:
  var(--icon-size-sm);

--activity-item-title:
  var(--fg-primary);

--activity-item-meta:
  var(--fg-tertiary);

--activity-item-text:
  var(--fg-secondary);


/* =======================================================
   I40. TIMELINE DATA CONTRACT
======================================================= */

--timeline-gap:
  var(--space-5);

--timeline-item-gap:
  var(--space-4);

--timeline-content-gap:
  var(--space-2);


--timeline-title-text:
  var(--fg-primary);

--timeline-meta-text:
  var(--fg-tertiary);

--timeline-body-text:
  var(--fg-secondary);


/* =======================================================
   I41. EVENT RECORD CONTRACT
======================================================= */

--event-record-bg:
  var(--surface-level-2-bg);

--event-record-bg-hover:
  var(--surface-level-3-bg);

--event-record-border:
  var(--border-default);

--event-record-border-active:
  var(--border-primary);

--event-record-radius:
  var(--radius-md);

--event-record-padding:
  var(--space-3);

--event-record-gap:
  var(--space-2);

--event-record-min-h:
  var(--data-row-h-sm);

--event-record-transition:
  var(--transition-interactive);


/* =======================================================
   I42. DISPATCH RECORD CONTRACT
======================================================= */

--dispatch-record-bg:
  var(--surface-card-bg);

--dispatch-record-bg-hover:
  var(--surface-card-raised-bg);

--dispatch-record-border:
  var(--surface-card-border);

--dispatch-record-border-active:
  var(--border-primary);

--dispatch-record-radius:
  var(--radius-lg);

--dispatch-record-shadow:
  var(--surface-card-shadow);

--dispatch-record-shadow-hover:
  var(--surface-card-raised-shadow);

--dispatch-record-padding:
  var(--space-5);

--dispatch-record-gap:
  var(--space-4);


/* =======================================================
   I43. JOB RECORD CONTRACT
======================================================= */

--job-record-bg:
  var(--surface-level-2-bg);

--job-record-border:
  var(--border-default);

--job-record-radius:
  var(--radius-md);

--job-record-padding:
  var(--space-4);

--job-record-gap:
  var(--space-3);

--job-record-title:
  var(--fg-primary);

--job-record-meta:
  var(--fg-secondary);

--job-record-note:
  var(--fg-tertiary);


/* =======================================================
   I44. INVOICE TABLE CONTRACT
======================================================= */

--invoice-table-bg:
  var(--surface-level-1-bg);

--invoice-table-border:
  var(--border-default);

--invoice-table-radius:
  var(--radius-lg);

--invoice-table-shadow:
  var(--elevation-low);

--invoice-header-bg:
  var(--surface-level-2-bg);

--invoice-row-border:
  var(--divider-default);

--invoice-total-border:
  var(--border-emphasis);

--invoice-total-bg:
  var(--surface-primary-subtle);


/* =======================================================
   I45. INVOICE AMOUNT CONTRACT
======================================================= */

--invoice-amount-text:
  var(--fg-primary);

--invoice-subtotal-text:
  var(--fg-secondary);

--invoice-tax-text:
  var(--fg-secondary);

--invoice-total-text:
  var(--brand-primary);

--invoice-paid-text:
  var(--success-500);

--invoice-overdue-text:
  var(--danger-500);

--invoice-pending-text:
  var(--warning-500);


/* =======================================================
   I46. BILLING SUMMARY CONTRACT
======================================================= */

--billing-summary-bg:
  var(--surface-panel-bg);

--billing-summary-border:
  var(--surface-panel-border);

--billing-summary-radius:
  var(--radius-xl);

--billing-summary-shadow:
  var(--surface-panel-shadow);

--billing-summary-padding:
  var(--space-6);

--billing-summary-gap:
  var(--space-4);

--billing-summary-columns:
  var(--grid-auto-sm);


/* =======================================================
   I47. COMPARISON TABLE CONTRACT
======================================================= */

--comparison-bg:
  var(--surface-level-1-bg);

--comparison-border:
  var(--border-default);

--comparison-radius:
  var(--radius-xl);

--comparison-shadow:
  var(--elevation-low);

--comparison-featured-bg:
  var(--surface-primary-subtle);

--comparison-featured-border:
  var(--border-primary);

--comparison-featured-shadow:
  var(--glow-primary-sm);

--comparison-row-border:
  var(--divider-default);


/* =======================================================
   I48. RANKING CONTRACT
======================================================= */

--ranking-index-size:
  var(--icon-container-sm);

--ranking-index-bg:
  var(--surface-level-2-bg);

--ranking-index-border:
  var(--border-default);

--ranking-index-text:
  var(--fg-secondary);

--ranking-index-radius:
  var(--radius-round);

--ranking-top-bg:
  var(--surface-primary-muted);

--ranking-top-border:
  var(--border-primary);

--ranking-top-text:
  var(--brand-primary);


/* =======================================================
   I49. PAGINATION CONTRACT
======================================================= */

--pagination-gap:
  var(--space-2);

--pagination-item-size:
  var(--control-h-sm);

--pagination-item-bg:
  transparent;

--pagination-item-bg-hover:
  var(--surface-light-alpha-08);

--pagination-item-bg-active:
  var(--surface-selected-bg);

--pagination-item-border:
  var(--border-default);

--pagination-item-border-active:
  var(--border-primary);

--pagination-item-text:
  var(--fg-secondary);

--pagination-item-text-hover:
  var(--fg-primary);

--pagination-item-text-active:
  var(--brand-primary);

--pagination-item-radius:
  var(--radius-md);

--pagination-item-transition:
  var(--transition-interactive);


/* =======================================================
   I50. DATA TOOLBAR CONTRACT
======================================================= */

--data-toolbar-bg:
  var(--surface-level-2-bg);

--data-toolbar-border:
  var(--border-default);

--data-toolbar-radius:
  var(--radius-lg);

--data-toolbar-padding:
  var(--space-4);

--data-toolbar-gap:
  var(--space-3);

--data-toolbar-min-h:
  var(--data-row-h-lg);


/* =======================================================
   I51. DATA FILTER CONTRACT
======================================================= */

--data-filter-gap:
  var(--space-3);

--data-filter-bg:
  var(--surface-recessed-bg);

--data-filter-border:
  var(--border-default);

--data-filter-radius:
  var(--radius-md);

--data-filter-padding:
  var(--space-3);

--data-filter-active-bg:
  var(--surface-selected-bg);

--data-filter-active-border:
  var(--border-primary);


/* =======================================================
   I52. EMPTY DATA CONTRACT
======================================================= */

--data-empty-bg:
  var(--surface-recessed-bg);

--data-empty-border:
  var(--border-quiet);

--data-empty-radius:
  var(--radius-lg);

--data-empty-padding:
  var(--space-8);

--data-empty-gap:
  var(--space-4);

--data-empty-icon:
  var(--empty-icon-color);

--data-empty-title:
  var(--fg-primary);

--data-empty-text:
  var(--fg-secondary);


/* =======================================================
   I53. DATA LOADING CONTRACT
======================================================= */

--data-loading-bg:
  var(--surface-level-1-bg);

--data-loading-border:
  var(--border-default);

--data-loading-radius:
  var(--radius-lg);

--data-loading-row-h:
  var(--table-row-h);

--data-loading-gap:
  var(--space-3);

--data-loading-skeleton:
  var(--skeleton-gradient);


/* =======================================================
   I54. DATA ERROR CONTRACT
======================================================= */

--data-error-bg:
  var(--surface-danger-bg);

--data-error-border:
  var(--surface-danger-border);

--data-error-radius:
  var(--radius-lg);

--data-error-padding:
  var(--space-5);

--data-error-gap:
  var(--space-3);

--data-error-icon:
  var(--danger-500);

--data-error-title:
  var(--state-invalid-text);

--data-error-text:
  var(--fg-secondary);


/* =======================================================
   I55. NUMERIC DISPLAY CONTRACT
======================================================= */

--number-font:
  var(--font-body);

--number-weight:
  var(--weight-semibold);

--number-leading:
  var(--lh-tight);

--number-tracking:
  var(--track-tight);

--number-features:
  var(--font-feature-tabular);

--number-align:
  right;


/* =======================================================
   I56. CURRENCY DISPLAY CONTRACT
======================================================= */

--currency-font:
  var(--type-price-font);

--currency-size:
  var(--type-price-size);

--currency-leading:
  var(--type-price-leading);

--currency-weight:
  var(--type-price-weight);

--currency-tracking:
  var(--type-price-tracking);

--currency-features:
  var(--font-feature-tabular);

--currency-symbol-gap:
  var(--space-1);


/* =======================================================
   I57. DATE AND TIME CONTRACT
======================================================= */

--datetime-font:
  var(--font-body);

--datetime-size:
  var(--type-meta-size);

--datetime-leading:
  var(--type-meta-leading);

--datetime-weight:
  var(--type-meta-weight);

--datetime-tracking:
  var(--type-meta-tracking);

--datetime-text:
  var(--fg-secondary);

--datetime-features:
  var(--font-feature-tabular);


/* =======================================================
   I58. CODE AND IDENTIFIER CONTRACT
======================================================= */

--identifier-font:
  var(--font-mono);

--identifier-size:
  var(--text-sm);

--identifier-leading:
  var(--lh-snug);

--identifier-weight:
  var(--weight-medium);

--identifier-tracking:
  var(--track-wide);

--identifier-text:
  var(--fg-secondary);

--identifier-bg:
  var(--surface-recessed-bg);

--identifier-border:
  var(--border-quiet);

--identifier-radius:
  var(--radius-sm);

--identifier-padding-x:
  var(--space-2);

--identifier-padding-y:
  var(--space-1);


/* =======================================================
   I59. TREND INDICATOR CONTRACT
======================================================= */

--trend-icon-size:
  var(--icon-size-xs);

--trend-gap:
  var(--space-1);

--trend-positive:
  var(--success-500);

--trend-negative:
  var(--danger-500);

--trend-neutral:
  var(--fg-tertiary);

--trend-warning:
  var(--warning-500);


/* =======================================================
   I60. LEGEND CONTRACT
======================================================= */

--legend-gap:
  var(--space-4);

--legend-item-gap:
  var(--space-2);

--legend-marker-size:
  var(--indicator-size-sm);

--legend-text:
  var(--fg-secondary);

--legend-text-active:
  var(--fg-primary);


/* =======================================================
   I61. CHART SUPPORT CONTRACTS
======================================================= */

/*
  These tokens support chart components without defining
  chart rendering logic.
*/

--chart-grid:
  var(--divider-default);

--chart-axis:
  var(--fg-tertiary);

--chart-label:
  var(--fg-secondary);

--chart-value:
  var(--fg-primary);

--chart-primary:
  var(--brand-primary);

--chart-accent:
  var(--brand-accent);

--chart-success:
  var(--success-500);

--chart-warning:
  var(--warning-500);

--chart-danger:
  var(--danger-500);

--chart-info:
  var(--info-500);

--chart-tooltip-bg:
  var(--surface-floating-bg);

--chart-tooltip-border:
  var(--surface-floating-border);

--chart-tooltip-shadow:
  var(--surface-floating-shadow);

--chart-tooltip-radius:
  var(--radius-md);

--chart-tooltip-padding:
  var(--space-3);


/* =======================================================
   I62. CHART DIMENSION CONTRACTS
======================================================= */

--chart-h-sm:
  var(--dimension-180);

--chart-h-md:
  var(--dimension-240);

--chart-h-lg:
  var(--dimension-280);

--chart-h-xl:
  var(--dimension-540);

--chart-gap:
  var(--space-4);

--chart-label-gap:
  var(--space-2);


/* =======================================================
   I63. DATA VISUALIZATION ALPHA ROLES
======================================================= */

--chart-fill-primary:
  rgba(
    var(--brand-primary-rgb) /
    var(--a-18)
  );

--chart-fill-accent:
  rgba(
    var(--brand-accent-rgb) /
    var(--a-18)
  );

--chart-fill-success:
  rgba(
    var(--success-500-rgb) /
    var(--a-18)
  );

--chart-fill-warning:
  rgba(
    var(--warning-500-rgb) /
    var(--a-18)
  );

--chart-fill-danger:
  rgba(
    var(--danger-500-rgb) /
    var(--a-18)
  );

--chart-fill-info:
  rgba(
    var(--info-500-rgb) /
    var(--a-18)
  );


/* =======================================================
   I64. LEGACY TABLE COMPATIBILITY
======================================================= */

--table-cell-padding-x:
  var(--table-cell-x);

--table-cell-padding-y:
  var(--table-cell-y);

--table-border-color:
  var(--table-border);

--table-row-border-color:
  var(--table-row-border);

--table-row-hover:
  var(--table-row-bg-hover);

--table-header-background:
  var(--table-header-bg);

--table-header-color:
  var(--table-header-text);


/* =======================================================
   I65. LEGACY METRIC COMPATIBILITY
======================================================= */

--stat-bg:
  var(--metric-card-bg);

--stat-border:
  var(--metric-card-border);

--stat-radius:
  var(--metric-card-radius);

--stat-shadow:
  var(--metric-card-shadow);

--stat-padding:
  var(--metric-card-padding);

--stat-gap:
  var(--metric-card-gap);


/* =======================================================
   I66. TABLE RECIPE REFERENCE
======================================================= */

/*
  STANDARD TABLE SHELL

  background:
    var(--table-bg);

  border:
    var(--stroke-1)
    solid
    var(--table-border);

  border-radius:
    var(--table-radius);

  box-shadow:
    var(--table-shadow);

  overflow:
    var(--table-overflow);


  STANDARD TABLE CELL

  min-height:
    var(--table-row-h);

  padding:
    var(--table-cell-y)
    var(--table-cell-x);

  border-bottom:
    var(--stroke-1)
    solid
    var(--table-row-border);


  STANDARD METRIC CARD

  background:
    var(--metric-card-bg);

  border:
    var(--stroke-1)
    solid
    var(--metric-card-border);

  border-radius:
    var(--metric-card-radius);

  padding:
    var(--metric-card-padding);

  gap:
    var(--metric-card-gap);

  box-shadow:
    var(--metric-card-shadow);
*/


/* =======================================================
   I67. DATA DISPLAY GOVERNANCE
======================================================= */

/*
  DATA DISPLAY RULES

  1. Tables must use approved row heights and cell padding.

  2. Numeric values should use tabular number features.

  3. Numeric values should align consistently within a
     column.

  4. Table headers must remain visually distinct from body
     rows.

  5. Row hover states must not imply selection unless the
     row is actually selectable.

  6. Selected rows must use more than colour alone.

  7. Status cells must use approved state roles.

  8. Tables must remain usable with keyboard navigation
     where rows or controls are interactive.

  9. Responsive tables must preserve data meaning.

  10. Critical data must not disappear solely because the
      viewport becomes narrow.

  11. Mobile table transformations must expose the original
      column label beside each value.

  12. Sticky headers and columns must use approved surface
      and layer contracts.

  13. Summary totals must remain visually stronger than
      individual line items.

  14. Metric cards must present one primary value.

  15. Supporting metrics must remain subordinate to the
      primary value.

  16. Positive and negative changes must not rely on colour
      alone.

  17. Empty, loading, and error states must remain distinct.

  18. Charts must use approved semantic colours.

  19. Decorative chart effects must not reduce data clarity.

  20. Currency, dates, times, and identifiers must use
      their approved formatting contracts.

  21. Components must not create local table padding or row
      height values.

  22. Layout owns the placement of table and metric systems.

  23. Components own the visual presentation of records.

  24. Data state changes are activated through approved
      is-* state classes.

  25. Compatibility aliases remain until all data-display
      selectors have been audited.
*/

/* =========================================================
   PACKAGE J
   NAVIGATION + MENUS + TABS + WAYFINDING
========================================================= */

/*
  PURPOSE
  - Standardize navigation surfaces, links, menus, tabs,
    breadcrumbs, pagination cues, step navigation, sidebars,
    mobile navigation, and application wayfinding.
  - Support marketing websites, Ronnie OS, client portals,
    calculators, dashboards, and internal tools.
  - Separate navigation visuals from structural layout.

  RULES
  - Package F controls navigation structure and placement.
  - Package J controls navigation visual contracts.
  - Package H supplies icons and directional markers.
  - Package E supplies interaction and motion states.
  - JavaScript selects js-* hooks and toggles is-* states.
*/


/* =======================================================
   J1. NAVIGATION HEIGHT FOUNDATION
======================================================= */

--nav-h-xs:
  var(--space-8);

--nav-h-sm:
  var(--space-10);

--nav-h-md:
  var(--space-12);

--nav-h-lg:
  var(--dimension-130);

--nav-h-xl:
  var(--dimension-160);


/* =======================================================
   J2. SEMANTIC NAVIGATION HEIGHTS
======================================================= */

--site-header-h:
  var(--nav-h-lg);

--site-header-h-compact:
  var(--nav-h-md);

--utility-nav-h:
  var(--nav-h-sm);

--subnav-h:
  var(--nav-h-md);

--tab-list-h:
  var(--nav-h-md);

--mobile-nav-item-h:
  var(--nav-h-md);

--app-nav-item-h:
  var(--nav-h-md);


/* =======================================================
   J3. NAVIGATION SPACING FOUNDATION
======================================================= */

--navigation-gap-xs:
  var(--space-1);

--navigation-gap-sm:
  var(--space-2);

--navigation-gap-md:
  var(--space-3);

--navigation-gap-lg:
  var(--space-4);

--navigation-gap-xl:
  var(--space-6);

--navigation-gap-2xl:
  var(--space-8);


/* =======================================================
   J4. SEMANTIC NAVIGATION SPACING
======================================================= */

--site-nav-gap:
  var(--navigation-gap-xl);

--site-nav-item-gap:
  var(--navigation-gap-sm);

--utility-nav-gap:
  var(--navigation-gap-lg);

--subnav-gap:
  var(--navigation-gap-md);

--mobile-nav-gap:
  var(--navigation-gap-sm);

--app-nav-gap:
  var(--navigation-gap-xs);

--breadcrumb-gap:
  var(--navigation-gap-sm);

--tab-gap:
  var(--navigation-gap-xs);

--menu-item-gap:
  var(--navigation-gap-md);


/* =======================================================
   J5. NAVIGATION PADDING FOUNDATION
======================================================= */

--nav-padding-x-xs:
  var(--space-2);

--nav-padding-x-sm:
  var(--space-3);

--nav-padding-x-md:
  var(--space-4);

--nav-padding-x-lg:
  var(--space-5);

--nav-padding-x-xl:
  var(--space-6);


--nav-padding-y-xs:
  var(--space-1);

--nav-padding-y-sm:
  var(--space-2);

--nav-padding-y-md:
  var(--space-3);

--nav-padding-y-lg:
  var(--space-4);


/* =======================================================
   J6. NAVIGATION TYPOGRAPHY CONTRACT
======================================================= */

--nav-font:
  var(--type-nav-font);

--nav-size:
  var(--type-nav-size);

--nav-leading:
  var(--type-nav-leading);

--nav-weight:
  var(--type-nav-weight);

--nav-tracking:
  var(--type-nav-tracking);

--nav-transform:
  var(--type-nav-transform);


/* =======================================================
   J7. SITE HEADER SURFACE CONTRACT
======================================================= */

--site-header-bg:
  var(--surface-page-bg);

--site-header-bg-scrolled:
  var(--surface-glass-strong-bg);

--site-header-border:
  var(--border-quiet);

--site-header-border-scrolled:
  var(--border-light-subtle);

--site-header-shadow:
  none;

--site-header-shadow-scrolled:
  var(--elevation-sticky);

--site-header-blur:
  var(--glass-blur-md);

--site-header-opacity:
  var(--a-100);

--site-header-z:
  var(--layer-header);


/* =======================================================
   J8. SITE HEADER TRANSITION
======================================================= */

--site-header-transition:
  background-color
  var(--duration-md)
  var(--ease-standard),
  border-color
  var(--duration-md)
  var(--ease-standard),
  box-shadow
  var(--duration-md)
  var(--ease-standard),
  backdrop-filter
  var(--duration-md)
  var(--ease-standard),
  transform
  var(--duration-md)
  var(--ease-emphasized);


/* =======================================================
   J9. PRIMARY NAVIGATION LINK CONTRACT
======================================================= */

--nav-link-bg:
  transparent;

--nav-link-bg-hover:
  var(--surface-light-alpha-06);

--nav-link-bg-active:
  var(--surface-primary-muted);

--nav-link-bg-selected:
  var(--surface-primary-muted);

--nav-link-border:
  transparent;

--nav-link-border-hover:
  transparent;

--nav-link-border-active:
  var(--border-primary-default);

--nav-link-text:
  var(--fg-secondary);

--nav-link-text-hover:
  var(--fg-primary);

--nav-link-text-active:
  var(--brand-primary);

--nav-link-text-selected:
  var(--brand-primary);

--nav-link-icon:
  var(--icon-color-secondary);

--nav-link-icon-hover:
  var(--icon-color-primary);

--nav-link-icon-active:
  var(--brand-primary);

--nav-link-radius:
  var(--radius-md);

--nav-link-padding-x:
  var(--nav-padding-x-md);

--nav-link-padding-y:
  var(--nav-padding-y-sm);

--nav-link-gap:
  var(--site-nav-item-gap);

--nav-link-transition:
  var(--transition-interactive);


/* =======================================================
   J10. NAVIGATION ACTIVE INDICATOR
======================================================= */

--nav-active-indicator-bg:
  var(--brand-primary);

--nav-active-indicator-h:
  var(--stroke-3);

--nav-active-indicator-w:
  100%;

--nav-active-indicator-radius:
  var(--radius-pill);

--nav-active-indicator-offset:
  calc(var(--space-2) * -1);

--nav-active-indicator-shadow:
  var(--glow-primary-sm);


/* =======================================================
   J11. UTILITY NAVIGATION CONTRACT
======================================================= */

--utility-nav-bg:
  var(--surface-recessed-bg);

--utility-nav-border:
  var(--border-quiet);

--utility-nav-text:
  var(--fg-tertiary);

--utility-nav-text-hover:
  var(--fg-primary);

--utility-nav-icon:
  var(--fg-tertiary);

--utility-nav-icon-hover:
  var(--brand-primary);

--utility-nav-padding-x:
  var(--nav-padding-x-sm);

--utility-nav-padding-y:
  var(--nav-padding-y-xs);


/* =======================================================
   J12. SUBNAVIGATION CONTRACT
======================================================= */

--subnav-bg:
  var(--surface-level-2-bg);

--subnav-border:
  var(--border-default);

--subnav-shadow:
  var(--elevation-low);

--subnav-radius:
  var(--radius-lg);

--subnav-padding:
  var(--space-2);

--subnav-item-bg:
  transparent;

--subnav-item-bg-hover:
  var(--surface-light-alpha-06);

--subnav-item-bg-active:
  var(--surface-selected-bg);

--subnav-item-text:
  var(--fg-secondary);

--subnav-item-text-hover:
  var(--fg-primary);

--subnav-item-text-active:
  var(--brand-primary);


/* =======================================================
   J13. DROPDOWN MENU SHELL
======================================================= */

--menu-bg:
  var(--surface-floating-bg);

--menu-border:
  var(--surface-floating-border);

--menu-radius:
  var(--radius-lg);

--menu-shadow:
  var(--surface-floating-shadow);

--menu-blur:
  var(--glass-blur-md);

--menu-padding:
  var(--space-2);

--menu-min-w:
  var(--nav-dropdown-min-w);

--menu-max-w:
  var(--content-sm);

--menu-max-h:
  min(
  var(--viewport-cap-70),
    var(--dimension-540)
  );

--menu-z:
  var(--layer-dropdown);


/* =======================================================
   J14. DROPDOWN MENU ITEM CONTRACT
======================================================= */

--menu-item-bg:
  transparent;

--menu-item-bg-hover:
  var(--surface-light-alpha-08);

--menu-item-bg-active:
  var(--surface-selected-bg);

--menu-item-bg-disabled:
  transparent;

--menu-item-border:
  transparent;

--menu-item-text:
  var(--fg-secondary);

--menu-item-text-hover:
  var(--fg-primary);

--menu-item-text-active:
  var(--brand-primary);

--menu-item-text-disabled:
  var(--fg-disabled);

--menu-item-icon:
  var(--fg-tertiary);

--menu-item-icon-hover:
  var(--fg-primary);

--menu-item-icon-active:
  var(--brand-primary);

--menu-item-padding-x:
  var(--nav-padding-x-md);

--menu-item-padding-y:
  var(--nav-padding-y-sm);

--menu-item-radius:
  var(--radius-md);

--menu-item-min-h:
  var(--nav-h-sm);

--menu-item-transition:
  var(--transition-interactive);


/* =======================================================
   J15. MENU SECTION CONTRACT
======================================================= */

--menu-section-gap:
  var(--space-2);

--menu-section-padding:
  var(--space-2);

--menu-section-divider:
  var(--divider-default);

--menu-section-label:
  var(--fg-tertiary);

--menu-section-label-padding-x:
  var(--space-3);

--menu-section-label-padding-y:
  var(--space-2);


/* =======================================================
   J16. MENU SHORTCUT CONTRACT
======================================================= */

--menu-shortcut-text:
  var(--fg-tertiary);

--menu-shortcut-bg:
  var(--surface-recessed-bg);

--menu-shortcut-border:
  var(--border-quiet);

--menu-shortcut-radius:
  var(--radius-sm);

--menu-shortcut-padding-x:
  var(--space-2);

--menu-shortcut-padding-y:
  var(--space-1);

--menu-shortcut-gap:
  var(--space-1);


/* =======================================================
   J17. MEGA MENU CONTRACT
======================================================= */

--mega-menu-bg:
  var(--surface-floating-bg);

--mega-menu-border:
  var(--surface-floating-border);

--mega-menu-shadow:
  var(--elevation-overlay);

--mega-menu-radius:
  var(--radius-xl);

--mega-menu-padding:
  var(--space-6);

--mega-menu-gap:
  var(--gap-grid);

--mega-menu-column-gap:
  var(--space-4);

--mega-menu-heading:
  var(--fg-primary);

--mega-menu-text:
  var(--fg-secondary);

--mega-menu-link:
  var(--fg-secondary);

--mega-menu-link-hover:
  var(--brand-primary);


/* =======================================================
   J18. MOBILE NAVIGATION SHELL
======================================================= */

--mobile-nav-bg:
  var(--surface-page-bg);

--mobile-nav-border:
  var(--border-default);

--mobile-nav-shadow:
  var(--elevation-overlay);

--mobile-nav-blur:
  var(--glass-blur-lg);

--mobile-nav-padding-x:
  var(--space-container-x);

--mobile-nav-padding-y:
  var(--space-5);

--mobile-nav-max-h:
  calc(
    var(--viewport-h-dynamic) -
    var(--site-header-h)
  );

--mobile-nav-z:
  var(--layer-drawer);


/* =======================================================
   J19. MOBILE NAVIGATION ITEM
======================================================= */

--mobile-nav-item-bg:
  transparent;

--mobile-nav-item-bg-hover:
  var(--surface-light-alpha-06);

--mobile-nav-item-bg-active:
  var(--surface-primary-muted);

--mobile-nav-item-border:
  var(--divider-default);

--mobile-nav-item-text:
  var(--fg-primary);

--mobile-nav-item-text-active:
  var(--brand-primary);

--mobile-nav-item-icon:
  var(--fg-secondary);

--mobile-nav-item-icon-active:
  var(--brand-primary);

--mobile-nav-item-padding-x:
  var(--nav-padding-x-md);

--mobile-nav-item-padding-y:
  var(--nav-padding-y-md);

--mobile-nav-item-radius:
  var(--radius-md);


/* =======================================================
   J20. MOBILE NAVIGATION MOTION
======================================================= */

--mobile-nav-enter-duration:
  var(--drawer-motion-enter-duration);

--mobile-nav-enter-ease:
  var(--drawer-motion-enter-ease);

--mobile-nav-enter-distance:
  var(--drawer-motion-enter-distance);

--mobile-nav-enter-opacity:
  var(--drawer-motion-enter-opacity);

--mobile-nav-exit-duration:
  var(--drawer-motion-exit-duration);

--mobile-nav-exit-ease:
  var(--drawer-motion-exit-ease);

--mobile-nav-exit-distance:
  var(--drawer-motion-exit-distance);

--mobile-nav-exit-opacity:
  var(--drawer-motion-exit-opacity);


/* =======================================================
   J21. BREADCRUMB CONTRACT
======================================================= */

--breadcrumb-bg:
  transparent;

--breadcrumb-text:
  var(--fg-tertiary);

--breadcrumb-text-hover:
  var(--fg-primary);

--breadcrumb-text-current:
  var(--fg-secondary);

--breadcrumb-icon:
  var(--fg-disabled);

--breadcrumb-separator:
  var(--fg-disabled);

--breadcrumb-separator-size:
  var(--icon-size-xs);

--breadcrumb-padding-y:
  var(--space-2);

--breadcrumb-transition:
  var(--transition-colors);


/* =======================================================
   J22. TAB LIST SHELL
======================================================= */

--tab-list-bg:
  var(--surface-recessed-bg);

--tab-list-border:
  var(--border-default);

--tab-list-radius:
  var(--radius-lg);

--tab-list-padding:
  var(--space-1);

--tab-list-gap:
  var(--tab-gap);

--tab-list-shadow:
  var(--elevation-recessed);


/* =======================================================
   J23. TAB ITEM CONTRACT
======================================================= */

--tab-bg:
  transparent;

--tab-bg-hover:
  var(--surface-light-alpha-06);

--tab-bg-active:
  var(--surface-level-3-bg);

--tab-bg-disabled:
  transparent;

--tab-border:
  transparent;

--tab-border-active:
  var(--border-default);

--tab-text:
  var(--fg-secondary);

--tab-text-hover:
  var(--fg-primary);

--tab-text-active:
  var(--fg-primary);

--tab-text-disabled:
  var(--fg-disabled);

--tab-icon:
  var(--fg-tertiary);

--tab-icon-hover:
  var(--fg-primary);

--tab-icon-active:
  var(--brand-primary);

--tab-padding-x:
  var(--nav-padding-x-md);

--tab-padding-y:
  var(--nav-padding-y-sm);

--tab-radius:
  var(--radius-md);

--tab-shadow-active:
  var(--elevation-low);

--tab-transition:
  var(--transition-interactive);


/* =======================================================
   J24. UNDERLINE TAB CONTRACT
======================================================= */

--tab-underline-bg:
  transparent;

--tab-underline-border:
  var(--divider-default);

--tab-underline-active:
  var(--brand-primary);

--tab-underline-height:
  var(--stroke-3);

--tab-underline-radius:
  var(--radius-pill);

--tab-underline-offset:
  calc(var(--stroke-1) * -1);

--tab-underline-shadow:
  var(--glow-primary-sm);


/* =======================================================
   J25. VERTICAL TAB CONTRACT
======================================================= */

--vertical-tab-bg:
  transparent;

--vertical-tab-bg-hover:
  var(--surface-light-alpha-06);

--vertical-tab-bg-active:
  var(--surface-selected-bg);

--vertical-tab-border:
  transparent;

--vertical-tab-border-active:
  var(--border-primary);

--vertical-tab-indicator-w:
  var(--stroke-3);

--vertical-tab-padding-x:
  var(--space-4);

--vertical-tab-padding-y:
  var(--space-3);


/* =======================================================
   J26. SIDEBAR NAVIGATION SHELL
======================================================= */

--sidebar-nav-bg:
  var(--surface-level-1-bg);

--sidebar-nav-border:
  var(--border-default);

--sidebar-nav-shadow:
  none;

--sidebar-nav-padding:
  var(--space-3);

--sidebar-nav-gap:
  var(--app-nav-gap);

--sidebar-nav-radius:
  var(--radius-lg);


/* =======================================================
   J27. SIDEBAR NAVIGATION ITEM
======================================================= */

--sidebar-nav-item-bg:
  transparent;

--sidebar-nav-item-bg-hover:
  var(--surface-light-alpha-06);

--sidebar-nav-item-bg-active:
  var(--surface-primary-muted);

--sidebar-nav-item-border:
  transparent;

--sidebar-nav-item-border-active:
  var(--border-primary-default);

--sidebar-nav-item-text:
  var(--fg-secondary);

--sidebar-nav-item-text-hover:
  var(--fg-primary);

--sidebar-nav-item-text-active:
  var(--brand-primary);

--sidebar-nav-item-icon:
  var(--fg-tertiary);

--sidebar-nav-item-icon-hover:
  var(--fg-primary);

--sidebar-nav-item-icon-active:
  var(--brand-primary);

--sidebar-nav-item-padding-x:
  var(--space-3);

--sidebar-nav-item-padding-y:
  var(--space-3);

--sidebar-nav-item-gap:
  var(--space-3);

--sidebar-nav-item-radius:
  var(--radius-md);

--sidebar-nav-item-min-h:
  var(--app-nav-item-h);


/* =======================================================
   J28. SIDEBAR NAVIGATION GROUP
======================================================= */

--sidebar-nav-group-gap:
  var(--space-2);

--sidebar-nav-group-margin:
  var(--space-4);

--sidebar-nav-group-label:
  var(--fg-tertiary);

--sidebar-nav-group-divider:
  var(--divider-default);

--sidebar-nav-group-padding-x:
  var(--space-3);


/* =======================================================
   J29. APPLICATION TOP NAVIGATION
======================================================= */

--app-topnav-bg:
  var(--surface-panel-bg);

--app-topnav-border:
  var(--surface-panel-border);

--app-topnav-shadow:
  var(--elevation-low);

--app-topnav-padding-x:
  var(--space-5);

--app-topnav-padding-y:
  var(--space-3);

--app-topnav-gap:
  var(--space-4);

--app-topnav-z:
  var(--layer-sticky);


/* =======================================================
   J30. STEPPER NAVIGATION SHELL
======================================================= */

--step-nav-bg:
  transparent;

--step-nav-border:
  var(--divider-default);

--step-nav-gap:
  var(--space-4);

--step-nav-padding:
  var(--space-3);

--step-nav-line:
  var(--divider-default);

--step-nav-line-active:
  var(--brand-primary);

--step-nav-line-complete:
  var(--success-500);


/* =======================================================
   J31. STEPPER NAVIGATION ITEM
======================================================= */

--step-nav-item-text:
  var(--fg-tertiary);

--step-nav-item-text-active:
  var(--fg-primary);

--step-nav-item-text-complete:
  var(--success-500);

--step-nav-item-text-error:
  var(--danger-500);

--step-nav-item-marker-bg:
  var(--step-marker-bg);

--step-nav-item-marker-border:
  var(--step-marker-border);

--step-nav-item-marker-active-bg:
  var(--step-marker-active-bg);

--step-nav-item-marker-active-border:
  var(--step-marker-active-border);

--step-nav-item-marker-complete-bg:
  var(--step-marker-complete-bg);

--step-nav-item-marker-complete-border:
  var(--step-marker-complete-border);


/* =======================================================
   J32. PREVIOUS AND NEXT NAVIGATION
======================================================= */

--previous-next-bg:
  var(--surface-level-2-bg);

--previous-next-bg-hover:
  var(--surface-level-3-bg);

--previous-next-border:
  var(--border-default);

--previous-next-border-hover:
  var(--border-primary);

--previous-next-text:
  var(--fg-secondary);

--previous-next-text-hover:
  var(--fg-primary);

--previous-next-icon:
  var(--fg-tertiary);

--previous-next-icon-hover:
  var(--brand-primary);

--previous-next-padding:
  var(--space-4);

--previous-next-gap:
  var(--space-3);

--previous-next-radius:
  var(--radius-lg);


/* =======================================================
   J33. ANCHOR NAVIGATION CONTRACT
======================================================= */

--anchor-nav-bg:
  var(--surface-glass-subtle-bg);

--anchor-nav-border:
  var(--border-light-subtle);

--anchor-nav-shadow:
  var(--elevation-sticky);

--anchor-nav-blur:
  var(--glass-blur-md);

--anchor-nav-radius:
  var(--radius-pill);

--anchor-nav-padding:
  var(--space-2);

--anchor-nav-gap:
  var(--space-1);


/* =======================================================
   J34. ANCHOR NAVIGATION ITEM
======================================================= */

--anchor-nav-item-bg:
  transparent;

--anchor-nav-item-bg-hover:
  var(--surface-light-alpha-08);

--anchor-nav-item-bg-active:
  var(--surface-primary-muted);

--anchor-nav-item-text:
  var(--fg-secondary);

--anchor-nav-item-text-hover:
  var(--fg-primary);

--anchor-nav-item-text-active:
  var(--brand-primary);

--anchor-nav-item-radius:
  var(--radius-pill);

--anchor-nav-item-padding-x:
  var(--space-3);

--anchor-nav-item-padding-y:
  var(--space-2);


/* =======================================================
   J35. FOOTER NAVIGATION CONTRACT
======================================================= */

--footer-nav-heading:
  var(--fg-primary);

--footer-nav-link:
  var(--fg-secondary);

--footer-nav-link-hover:
  var(--brand-primary);

--footer-nav-icon:
  var(--fg-tertiary);

--footer-nav-icon-hover:
  var(--brand-primary);

--footer-nav-gap:
  var(--space-3);

--footer-nav-group-gap:
  var(--space-4);

--footer-nav-transition:
  var(--transition-colors);


/* =======================================================
   J36. LOGO NAVIGATION CONTRACT
======================================================= */

--nav-logo-w-sm:
  var(--media-size-logo-sm);

--nav-logo-w:
  var(--media-size-logo-md);

--nav-logo-w-lg:
  var(--media-size-logo-lg);

--nav-logo-max-h:
  var(--site-header-h-compact);

--nav-logo-opacity:
  var(--a-100);

--nav-logo-opacity-hover:
  var(--a-88);

--nav-logo-transition:
  opacity
  var(--duration-sm)
  var(--ease-standard),
  transform
  var(--duration-sm)
  var(--ease-emphasized);


/* =======================================================
   J37. NAVIGATION BADGE CONTRACT
======================================================= */

--nav-badge-bg:
  var(--surface-primary-muted);

--nav-badge-border:
  var(--border-primary-default);

--nav-badge-text:
  var(--brand-primary);

--nav-badge-radius:
  var(--radius-pill);

--nav-badge-padding-x:
  var(--space-2);

--nav-badge-padding-y:
  var(--space-1);

--nav-badge-gap:
  var(--space-1);


/* =======================================================
   J38. NAVIGATION COUNTER CONTRACT
======================================================= */

--nav-counter-size:
  var(--space-5);

--nav-counter-bg:
  var(--brand-primary);

--nav-counter-border:
  var(--surface-page-bg);

--nav-counter-text:
  var(--neutral-900);

--nav-counter-radius:
  var(--radius-round);

--nav-counter-offset-x:
  calc(var(--space-1) * -1);

--nav-counter-offset-y:
  calc(var(--space-1) * -1);


/* =======================================================
   J39. NAVIGATION DIVIDER CONTRACT
======================================================= */

--nav-divider-color:
  var(--divider-default);

--nav-divider-width:
  var(--stroke-1);

--nav-divider-length:
  var(--space-6);

--nav-divider-margin:
  var(--space-3);


/* =======================================================
   J40. NAVIGATION FOCUS CONTRACT
======================================================= */

--nav-focus-ring:
  var(--focus-ring);

--nav-focus-offset:
  var(--focus-offset);

--nav-focus-radius:
  var(--radius-md);

--nav-focus-color:
  var(--focus-color);


/* =======================================================
   J41. NAVIGATION DISABLED CONTRACT
======================================================= */

--nav-disabled-bg:
  transparent;

--nav-disabled-border:
  transparent;

--nav-disabled-text:
  var(--fg-disabled);

--nav-disabled-icon:
  var(--fg-disabled);

--nav-disabled-opacity:
  var(--state-disabled-opacity);

--nav-disabled-cursor:
  var(--cursor-disabled);


/* =======================================================
   J42. NAVIGATION LOADING CONTRACT
======================================================= */

--nav-loading-bg:
  var(--surface-light-alpha-04);

--nav-loading-text:
  var(--fg-secondary);

--nav-loading-icon:
  var(--brand-primary);

--nav-loading-opacity:
  var(--state-loading-opacity);

--nav-loading-cursor:
  var(--cursor-progress);


/* =======================================================
   J43. SKIP LINK CONTRACT
======================================================= */

--skip-link-bg:
  var(--brand-primary);

--skip-link-border:
  var(--brand-primary);

--skip-link-text:
  var(--neutral-900);

--skip-link-shadow:
  var(--elevation-overlay);

--skip-link-radius:
  var(--radius-md);

--skip-link-padding-x:
  var(--space-4);

--skip-link-padding-y:
  var(--space-3);

--skip-link-offset:
  var(--space-4);

--skip-link-z:
  var(--layer-maximum);


/* =======================================================
   J44. BACK-TO-TOP CONTRACT
======================================================= */

--back-top-size:
  var(--control-h-md);

--back-top-bg:
  var(--surface-floating-bg);

--back-top-bg-hover:
  var(--surface-primary-muted);

--back-top-border:
  var(--surface-floating-border);

--back-top-border-hover:
  var(--border-primary);

--back-top-icon:
  var(--fg-secondary);

--back-top-icon-hover:
  var(--brand-primary);

--back-top-radius:
  var(--radius-round);

--back-top-shadow:
  var(--surface-floating-shadow);

--back-top-offset-x:
  var(--space-5);

--back-top-offset-y:
  max(
    var(--space-5),
    var(--safe-area-bottom)
  );

--back-top-z:
  var(--layer-floating);


/* =======================================================
   J45. CURRENT PAGE INDICATOR
======================================================= */

--current-page-bg:
  var(--surface-primary-muted);

--current-page-border:
  var(--border-primary-default);

--current-page-text:
  var(--brand-primary);

--current-page-icon:
  var(--brand-primary);

--current-page-shadow:
  var(--glow-primary-sm);


/* =======================================================
   J46. NAVIGATION OVERLAY CONTRACT
======================================================= */

--nav-overlay-bg:
  var(--overlay-neutral-medium);

--nav-overlay-blur:
  var(--blur-sm);

--nav-overlay-opacity:
  var(--a-100);

--nav-overlay-z:
  var(--layer-overlay);

--nav-overlay-transition:
  var(--transition-overlay);


/* =======================================================
   J47. NAVIGATION MOTION CONTRACT
======================================================= */

--nav-motion-enter-duration:
  var(--dropdown-motion-enter-duration);

--nav-motion-enter-ease:
  var(--dropdown-motion-enter-ease);

--nav-motion-enter-y:
  var(--dropdown-motion-enter-y);

--nav-motion-enter-scale:
  var(--dropdown-motion-enter-scale);

--nav-motion-enter-opacity:
  var(--dropdown-motion-enter-opacity);

--nav-motion-exit-duration:
  var(--dropdown-motion-exit-duration);

--nav-motion-exit-ease:
  var(--dropdown-motion-exit-ease);

--nav-motion-exit-y:
  var(--dropdown-motion-exit-y);

--nav-motion-exit-opacity:
  var(--dropdown-motion-exit-opacity);


/* =======================================================
   J48. LEGACY NAVIGATION COMPATIBILITY
======================================================= */

--header-bg:
  var(--site-header-bg);

--header-bg-scrolled:
  var(--site-header-bg-scrolled);

--header-border:
  var(--site-header-border);

--header-shadow:
  var(--site-header-shadow-scrolled);

--header-height:
  var(--site-header-h);

--nav-link-color:
  var(--nav-link-text);

--nav-link-hover:
  var(--nav-link-text-hover);

--nav-link-active:
  var(--nav-link-text-active);

--dropdown-bg:
  var(--menu-bg);

--dropdown-border:
  var(--menu-border);

--dropdown-radius:
  var(--menu-radius);

--dropdown-shadow:
  var(--menu-shadow);


/* =======================================================
   J49. NAVIGATION RECIPE REFERENCE
======================================================= */

/*
  STANDARD NAVIGATION LINK

  display:
    inline-flex;

  align-items:
    center;

  min-height:
    var(--nav-h-sm);

  padding:
    var(--nav-link-padding-y)
    var(--nav-link-padding-x);

  gap:
    var(--nav-link-gap);

  background:
    var(--nav-link-bg);

  border:
    var(--stroke-1)
    solid
    var(--nav-link-border);

  border-radius:
    var(--nav-link-radius);

  color:
    var(--nav-link-text);

  transition:
    var(--nav-link-transition);


  STANDARD DROPDOWN MENU

  min-width:
    var(--menu-min-w);

  max-width:
    var(--menu-max-w);

  max-height:
    var(--menu-max-h);

  padding:
    var(--menu-padding);

  background:
    var(--menu-bg);

  border:
    var(--stroke-1)
    solid
    var(--menu-border);

  border-radius:
    var(--menu-radius);

  box-shadow:
    var(--menu-shadow);

  z-index:
    var(--menu-z);


  STANDARD TAB

  min-height:
    var(--tab-list-h);

  padding:
    var(--tab-padding-y)
    var(--tab-padding-x);

  gap:
    var(--tab-gap);

  background:
    var(--tab-bg);

  border-radius:
    var(--tab-radius);

  color:
    var(--tab-text);

  transition:
    var(--tab-transition);
*/


/* =======================================================
   J50. NAVIGATION GOVERNANCE
======================================================= */

/*
  NAVIGATION RULES

  1. Navigation structure belongs in layout.css.

  2. Navigation visuals belong in components.css.

  3. JavaScript selects js-* hooks only.

  4. JavaScript toggles is-* state classes only.

  5. CSS must never style js-* hooks.

  6. Current-page state must remain visually distinct.

  7. Hover must not be the only indicator of interactivity.

  8. Focus must remain visible for every navigation control.

  9. Mobile navigation must preserve logical document order.

  10. Dropdowns must support keyboard entry and exit.

  11. Menus must not open solely through hover when keyboard
      or touch users cannot access them.

  12. Navigation icons must remain subordinate to labels
      unless the control is intentionally icon-only.

  13. Icon-only navigation requires accessible names.

  14. Breadcrumbs describe hierarchy, not browsing history.

  15. Tabs switch related views within the same context.

  16. Links navigate to another location.

  17. Buttons perform an action.

  18. Tabs must not be implemented as links when they do not
      navigate.

  19. Links must not be implemented as buttons when they
      perform navigation.

  20. Active, selected, current, expanded, and focused states
      must remain semantically distinct.

  21. Disabled navigation must not remain keyboard
      actionable.

  22. Menu surfaces must consume approved elevation and
      overlay contracts.

  23. Large navigation systems must not compete with the
      page's primary focal point.

  24. Footer navigation remains visually quieter than the
      primary site navigation.

  25. Sticky navigation must use approved layout offsets and
      z-index roles.

  26. Mobile navigation must account for viewport safe areas.

  27. Navigation motion must respect reduced-motion settings.

  28. Skip links must become visible when focused.

  29. Current-location indicators must not rely only on
      colour.

  30. Compatibility aliases remain until all navigation
      selectors have been audited.
*/ }

/* =========================================================
   PASS 3
   RESPONSIVE SPATIAL CALIBRATION

   Purpose:
   - Preserve the Pass 1 desktop rhythm.
   - Compress repeated spacing at tablet and mobile sizes.
   - Keep hero / feature / standard / compact section roles
     visually distinct instead of flattening every section.
   - Let components inherit responsive spacing through
     semantic tokens rather than local selector overrides.
   - Preserve tool and form interaction geometry.
========================================================= */

@media (max-width: 64rem) {

  :root {

    --gap-grid-section:
      var(--space-8);

    --gap-grid-feature:
      var(--space-8);

    --space-card-padding-lg:
      var(--space-6);

    --space-stack-gap-editorial:
      var(--space-6);

  }

}


@media (max-width: 48rem) {

  :root {

    /* Section cadence */

    --space-section-y-sm:
      var(--space-5);

    --space-section-y:
      var(--space-6);

    --space-section-y-lg:
      var(--space-7);

    --space-section-y-hero:
      var(--space-8);

    --space-section-y-feature:
      var(--space-7);

    --space-section-y-cta:
      var(--space-7);

    --space-section-y-footer:
      var(--space-7);

    --space-section-y-tool:
      var(--space-6);

    --space-section-y-dashboard:
      var(--space-5);


    /* Grid cadence */

    --gap-grid:
      var(--space-4);

    --gap-grid-comfortable:
      var(--space-5);

    --gap-grid-loose:
      var(--space-5);

    --gap-grid-section:
      var(--space-6);

    --gap-grid-feature:
      var(--space-6);

    --gap-grid-dashboard:
      var(--space-4);


    /* Repeated content density */

    --space-card-padding-sm:
      var(--space-4);

    --space-card-padding:
      var(--space-4);

    --space-card-padding-lg:
      var(--space-5);

    --space-panel-padding:
      var(--space-4);

    --space-stack-gap-relaxed:
      var(--space-5);

    --space-stack-gap-loose:
      var(--space-6);

    --space-stack-gap-editorial:
      var(--space-6);

  }

}