/* ============================================================
   CORE SYSTEM
============================================================ */

/* Imports */
@import url('https://fonts.googleapis.com/css2?family=Merriweather:wght@400;700&family=Roboto:wght@400;700&display=swap');

/* ----------------------------
   Root Variables
---------------------------- */
:root {

  /* ================================
     Layout & Scale
  ==================================*/
  /* Spacing scale */
  --space-0: 0;
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;

  /* Breakpoints */
  --bp-xs: 480px;
  --bp-sm: 640px;
  --bp-md: 768px;
  --bp-lg: 1024px;
  --bp-xl: 1280px;
  --bp-xxl: 1536px;

  /* Z-index scale */
  --z-0: 0;
  --z-10: 10;
  --z-20: 20;
  --z-30: 30;
  --z-40: 40;
  --z-50: 50;
  --z-100: 100;
  --z-max: 2147483647;

  /* Readable widths */
  --max-w-prose: 65ch;
  --max-w-reading: 75ch;

  /* ================================
     Typography
  ==================================*/
  /* Fonts */
  --font-family-sans: 'Roboto', sans-serif;
  --font-family-serif: 'Merriweather', serif;

  /* Font sizes */
  --font-xxxxl: 4rem;
  --font-xxxl: 3rem;
  --font-xxl: 2rem;
  --font-xl: 1.5rem;
  --font-lg: 1.25rem;
  --font-md: 1rem;
  --font-sm: 0.875rem;
  --font-xs: 0.75rem;

  /* Line heights */
  --line-tightest: 1.1;
  --line-tighter: 1.2;
  --line-tight: 1.3;
  --line-normal: 1.5;
  --line-loose: 1.6;
  --line-looser: 1.75;
  --line-loosest: 2;

  /* Font weights */
  --extra-bold: 800;
  --bold: 700;
  --semi-bold: 600;
  --medium: 500;
  --regular: 400;
  --light: 300;
  --extra-light: 200;

  /* Letter spacing */
  --track-tighter: -0.06em;
  --track-tight: -0.02em;
  --track-normal: 0;
  --track-wide: 0.05em;
  --track-wider: 0.1em;

  /* ================================
     Color System
  ==================================*/
  /* Neutrals */
  --black: #000000;
  --white: #ffffff;
  --grey-100: #f5f5f5;
  --grey-200: #ececec;
  --grey-300: #e0e0e0;
  --grey-400: #bdbdbd;
  --grey-500: #9e9e9e;
  --grey-600: #757575;
  --grey-700: #616161;
  --grey-800: #424242;
  --grey-900: #212121;

  /* Surfaces & text */
  --surface: #ffffff;
  --text: #222222;
  --muted: #666666;
  --border: #949494;

  /* Semantic */
  --success: #1e7e34;
  --warning: #856404;
  --danger: #b02a37;
  --info: #0c5460;

  /* Reds */
  --red-1: #ffe5e5;
  --red-2: #ff9999;
  --red-3: #e63946;
  --red-4: #a4161a;
  --red-5: #4b0f10;

  /* Blues */
  --blue-1: #e6f0ff;
  --blue-2: #99c2ff;
  --blue-3: #1d4ed8;
  --blue-4: #12398f;
  --blue-5: #0a1f47;

  /* Greens */
  --green-1: #e6f9ed;
  --green-2: #8fe1a9;
  --green-3: #2d9c5e;
  --green-4: #166534;
  --green-5: #0a2d18;

  /* Purples */
  --purple-1: #f2e6ff;
  --purple-2: #c399f5;
  --purple-3: #7e22ce;
  --purple-4: #4b1380;
  --purple-5: #240740;

  /* Oranges */
  --orange-1: #fff3e6;
  --orange-2: #ffbd80;
  --orange-3: #f97316;
  --orange-4: #b45309;
  --orange-5: #431407;

  /* Brand */
  --rmt-green: #47B64B;

  /* ================================
     Borders & Radii
  ==================================*/
  /* Border widths */
  --border-none: 0;
  --border-xs: 1px;
  --border-sm: 2px;
  --border-md: 3px;
  --border-lg: 4px;
  --border-xl: 6px;
  --border-xxl: 8px;

  /* Border styles */
  --border-solid: solid;
  --border-dashed: dashed;
  --border-dotted: dotted;

  /* Corner rounding */
  --radius-0: 0;
  --radius-xxs: 2px;
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 20px;
  --radius-xxl: 28px;
  --radius-pill: 9999px;
  --radius-circle: 50%;

  /* ================================
     Shadows & Overlays
  ==================================*/
  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .08);
  --shadow-md: 0 4px 10px rgba(0, 0, 0, .12);
  --shadow-lg: 0 10px 20px rgba(0, 0, 0, .16);

  /* Overlays / scrims */
  --scrim-weak: rgba(0, 0, 0, .12);
  --scrim: rgba(0, 0, 0, .32);
  --scrim-strong: rgba(0, 0, 0, .56);
  --scrim-dm-weak: rgba(255, 255, 255, .08);
  --scrim-dm: rgba(255, 255, 255, .18);
  --scrim-dm-strong: rgba(255, 255, 255, .28);

  /* ================================
     Visual Effects
  ==================================*/
  /* Opacity */
  --opacity-0: 0;
  --opacity-10: .1;
  --opacity-20: .2;
  --opacity-40: .4;
  --opacity-60: .6;
  --opacity-80: .8;
  --opacity-100: 1;

  /* Aspect ratios */
  --ratio-square: 1/1;
  --ratio-video: 16/9;
  --ratio-photo: 4/3;
  --ratio-widescreen: 16/9;
  --ratio-extrawide: 16/7;
  --ratio-banner: 21/9;

  /* Blur / backdrop */
  --blur-sm: 2px;
  --blur-md: 6px;
  --blur-lg: 12px;
  --backdrop-blur-sm: 2px;
  --backdrop-blur-md: 6px;
  --backdrop-blur-lg: 12px;

  /* ================================
     Motion & Transitions
  ==================================*/
  /* Motion tokens */
  --t-instant: 0ms;
  --t-fast: 120ms;
  --t-med: 200ms;
  --t-slow: 320ms;
  --t-vslow: 480ms;

  /* Easing */
  --ease-std: cubic-bezier(.2, .8, .2, 1);
  --ease-in: cubic-bezier(.4, 0, 1, 1);
  --ease-out: cubic-bezier(0, 0, .2, 1);
  --ease-in-out: cubic-bezier(.4, 0, .2, 1);

  /* Hover scales */
  --hover-scale-sm: 1.02;
  --hover-scale-md: 1.04;
  --hover-scale-lg: 1.08;
}

/* @media (prefers-color-scheme: dark) {
  :root {
    --surface: #121212;
    --text: #e6e6e6;
    --muted: #b3b3b3;
    --border: #444444;

    --success: #53d17a;
    --warning: #ffc107;
    --danger: #ff6b6b;
    --info: #8ad8e4;
  }
} */

/* ----------------------------
   Base Styles
---------------------------- */
.body { font-family: var(--font-family-sans); margin: 0; }
html { box-sizing: border-box; }
*, *::before, *::after { box-sizing: inherit; }



@media (max-width: 768px) {
  :root {
    --font-xxxxl: 3.5rem;
    --font-xxxl: 2.5rem;
    --font-xxl: 1.75rem;   /* was still 2rem before */
    --font-xl: 1.25rem;
    --font-lg: 1.12rem;
  }
}

@media (max-width: 640px) {
  :root {
    --font-xxxxl: 3rem;
    --font-xxxl: 2.25rem;
    --font-xxl: 1.5rem;    /* shrink here too */
    --font-xl: 1.12rem;
    --font-lg: 1rem;
  }
}

@media (max-width: 480px) {
  :root {
    --font-xxxxl: 2.5rem;
    --font-xxxl: 2rem;
    --font-xxl: 1.25rem;   /* smallest */
    --font-xl: 1rem;
    --font-lg: 0.9rem;
  }
}




/* ============================================================
   LAYOUT & STRUCTURE
============================================================ */

/* ----------------------------
   Body Modes
---------------------------- */
.body-site {
  width: 100%;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
  overflow-y: auto;
}
.body-app {
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;
  overflow: hidden; /* UI manages scrolling */
}
.body-horiz {
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: row;
  overflow-x: auto;
  overflow-y: hidden;
}

/* ----------------------------
   Regions (Flex Containers)
---------------------------- */
.region-row { display: flex; flex-direction: row; }
.region-row-rev { display: flex; flex-direction: row-reverse; }
.region-col { display: flex; flex-direction: column; }
.region-col-rev { display: flex; flex-direction: column-reverse; }
.region-fluid { display: flex; flex-wrap: wrap; }
.region-center { display: flex; justify-content: center; align-items: center; }

/* ----------------------------
   Responsive Direction Overrides
---------------------------- */
@media (max-width: 480px) {
  .resp-xs { flex-direction: column !important; }
  .resp-xs-rev { flex-direction: column-reverse !important; }
}
@media (max-width: 640px) {
  .resp-sm { flex-direction: column !important; }
  .resp-sm-rev { flex-direction: column-reverse !important; }
}
@media (max-width: 768px) {
  .resp-md { flex-direction: column !important; }
  .resp-md-rev { flex-direction: column-reverse !important; }
}
@media (max-width: 1024px) {
  .resp-lg { flex-direction: column !important; }
  .resp-lg-rev { flex-direction: column-reverse !important; }
}

/* ----------------------------
   Wrappers & Containers
---------------------------- */
.wrapper { width: 100%; display: flex; flex-wrap: wrap; }

/* Constrained content */
.container {
  margin-left: auto;
  margin-right: auto;
  padding: 1rem;
  width: calc(100% - 2rem);
}
@media (min-width: 640px) {
  .container { padding: 1.5rem; width: calc(100% - 3rem); }
}
@media (min-width: 1024px) {
  .container { padding: 2rem; width: calc(100% - 4rem); }
}

/* Parallel container (flush on large, padded on small) */
.par-container {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding-top: 1rem;
  padding-bottom: 1rem;
  padding-left: 0;
  padding-right: 0;
}
@media (max-width: 1024px) {
  .par-container {
    padding-left: 1rem;
    padding-right: 1rem;
    width: calc(100% - 2rem);
  }
}
@media (max-width: 640px) {
  .par-container {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    width: calc(100% - 3rem);
  }
}

/* ----------------------------
   Gaps (with responsive overrides)
---------------------------- */
/* Base gap utilities */
.gap-0 { gap: var(--space-0); }
.gap-1 { gap: var(--space-1); }
.gap-2 { gap: var(--space-2); }
.gap-3 { gap: var(--space-3); }
.gap-4 { gap: var(--space-4); }
.gap-5 { gap: var(--space-5); }
.gap-6 { gap: var(--space-6); }
.gap-7 { gap: var(--space-7); }
.gap-8 { gap: var(--space-8); }
.gap-9 { gap: var(--space-9); }

@media (max-width: 640px) {
  .resp-sm-gap-1 { gap: var(--space-1) !important; }
  .resp-sm-gap-2 { gap: var(--space-2) !important; }
  .resp-sm-gap-3 { gap: var(--space-3) !important; }
  .resp-sm-gap-4 { gap: var(--space-4) !important; }
  .resp-sm-gap-5 { gap: var(--space-5) !important; }
  .resp-sm-gap-6 { gap: var(--space-6) !important; }
}
@media (max-width: 768px) {
  .resp-md-gap-1 { gap: var(--space-1) !important; }
  .resp-md-gap-2 { gap: var(--space-2) !important; }
  .resp-md-gap-3 { gap: var(--space-3) !important; }
  .resp-md-gap-4 { gap: var(--space-4) !important; }
  .resp-md-gap-5 { gap: var(--space-5) !important; }
  .resp-md-gap-6 { gap: var(--space-6) !important; }
}
@media (max-width: 1024px) {
  .resp-lg-gap-1 { gap: var(--space-1) !important; }
  .resp-lg-gap-2 { gap: var(--space-2) !important; }
  .resp-lg-gap-3 { gap: var(--space-3) !important; }
  .resp-lg-gap-4 { gap: var(--space-4) !important; }
  .resp-lg-gap-5 { gap: var(--space-5) !important; }
  .resp-lg-gap-6 { gap: var(--space-6) !important; }
}

/* ----------------------------
   Flex & Alignment Utilities
---------------------------- */
/* Flex Grow Utilities */
.fixed { flex: 0 0 auto; } /* note: name collides with positioning .fixed below */
.flex-1 { flex: 1 1 0%; }
.flex-2 { flex: 2 1 0%; }
.flex-3 { flex: 3 1 0%; }
.flex-4 { flex: 4 1 0%; }
.flex-5 { flex: 5 1 0%; }

/* Justify Content */
.justify-start { justify-content: flex-start; }
.justify-end { justify-content: flex-end; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.justify-around { justify-content: space-around; }
.justify-evenly { justify-content: space-evenly; }

/* Align Items */
.align-start { align-items: flex-start; }
.align-end { align-items: flex-end; }
.align-center { align-items: center; }
.align-baseline { align-items: baseline; }
.align-stretch { align-items: stretch; }

/* Align Self */
.self-auto { align-self: auto; }
.self-start { align-self: flex-start; }
.self-end { align-self: flex-end; }
.self-center { align-self: center; }
.self-baseline { align-self: baseline; }
.self-stretch { align-self: stretch; }



/* ============================================================
   SIZING
============================================================ */

.w-auto { width:auto; }
.h-auto { height:auto; }

/* ----------------------------
   Width Utilities (rem-based)
---------------------------- */
.w-1 { width:1rem; } .w-2 { width:2rem; } .w-3 { width:3rem; } .w-4 { width:4rem; }
.w-5 { width:5rem; } .w-6 { width:6rem; } .w-7 { width:7rem; } .w-8 { width:8rem; }
.w-9 { width:9rem; } .w-10 { width:10rem; } .w-11 { width:11rem; } .w-12 { width:12rem; }
.w-13 { width:13rem; } .w-14 { width:14rem; } .w-15 { width:15rem; } .w-16 { width:16rem; }
.w-20 { width:20rem; } .w-24 { width:24rem; } .w-28 { width:28rem; } .w-32 { width:32rem; }
.w-36 { width:36rem; } .w-40 { width:40rem; } .w-44 { width:44rem; } .w-48 { width:48rem; }
.w-52 { width:52rem; } .w-56 { width:56rem; } .w-60 { width:60rem; } .w-64 { width:64rem; }
.w-72 { width:72rem; } .w-80 { width:80rem; } .w-96 { width:96rem; } .w-106 {width:106rem; }
.w-112 { width:112rem; } .w-128 { width:128rem; }

/* ----------------------------
   Height Utilities (rem-based)
---------------------------- */
.h-1 { height:1rem; } .h-2 { height:2rem; } .h-3 { height:3rem; } .h-4 { height:4rem; }
.h-5 { height:5rem; } .h-6 { height:6rem; } .h-7 { height:7rem; } .h-8 { height:8rem; }
.h-9 { height:9rem; } .h-10 { height:10rem; } .h-11 { height:11rem; } .h-12 { height:12rem; }
.h-13 { height:13rem; } .h-14 { height:14rem; } .h-15 { height:15rem; } .h-16 { height:16rem; }
.h-20 { height:20rem; } .h-24 { height:24rem; } .h-28 { height:28rem; } .h-32 { height:32rem; }
.h-36 { height:36rem; } .h-40 { height:40rem; } .h-44 { height:44rem; } .h-48 { height:48rem; }
.h-52 { height:52rem; } .h-56 { height:56rem; } .h-60 { height:60rem; } .h-64 { height:64rem; }
.h-72 { height:72rem; } .h-80 { height:80rem; } .h-96 { height:96rem; } .h-112 { height:112rem; }
.h-128 { height:128rem; }

/* ----------------------------
   Max-Width Utilities (rem-based)
---------------------------- */
.max-w-1 { max-width:1rem; } .max-w-2 { max-width:2rem; } .max-w-3 { max-width:3rem; } .max-w-4 { max-width:4rem; }
.max-w-5 { max-width:5rem; } .max-w-6 { max-width:6rem; } .max-w-7 { max-width:7rem; } .max-w-8 { max-width:8rem; }
.max-w-9 { max-width:9rem; } .max-w-10 { max-width:10rem; } .max-w-11 { max-width:11rem; } .max-w-12 { max-width:12rem; }
.max-w-13 { max-width:13rem; } .max-w-14 { max-width:14rem; } .max-w-15 { max-width:15rem; } .max-w-16 { max-width:16rem; }
.max-w-20 { max-width:20rem; } .max-w-24 { max-width:24rem; } .max-w-28 { max-width:28rem; } .max-w-32 { max-width:32rem; }
.max-w-36 { max-width:36rem; } .max-w-40 { max-width:40rem; } .max-w-44 { max-width:44rem; } .max-w-48 { max-width:48rem; }
.max-w-52 { max-width:52rem; } .max-w-56 { max-width:56rem; } .max-w-60 { max-width:60rem; } .max-w-64 { max-width:64rem; }
.max-w-72 { max-width:72rem; } .max-w-80 { max-width:80rem; } .max-w-96 { max-width:96rem; } .max-w-106 {max-width:106rem; }
.max-w-112 { max-width:112rem; } .max-w-128 { max-width:128rem; }

/* ----------------------------
   Min-Width Utilities (rem-based)
---------------------------- */
.min-w-1 { min-width:1rem; } .min-w-2 { min-width:2rem; } .min-w-3 { min-width:3rem; } .min-w-4 { min-width:4rem; }
.min-w-5 { min-width:5rem; } .min-w-6 { min-width:6rem; } .min-w-7 { min-width:7rem; } .min-w-8 { min-width:8rem; }
.min-w-9 { min-width:9rem; } .min-w-10 { min-width:10rem; } .min-w-11 { min-width:11rem; } .min-w-12 { min-width:12rem; }
.min-w-13 { min-width:13rem; } .min-w-14 { min-width:14rem; } .min-w-15 { min-width:15rem; } .min-w-16 { min-width:16rem; }
.min-w-20 { min-width:20rem; } .min-w-24 { min-width:24rem; } .min-w-28 { min-width:28rem; } .min-w-32 { min-width:32rem; }
.min-w-36 { min-width:36rem; } .min-w-40 { min-width:40rem; } .min-w-44 { min-width:44rem; } .min-w-48 { min-width:48rem; }
.min-w-52 { min-width:52rem; } .min-w-56 { min-width:56rem; } .min-w-60 { min-width:60rem; } .min-w-64 { min-width:64rem; }
.min-w-72 { min-width:72rem; } .min-w-80 { min-width:80rem; } .min-w-96 { min-width:96rem; } .min-w-106 {min-width:106rem; }
.min-w-112 { min-width:112rem; } .min-w-128 { min-width:128rem; }

/* ----------------------------
   Max-Height Utilities (rem-based)
---------------------------- */
.max-h-1 { max-height:1rem; } .max-h-2 { max-height:2rem; } .max-h-3 { max-height:3rem; } .max-h-4 { max-height:4rem; }
.max-h-5 { max-height:5rem; } .max-h-6 { max-height:6rem; } .max-h-7 { max-height:7rem; } .max-h-8 { max-height:8rem; }
.max-h-9 { max-height:9rem; } .max-h-10 { max-height:10rem; } .max-h-11 { max-height:11rem; } .max-h-12 { max-height:12rem; }
.max-h-13 { max-height:13rem; } .max-h-14 { max-height:14rem; } .max-h-15 { max-height:15rem; } .max-h-16 { max-height:16rem; }
.max-h-20 { max-height:20rem; } .max-h-24 { max-height:24rem; } .max-h-28 { max-height:28rem; } .max-h-32 { max-height:32rem; }
.max-h-36 { max-height:36rem; } .max-h-40 { max-height:40rem; } .max-h-44 { max-height:44rem; } .max-h-48 { max-height:48rem; }
.max-h-52 { max-height:52rem; } .max-h-56 { max-height:56rem; } .max-h-60 { max-height:60rem; } .max-h-64 { max-height:64rem; }
.max-h-72 { max-height:72rem; } .max-h-80 { max-height:80rem; } .max-h-96 { max-height:96rem; } .max-h-112 { max-height:112rem; }
.max-h-128 { max-height:128rem; }

/* ----------------------------
   Min-Height Utilities (rem-based)
---------------------------- */
.min-h-1 { min-height:1rem; } .min-h-2 { min-height:2rem; } .min-h-3 { min-height:3rem; } .min-h-4 { min-height:4rem; }
.min-h-5 { min-height:5rem; } .min-h-6 { min-height:6rem; } .min-h-7 { min-height:7rem; } .min-h-8 { min-height:8rem; }
.min-h-9 { min-height:9rem; } .min-h-10 { min-height:10rem; } .min-h-11 { min-height:11rem; } .min-h-12 { min-height:12rem; }
.min-h-13 { min-height:13rem; } .min-h-14 { min-height:14rem; } .min-h-15 { min-height:15rem; } .min-h-16 { min-height:16rem; }
.min-h-20 { min-height:20rem; } .min-h-24 { min-height:24rem; } .min-h-28 { min-height:28rem; } .min-h-32 { min-height:32rem; }
.min-h-36 { min-height:36rem; } .min-h-40 { min-height:40rem; } .min-h-44 { min-height:44rem; } .min-h-48 { min-height:48rem; }
.min-h-52 { min-height:52rem; } .min-h-56 { min-height:56rem; } .min-h-60 { min-height:60rem; } .min-h-64 { min-height:64rem; }
.min-h-72 { min-height:72rem; } .min-h-80 { min-height:80rem; } .min-h-96 { min-height:96rem; } .min-h-112 { min-height:112rem; }
.min-h-128 { min-height:128rem; }

/* ----------------------------
   Percentages (width/height)
---------------------------- */
.max-w-1\/4 { max-width:25%; }
.max-w-1\/3 { max-width:33.333%; }
.max-w-1\/2 { max-width:50%; }
.max-w-2\/3 { max-width:66.667%; }
.max-w-3\/4 { max-width:75%; }
.max-w-full { max-width:100%; }
.min-w-full { min-width:100%; }

.w-1\/4 { width:25%; }
.w-1\/3 { width:33.333%; }
.w-1\/2 { width:50%; }
.w-2\/3 { width:66.667%; }
.w-3\/4 { width:75%; }
.w-full { width:100%; }

.max-h-1\/4 { max-height:25%; }
.max-h-1\/3 { max-height:33.333%; }
.max-h-1\/2 { max-height:50%; }
.max-h-2\/3 { max-height:66.667%; }
.max-h-3\/4 { max-height:75%; }
.max-h-full { max-height:100%; }
.min-h-full { min-height:100%; }

.h-1\/4 { height:25%; }
.h-1\/3 { height:33.333%; }
.h-1\/2 { height:50%; }
.h-2\/3 { height:66.667%; }
.h-3\/4 { height:75%; }
.h-full { height:100%; }


/* ----------------------------
   Screen-based Sizes
---------------------------- */
.max-w-screen { max-width:100vw; }
.min-w-screen { min-width:100vw; }
.max-h-screen { max-height:100vh; }
.min-h-screen { min-height:100vh; }




/* ============================================================
   DISPLAY & VISIBILITY
============================================================ */
.block { display: block; }
.inline { display: inline; }
.inline-block { display: inline-block; }
.hidden { display: none; }

.visible { visibility: visible; }
.invisible { visibility: hidden; }

/* Hide at or below breakpoints */
@media (max-width: 480px)  { .hidden-xs  { display: none !important; } }
@media (max-width: 640px)  { .hidden-sm  { display: none !important; } }
@media (max-width: 768px)  { .hidden-md  { display: none !important; } }
@media (max-width: 1024px) { .hidden-lg  { display: none !important; } }
@media (max-width: 1280px) { .hidden-xl  { display: none !important; } }
@media (max-width: 1536px) { .hidden-xxl { display: none !important; } }

/* Show only at or below breakpoints */
@media (max-width: 480px)  { .block-xs  { display: block !important; } }
@media (max-width: 640px)  { .block-sm  { display: block !important; } }
@media (max-width: 768px)  { .block-md  { display: block !important; } }
@media (max-width: 1024px) { .block-lg  { display: block !important; } }
@media (max-width: 1280px) { .block-xl  { display: block !important; } }
@media (max-width: 1536px) { .block-xxl { display: block !important; } }

/* Show only at or above breakpoints (pair with .hidden) */
@media (min-width: 480px)  { .block-xs-up  { display: block !important; } }
@media (min-width: 640px)  { .block-sm-up  { display: block !important; } }
@media (min-width: 768px)  { .block-md-up  { display: block !important; } }
@media (min-width: 1024px) { .block-lg-up  { display: block !important; } }
@media (min-width: 1280px) { .block-xl-up  { display: block !important; } }
@media (min-width: 1536px) { .block-xxl-up { display: block !important; } }

/* Show only at or below breakpoints: GRID */
@media (max-width: 480px)  { .grid-xs  { display: grid !important; } }
@media (max-width: 640px)  { .grid-sm  { display: grid !important; } }
@media (max-width: 768px)  { .grid-md  { display: grid !important; } }
@media (max-width: 1024px) { .grid-lg  { display: grid !important; } }
@media (max-width: 1280px) { .grid-xl  { display: grid !important; } }
@media (max-width: 1536px) { .grid-xxl { display: grid !important; } }

/* Show only at or above breakpoints: GRID */
@media (min-width: 480px)  { .grid-xs-up  { display: grid !important; } }
@media (min-width: 640px)  { .grid-sm-up  { display: grid !important; } }
@media (min-width: 768px)  { .grid-md-up  { display: grid !important; } }
@media (min-width: 1024px) { .grid-lg-up  { display: grid !important; } }
@media (min-width: 1280px) { .grid-xl-up  { display: grid !important; } }
@media (min-width: 1536px) { .grid-xxl-up { display: grid !important; } }

/* Show only at or below breakpoints: FLEX */
@media (max-width: 480px)  { .flex-xs  { display: flex !important; } }
@media (max-width: 640px)  { .flex-sm  { display: flex !important; } }
@media (max-width: 768px)  { .flex-md  { display: flex !important; } }
@media (max-width: 1024px) { .flex-lg  { display: flex !important; } }
@media (max-width: 1280px) { .flex-xl  { display: flex !important; } }
@media (max-width: 1536px) { .flex-xxl { display: flex !important; } }

/* Show only at or above breakpoints: FLEX */
@media (min-width: 480px)  { .flex-xs-up  { display: flex !important; } }
@media (min-width: 640px)  { .flex-sm-up  { display: flex !important; } }
@media (min-width: 768px)  { .flex-md-up  { display: flex !important; } }
@media (min-width: 1024px) { .flex-lg-up  { display: flex !important; } }
@media (min-width: 1280px) { .flex-xl-up  { display: flex !important; } }
@media (min-width: 1536px) { .flex-xxl-up { display: flex !important; } }





/* ============================================================
   POSITIONING
============================================================ */
.relative { position: relative; }
.absolute { position: absolute; }
.fixed    { position: fixed; }   /* note: also defined above as flex utility */
.sticky   { position: sticky; }

.top-0 { top: 0; } .right-0 { right: 0; } .bottom-0 { bottom: 0; } .left-0 { left: 0; }

/* Vertical placement */
.pos-top     { top: 0; bottom: auto; transform: none; }
.pos-middle  { top: 50%; bottom: auto; transform: translateY(-50%); }
.pos-bottom  { bottom: 0; top: auto; transform: none; }

/* Horizontal placement */
.pos-left    { left: 0; right: auto; transform: none; }
.pos-center  { left: 50%; right: auto; transform: translateX(-50%); }
.pos-right   { right: 0; left: auto; transform: none; }

/* Combined centering */
.pos-center-middle { 
  top: 50%; left: 50%; 
  transform: translate(-50%, -50%); 
}

/* Z-Index */
.z-0     { z-index: var(--z-0); }
.z-10    { z-index: var(--z-10); }
.z-20    { z-index: var(--z-20); }
.z-30    { z-index: var(--z-30); }
.z-40    { z-index: var(--z-40); }
.z-50    { z-index: var(--z-50); }
.z-100   { z-index: var(--z-100); }
.z-max   { z-index: var(--z-max); }




/* ============================================================
   SPACING (Margins & Padding)
============================================================ */

/* ----------------------------
   Margin (per side, axis, auto)
---------------------------- */
.mt-0 { margin-top: var(--space-0); }
.mt-1 { margin-top: var(--space-1); }
.mt-2 { margin-top: var(--space-2); }
.mt-3 { margin-top: var(--space-3); }
.mt-4 { margin-top: var(--space-4); }
.mt-5 { margin-top: var(--space-5); }
.mt-6 { margin-top: var(--space-6); }
.mt-7 { margin-top: var(--space-7); }
.mt-8 { margin-top: var(--space-8); }
.mt-auto { margin-top: auto; }

.mr-0 { margin-right: var(--space-0); }
.mr-1 { margin-right: var(--space-1); }
.mr-2 { margin-right: var(--space-2); }
.mr-3 { margin-right: var(--space-3); }
.mr-4 { margin-right: var(--space-4); }
.mr-5 { margin-right: var(--space-5); }
.mr-6 { margin-right: var(--space-6); }
.mr-auto { margin-right: auto; }

.mb-0 { margin-bottom: var(--space-0); }
.mb-1 { margin-bottom: var(--space-1); }
.mb-2 { margin-bottom: var(--space-2); }
.mb-3 { margin-bottom: var(--space-3); }
.mb-4 { margin-bottom: var(--space-4); }
.mb-5 { margin-bottom: var(--space-5); }
.mb-6 { margin-bottom: var(--space-6); }
.mb-auto { margin-bottom: auto; }

.ml-0 { margin-left: var(--space-0); }
.ml-1 { margin-left: var(--space-1); }
.ml-2 { margin-left: var(--space-2); }
.ml-3 { margin-left: var(--space-3); }
.ml-4 { margin-left: var(--space-4); }
.ml-5 { margin-left: var(--space-5); }
.ml-6 { margin-left: var(--space-6); }
.ml-auto { margin-left: auto; }

.m-0 { margin: var(--space-0); }
.m-1 { margin: var(--space-1); }
.m-2 { margin: var(--space-2); }
.m-3 { margin: var(--space-3); }
.m-4 { margin: var(--space-4); }
.m-5 { margin: var(--space-5); }
.m-6 { margin: var(--space-6); }
.m-auto { margin: auto; }

.my-0 { margin-top: var(--space-0); margin-bottom: var(--space-0); }
.my-1 { margin-top: var(--space-1); margin-bottom: var(--space-1); }
.my-2 { margin-top: var(--space-2); margin-bottom: var(--space-2); }
.my-3 { margin-top: var(--space-3); margin-bottom: var(--space-3); }
.my-4 { margin-top: var(--space-4); margin-bottom: var(--space-4); }
.my-5 { margin-top: var(--space-5); margin-bottom: var(--space-5); }
.my-6 { margin-top: var(--space-6); margin-bottom: var(--space-6); }
.my-7 { margin-top: var(--space-7); margin-bottom: var(--space-7); }
.my-8 { margin-top: var(--space-8); margin-bottom: var(--space-8); }
.my-auto { margin-top: auto; margin-bottom: auto; }

.mx-0 { margin-left: var(--space-0); margin-right: var(--space-0); }
.mx-1 { margin-left: var(--space-1); margin-right: var(--space-1); }
.mx-2 { margin-left: var(--space-2); margin-right: var(--space-2); }
.mx-3 { margin-left: var(--space-3); margin-right: var(--space-3); }
.mx-4 { margin-left: var(--space-4); margin-right: var(--space-4); }
.mx-5 { margin-left: var(--space-5); margin-right: var(--space-5); }
.mx-6 { margin-left: var(--space-6); margin-right: var(--space-6); }
.mx-auto { margin-left: auto; margin-right: auto; }

/* Negative margins (per side) */
.mt-neg-1 { margin-top: calc(var(--space-1) * -1); }
.mt-neg-2 { margin-top: calc(var(--space-2) * -1); }
.mt-neg-3 { margin-top: calc(var(--space-3) * -1); }
.mt-neg-4 { margin-top: calc(var(--space-4) * -1); }
.mt-neg-5 { margin-top: calc(var(--space-5) * -1); }
.mt-neg-6 { margin-top: calc(var(--space-6) * -1); }

.mr-neg-1 { margin-right: calc(var(--space-1) * -1); }
.mr-neg-2 { margin-right: calc(var(--space-2) * -1); }
.mr-neg-3 { margin-right: calc(var(--space-3) * -1); }
.mr-neg-4 { margin-right: calc(var(--space-4) * -1); }
.mr-neg-5 { margin-right: calc(var(--space-5) * -1); }
.mr-neg-6 { margin-right: calc(var(--space-6) * -1); }

.mb-neg-1 { margin-bottom: calc(var(--space-1) * -1); }
.mb-neg-2 { margin-bottom: calc(var(--space-2) * -1); }
.mb-neg-3 { margin-bottom: calc(var(--space-3) * -1); }
.mb-neg-4 { margin-bottom: calc(var(--space-4) * -1); }
.mb-neg-5 { margin-bottom: calc(var(--space-5) * -1); }
.mb-neg-6 { margin-bottom: calc(var(--space-6) * -1); }

.ml-neg-1 { margin-left: calc(var(--space-1) * -1); }
.ml-neg-2 { margin-left: calc(var(--space-2) * -1); }
.ml-neg-3 { margin-left: calc(var(--space-3) * -1); }
.ml-neg-4 { margin-left: calc(var(--space-4) * -1); }
.ml-neg-5 { margin-left: calc(var(--space-5) * -1); }
.ml-neg-6 { margin-left: calc(var(--space-6) * -1); }

/* ----------------------------
   Padding (per side, axis, negative)
---------------------------- */
.pt-0 { padding-top: var(--space-0); }
.pt-1 { padding-top: var(--space-1); }
.pt-2 { padding-top: var(--space-2); }
.pt-3 { padding-top: var(--space-3); }
.pt-4 { padding-top: var(--space-4); }
.pt-5 { padding-top: var(--space-5); }
.pt-6 { padding-top: var(--space-6); }

.pr-0 { padding-right: var(--space-0); }
.pr-1 { padding-right: var(--space-1); }
.pr-2 { padding-right: var(--space-2); }
.pr-3 { padding-right: var(--space-3); }
.pr-4 { padding-right: var(--space-4); }
.pr-5 { padding-right: var(--space-5); }
.pr-6 { padding-right: var(--space-6); }

.pb-0 { padding-bottom: var(--space-0); }
.pb-1 { padding-bottom: var(--space-1); }
.pb-2 { padding-bottom: var(--space-2); }
.pb-3 { padding-bottom: var(--space-3); }
.pb-4 { padding-bottom: var(--space-4); }
.pb-5 { padding-bottom: var(--space-5); }
.pb-6 { padding-bottom: var(--space-6); }

.pl-0 { padding-left: var(--space-0); }
.pl-1 { padding-left: var(--space-1); }
.pl-2 { padding-left: var(--space-2); }
.pl-3 { padding-left: var(--space-3); }
.pl-4 { padding-left: var(--space-4); }
.pl-5 { padding-left: var(--space-5); }
.pl-6 { padding-left: var(--space-6); }

.p-0 { padding: var(--space-0); }
.p-1 { padding: var(--space-1); }
.p-2 { padding: var(--space-2); }
.p-3 { padding: var(--space-3); }
.p-4 { padding: var(--space-4); }
.p-5 { padding: var(--space-5); }
.p-6 { padding: var(--space-6); }
.p-7 { padding: var(--space-7); }
.p-8 { padding: var(--space-8); }
.p-9 { padding: var(--space-9); }

.py-0 { padding-top: var(--space-0); padding-bottom: var(--space-0); }
.py-1 { padding-top: var(--space-1); padding-bottom: var(--space-1); }
.py-2 { padding-top: var(--space-2); padding-bottom: var(--space-2); }
.py-3 { padding-top: var(--space-3); padding-bottom: var(--space-3); }
.py-4 { padding-top: var(--space-4); padding-bottom: var(--space-4); }
.py-5 { padding-top: var(--space-5); padding-bottom: var(--space-5); }
.py-6 { padding-top: var(--space-6); padding-bottom: var(--space-6); }

.px-0 { padding-left: var(--space-0); padding-right: var(--space-0); }
.px-1 { padding-left: var(--space-1); padding-right: var(--space-1); }
.px-2 { padding-left: var(--space-2); padding-right: var(--space-2); }
.px-3 { padding-left: var(--space-3); padding-right: var(--space-3); }
.px-4 { padding-left: var(--space-4); padding-right: var(--space-4); }
.px-5 { padding-left: var(--space-5); padding-right: var(--space-5); }
.px-6 { padding-left: var(--space-6); padding-right: var(--space-6); }

/* Negative padding (per side) */
.pt-neg-1 { padding-top: calc(var(--space-1) * -1); }
.pt-neg-2 { padding-top: calc(var(--space-2) * -1); }
.pt-neg-3 { padding-top: calc(var(--space-3) * -1); }
.pt-neg-4 { padding-top: calc(var(--space-4) * -1); }
.pt-neg-5 { padding-top: calc(var(--space-5) * -1); }
.pt-neg-6 { padding-top: calc(var(--space-6) * -1); }

.pr-neg-1 { padding-right: calc(var(--space-1) * -1); }
.pr-neg-2 { padding-right: calc(var(--space-2) * -1); }
.pr-neg-3 { padding-right: calc(var(--space-3) * -1); }
.pr-neg-4 { padding-right: calc(var(--space-4) * -1); }
.pr-neg-5 { padding-right: calc(var(--space-5) * -1); }
.pr-neg-6 { padding-right: calc(var(--space-6) * -1); }

.pb-neg-1 { padding-bottom: calc(var(--space-1) * -1); }
.pb-neg-2 { padding-bottom: calc(var(--space-2) * -1); }
.pb-neg-3 { padding-bottom: calc(var(--space-3) * -1); }
.pb-neg-4 { padding-bottom: calc(var(--space-4) * -1); }
.pb-neg-5 { padding-bottom: calc(var(--space-5) * -1); }
.pb-neg-6 { padding-bottom: calc(var(--space-6) * -1); }

.pl-neg-1 { padding-left: calc(var(--space-1) * -1); }
.pl-neg-2 { padding-left: calc(var(--space-2) * -1); }
.pl-neg-3 { padding-left: calc(var(--space-3) * -1); }
.pl-neg-4 { padding-left: calc(var(--space-4) * -1); }
.pl-neg-5 { padding-left: calc(var(--space-5) * -1); }
.pl-neg-6 { padding-left: calc(var(--space-6) * -1); }



/* ============================================================
   GRID
============================================================ */
.grid { display: grid; }

.grid-cols-1 { grid-template-columns: repeat(1, 1fr); }
.grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
.grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
.grid-cols-4 { grid-template-columns: repeat(4, 1fr); }
.grid-cols-5 { grid-template-columns: repeat(5, 1fr); }
.grid-cols-6 { grid-template-columns: repeat(6, 1fr); }
.grid-cols-12 { grid-template-columns: repeat(12, 1fr); }

/* ========== MAX-WIDTH (down) ==========
   Largest → smallest so smaller overrides larger
======================================== */

/* XXL (≤1536px) */
@media (max-width: 1536px) {
   .grid-cols-1-xxl {
      grid-template-columns: repeat(1, 1fr) !important;
   }

   .grid-cols-2-xxl {
      grid-template-columns: repeat(2, 1fr) !important;
   }

   .grid-cols-3-xxl {
      grid-template-columns: repeat(3, 1fr) !important;
   }

   .grid-cols-4-xxl {
      grid-template-columns: repeat(4, 1fr) !important;
   }

   .grid-cols-6-xxl {
      grid-template-columns: repeat(6, 1fr) !important;
   }

   .grid-cols-12-xxl {
      grid-template-columns: repeat(12, 1fr) !important;
   }
}

/* XL (≤1280px) */
@media (max-width: 1280px) {
   .grid-cols-1-xl {
      grid-template-columns: repeat(1, 1fr) !important;
   }

   .grid-cols-2-xl {
      grid-template-columns: repeat(2, 1fr) !important;
   }

   .grid-cols-3-xl {
      grid-template-columns: repeat(3, 1fr) !important;
   }

   .grid-cols-4-xl {
      grid-template-columns: repeat(4, 1fr) !important;
   }

   .grid-cols-6-xl {
      grid-template-columns: repeat(6, 1fr) !important;
   }

   .grid-cols-12-xl {
      grid-template-columns: repeat(12, 1fr) !important;
   }
}

/* LG (≤1024px) */
@media (max-width: 1024px) {
   .grid-cols-1-lg {
      grid-template-columns: repeat(1, 1fr) !important;
   }

   .grid-cols-2-lg {
      grid-template-columns: repeat(2, 1fr) !important;
   }

   .grid-cols-3-lg {
      grid-template-columns: repeat(3, 1fr) !important;
   }

   .grid-cols-4-lg {
      grid-template-columns: repeat(4, 1fr) !important;
   }

   .grid-cols-6-lg {
      grid-template-columns: repeat(6, 1fr) !important;
   }

   .grid-cols-12-lg {
      grid-template-columns: repeat(12, 1fr) !important;
   }
}

/* MD (≤768px) */
@media (max-width: 768px) {
   .grid-cols-1-md {
      grid-template-columns: repeat(1, 1fr) !important;
   }

   .grid-cols-2-md {
      grid-template-columns: repeat(2, 1fr) !important;
   }

   .grid-cols-3-md {
      grid-template-columns: repeat(3, 1fr) !important;
   }

   .grid-cols-4-md {
      grid-template-columns: repeat(4, 1fr) !important;
   }

   .grid-cols-6-md {
      grid-template-columns: repeat(6, 1fr) !important;
   }

   .grid-cols-12-md {
      grid-template-columns: repeat(12, 1fr) !important;
   }
}

/* SM (≤640px) */
@media (max-width: 640px) {
   .grid-cols-1-sm {
      grid-template-columns: repeat(1, 1fr) !important;
   }

   .grid-cols-2-sm {
      grid-template-columns: repeat(2, 1fr) !important;
   }

   .grid-cols-3-sm {
      grid-template-columns: repeat(3, 1fr) !important;
   }

   .grid-cols-4-sm {
      grid-template-columns: repeat(4, 1fr) !important;
   }

   .grid-cols-6-sm {
      grid-template-columns: repeat(6, 1fr) !important;
   }

   .grid-cols-12-sm {
      grid-template-columns: repeat(12, 1fr) !important;
   }
}

/* XS (≤480px) */
@media (max-width: 480px) {
   .grid-cols-1-xs {
      grid-template-columns: repeat(1, 1fr) !important;
   }

   .grid-cols-2-xs {
      grid-template-columns: repeat(2, 1fr) !important;
   }

   .grid-cols-3-xs {
      grid-template-columns: repeat(3, 1fr) !important;
   }

   .grid-cols-4-xs {
      grid-template-columns: repeat(4, 1fr) !important;
   }

   .grid-cols-6-xs {
      grid-template-columns: repeat(6, 1fr) !important;
   }

   .grid-cols-12-xs {
      grid-template-columns: repeat(12, 1fr) !important;
   }
}


/* ========== MIN-WIDTH (up) ==========
    Smallest → largest so larger builds on smaller
 ======================================== */

/* XS (≥480px) */
@media (min-width: 480px) {
   .grid-cols-1-xs-up {
      grid-template-columns: repeat(1, 1fr) !important;
   }

   .grid-cols-2-xs-up {
      grid-template-columns: repeat(2, 1fr) !important;
   }

   .grid-cols-3-xs-up {
      grid-template-columns: repeat(3, 1fr) !important;
   }

   .grid-cols-4-xs-up {
      grid-template-columns: repeat(4, 1fr) !important;
   }

   .grid-cols-6-xs-up {
      grid-template-columns: repeat(6, 1fr) !important;
   }

   .grid-cols-12-xs-up {
      grid-template-columns: repeat(12, 1fr) !important;
   }
}

/* SM (≥640px) */
@media (min-width: 640px) {
   .grid-cols-1-sm-up {
      grid-template-columns: repeat(1, 1fr) !important;
   }

   .grid-cols-2-sm-up {
      grid-template-columns: repeat(2, 1fr) !important;
   }

   .grid-cols-3-sm-up {
      grid-template-columns: repeat(3, 1fr) !important;
   }

   .grid-cols-4-sm-up {
      grid-template-columns: repeat(4, 1fr) !important;
   }

   .grid-cols-6-sm-up {
      grid-template-columns: repeat(6, 1fr) !important;
   }

   .grid-cols-12-sm-up {
      grid-template-columns: repeat(12, 1fr) !important;
   }
}

/* MD (≥768px) */
@media (min-width: 768px) {
   .grid-cols-1-md-up {
      grid-template-columns: repeat(1, 1fr) !important;
   }

   .grid-cols-2-md-up {
      grid-template-columns: repeat(2, 1fr) !important;
   }

   .grid-cols-3-md-up {
      grid-template-columns: repeat(3, 1fr) !important;
   }

   .grid-cols-4-md-up {
      grid-template-columns: repeat(4, 1fr) !important;
   }

   .grid-cols-6-md-up {
      grid-template-columns: repeat(6, 1fr) !important;
   }

   .grid-cols-12-md-up {
      grid-template-columns: repeat(12, 1fr) !important;
   }
}

/* LG (≥1024px) */
@media (min-width: 1024px) {
   .grid-cols-1-lg-up {
      grid-template-columns: repeat(1, 1fr) !important;
   }

   .grid-cols-2-lg-up {
      grid-template-columns: repeat(2, 1fr) !important;
   }

   .grid-cols-3-lg-up {
      grid-template-columns: repeat(3, 1fr) !important;
   }

   .grid-cols-4-lg-up {
      grid-template-columns: repeat(4, 1fr) !important;
   }

   .grid-cols-6-lg-up {
      grid-template-columns: repeat(6, 1fr) !important;
   }

   .grid-cols-12-lg-up {
      grid-template-columns: repeat(12, 1fr) !important;
   }
}

/* XL (≥1280px) */
@media (min-width: 1280px) {
   .grid-cols-1-xl-up {
      grid-template-columns: repeat(1, 1fr) !important;
   }

   .grid-cols-2-xl-up {
      grid-template-columns: repeat(2, 1fr) !important;
   }

   .grid-cols-3-xl-up {
      grid-template-columns: repeat(3, 1fr) !important;
   }

   .grid-cols-4-xl-up {
      grid-template-columns: repeat(4, 1fr) !important;
   }

   .grid-cols-6-xl-up {
      grid-template-columns: repeat(6, 1fr) !important;
   }

   .grid-cols-12-xl-up {
      grid-template-columns: repeat(12, 1fr) !important;
   }
}

/* XXL (≥1536px) */
@media (min-width: 1536px) {
   .grid-cols-1-xxl-up {
      grid-template-columns: repeat(1, 1fr) !important;
   }

   .grid-cols-2-xxl-up {
      grid-template-columns: repeat(2, 1fr) !important;
   }

   .grid-cols-3-xxl-up {
      grid-template-columns: repeat(3, 1fr) !important;
   }

   .grid-cols-4-xxl-up {
      grid-template-columns: repeat(4, 1fr) !important;
   }

   .grid-cols-6-xxl-up {
      grid-template-columns: repeat(6, 1fr) !important;
   }

   .grid-cols-12-xxl-up {
      grid-template-columns: repeat(12, 1fr) !important;
   }
}
 
 

.col-span-1 { grid-column: span 1 / span 1; }
.col-span-2 { grid-column: span 2 / span 2; }
.col-span-3 { grid-column: span 3 / span 3; }
.col-span-4 { grid-column: span 4 / span 4; }
.col-span-6 { grid-column: span 6 / span 6; }
.col-span-12 { grid-column: span 12 / span 12; }

/* Equal columns */
.grid-cols-2eq   { display: grid; grid-template-columns: 1fr 1fr; }
.grid-cols-3eq   { display: grid; grid-template-columns: 1fr 1fr 1fr; }

/* Auto sizing based on content */
.grid-cols-auto-2 { display: grid; grid-template-columns: auto auto; }
.grid-cols-auto-3 { display: grid; grid-template-columns: auto auto auto; }

/* Max-content sizing (each column expands to largest item in that column) */
.grid-cols-max-2  { display: grid; grid-template-columns: max-content max-content; }
.grid-cols-max-3  { display: grid; grid-template-columns: max-content max-content max-content; }

/* Flexible second column (labels fixed, details wrap) */
.grid-cols-label-detail { display: grid; grid-template-columns: max-content minmax(0,1fr); }
.grid-cols-label-1  { display: grid; grid-template-columns: 1rem max-content; }
.grid-cols-label-2  { display: grid; grid-template-columns: 2rem max-content; }
.grid-cols-label-3  { display: grid; grid-template-columns: 3rem max-content; }
.grid-cols-label-4  { display: grid; grid-template-columns: 4rem max-content; }
.grid-cols-label-5  { display: grid; grid-template-columns: 5rem max-content; }
.grid-cols-label-6  { display: grid; grid-template-columns: 6rem max-content; }
.grid-cols-label-8  { display: grid; grid-template-columns: 8rem max-content; }
.grid-cols-label-10 { display: grid; grid-template-columns: 10rem max-content; }
.grid-cols-label-12 { display: grid; grid-template-columns: 12rem max-content; }
.grid-cols-label-16 { display: grid; grid-template-columns: 16rem max-content; }
.grid-cols-label-20 { display: grid; grid-template-columns: 20rem max-content; }



/* Fixed first column at 200px, rest flexible */
.grid-cols-fixed-200 { display: grid; grid-template-columns: 200px 1fr; }


/* Flow rows (each child is a row) */
.grid-rows-auto { grid-auto-rows: auto; }

/* Flow items row by row */
.grid-flow-row { grid-auto-flow: row; }

/* Flow items column by column */
.grid-flow-col { grid-auto-flow: column; }





/* ============================================================
   SURFACE & VISUALS
============================================================ */

/* ----------------------------
   Backgrounds
---------------------------- */
.bg-surface { background: var(--surface); }
.bg-black { background: var(--black); }
.bg-white { background: var(--white); }
.bg-grey-100 { background: var(--grey-100); }
.bg-grey-200 { background: var(--grey-200); }
.bg-grey-300 { background: var(--grey-300); }
.bg-grey-400 { background: var(--grey-400); }
.bg-grey-500 { background: var(--grey-500); }
.bg-grey-600 { background: var(--grey-600); }
.bg-grey-700 { background: var(--grey-700); }
.bg-grey-800 { background: var(--grey-800); }
.bg-grey-900 { background: var(--grey-900); }
.bg-success { background: var(--success); }
.bg-warning { background: var(--warning); }
.bg-danger { background: var(--danger); }
.bg-info { background: var(--info); }

/* Reds */
.bg-red-1 { background: var(--red-1); }
.bg-red-2 { background: var(--red-2); }
.bg-red-3 { background: var(--red-3); }
.bg-red-4 { background: var(--red-4); }
.bg-red-5 { background: var(--red-5); }

/* Blues */
.bg-blue-1 { background: var(--blue-1); }
.bg-blue-2 { background: var(--blue-2); }
.bg-blue-3 { background: var(--blue-3); }
.bg-blue-4 { background: var(--blue-4); }
.bg-blue-5 { background: var(--blue-5); }

/* Greens */
.bg-green-1 { background: var(--green-1); }
.bg-green-2 { background: var(--green-2); }
.bg-green-3 { background: var(--green-3); }
.bg-green-4 { background: var(--green-4); }
.bg-green-5 { background: var(--green-5); }

/* Purples */
.bg-purple-1 { background: var(--purple-1); }
.bg-purple-2 { background: var(--purple-2); }
.bg-purple-3 { background: var(--purple-3); }
.bg-purple-4 { background: var(--purple-4); }
.bg-purple-5 { background: var(--purple-5); }

/* Oranges */
.bg-orange-1 { background: var(--orange-1); }
.bg-orange-2 { background: var(--orange-2); }
.bg-orange-3 { background: var(--orange-3); }
.bg-orange-4 { background: var(--orange-4); }
.bg-orange-5 { background: var(--orange-5); }

/* Brand */
.bg-rmt { background: var(--rmt-green); }

/* ----------------------------
   Borders
---------------------------- */
/* Widths */
.border-none { border-width: var(--border-none); }
.border-xs { border-width: var(--border-xs); }
.border-sm { border-width: var(--border-sm); }
.border-md { border-width: var(--border-md); }
.border-lg { border-width: var(--border-lg); }
.border-xl { border-width: var(--border-xl); }
.border-xxl { border-width: var(--border-xxl); }

/* Styles */
.border-solid { border-style: var(--border-solid); }
.border-dashed { border-style: var(--border-dashed); }
.border-dotted { border-style: var(--border-dotted); }

/* Colors */
.border { border-color: var(--border); }
.border-grey-100 { border-color: var(--grey-100); }
.border-grey-200 { border-color: var(--grey-200); }
.border-grey-300 { border-color: var(--grey-300); }
.border-grey-400 { border-color: var(--grey-400); }
.border-grey-500 { border-color: var(--grey-500); }
.border-grey-600 { border-color: var(--grey-600); }
.border-grey-700 { border-color: var(--grey-700); }
.border-grey-800 { border-color: var(--grey-800); }
.border-grey-900 { border-color: var(--grey-900); }
.border-success { border-color: var(--success); }
.border-warning { border-color: var(--warning); }
.border-danger { border-color: var(--danger); }
.border-info { border-color: var(--info); }

/* Brand */
.border-rmt { border-color: var(--rmt-green); }

/* Colors */
.border-purple-3 { border-color: var(--purple-3); }

/* ----------------------------
   Radii
---------------------------- */
.radius-0 { border-radius: var(--radius-0); }
.radius-xxs { border-radius: var(--radius-xxs); }
.radius-xs { border-radius: var(--radius-xs); }
.radius-sm { border-radius: var(--radius-sm); }
.radius-md { border-radius: var(--radius-md); }
.radius-lg { border-radius: var(--radius-lg); }
.radius-xl { border-radius: var(--radius-xl); }
.radius-xxl { border-radius: var(--radius-xxl); }
.radius-pill { border-radius: var(--radius-pill); }
.radius-circle { border-radius: var(--radius-circle); }

/* ----------------------------
   Shadows & Scrims
---------------------------- */
.shadow-sm { box-shadow: var(--shadow-sm); }
.shadow-md { box-shadow: var(--shadow-md); }
.shadow-lg { box-shadow: var(--shadow-lg); }

.text-shadow-sm { text-shadow: var(--shadow-sm); }
.text-shadow-md { text-shadow: var(--shadow-md); }
.text-shadow-lg { text-shadow: var(--shadow-lg); }

.scrim-weak { background: var(--scrim-weak); }
.scrim { background: var(--scrim); }
.scrim-strong { background: var(--scrim-strong); }

/* ----------------------------
   Opacity & Overlay Helpers
---------------------------- */
/* Element opacity */
.opacity-0 { opacity: var(--opacity-0); }
.opacity-10 { opacity: var(--opacity-10); }
.opacity-20 { opacity: var(--opacity-20); }
.opacity-40 { opacity: var(--opacity-40); }
.opacity-60 { opacity: var(--opacity-60); }
.opacity-80 { opacity: var(--opacity-80); }
.opacity-100 { opacity: var(--opacity-100); }

/* Background opacity (independent of base color var) */
.bg-opacity-10  { background-color: rgba(var(--info-rgb, 12,84,96), 0.1); }
.bg-opacity-20  { background-color: rgba(var(--info-rgb, 12,84,96), 0.2); }
.bg-opacity-40  { background-color: rgba(var(--info-rgb, 12,84,96), 0.4); }
.bg-opacity-60  { background-color: rgba(var(--info-rgb, 12,84,96), 0.6); }
.bg-opacity-80  { background-color: rgba(var(--info-rgb, 12,84,96), 0.8); }
.bg-opacity-100 { background-color: rgba(var(--info-rgb, 12,84,96), 1); }

/* Text opacity */
.text-opacity-10  { color: rgba(34,34,34,0.1); }
.text-opacity-20  { color: rgba(34,34,34,0.2); }
.text-opacity-40  { color: rgba(34,34,34,0.4); }
.text-opacity-60  { color: rgba(34,34,34,0.6); }
.text-opacity-80  { color: rgba(34,34,34,0.8); }
.text-opacity-100 { color: rgba(34,34,34,1); }

/* Overlay helpers */
.overlay-top    { position: absolute; top: 0; left: 0; right: 0; }
.overlay-bottom { position: absolute; bottom: 0; left: 0; right: 0; }
.overlay-full   { position: absolute; top: 0; left: 0; right: 0; bottom: 0; }

/* ----------------------------
   Blur, Backdrop & Filters
---------------------------- */
.blur-sm { filter: blur(var(--blur-sm)); }
.blur-md { filter: blur(var(--blur-md)); }
.blur-lg { filter: blur(var(--blur-lg)); }

.backdrop-blur-sm { backdrop-filter: blur(var(--backdrop-blur-sm)); }
.backdrop-blur-md { backdrop-filter: blur(var(--backdrop-blur-md)); }
.backdrop-blur-lg { backdrop-filter: blur(var(--backdrop-blur-lg)); }

/* Basic filter effects */
.grayscale { filter: grayscale(100%); }
.invert { filter: invert(100%); }
.sepia { filter: sepia(100%); }

/* Brightness */
.brightness-50 { filter: brightness(0.5); }
.brightness-75 { filter: brightness(0.75); }
.brightness-90 { filter: brightness(0.9); }
.brightness-110 { filter: brightness(1.1); }
.brightness-125 { filter: brightness(1.25); }
.brightness-150 { filter: brightness(1.5); }

/* Contrast */
.contrast-75 { filter: contrast(0.75); }
.contrast-90 { filter: contrast(0.9); }
.contrast-110 { filter: contrast(1.1); }
.contrast-125 { filter: contrast(1.25); }
.contrast-150 { filter: contrast(1.5); }

/* Hue rotation */
.hue-rotate-30  { filter: hue-rotate(30deg); }
.hue-rotate-60  { filter: hue-rotate(60deg); }
.hue-rotate-90  { filter: hue-rotate(90deg); }
.hue-rotate-180 { filter: hue-rotate(180deg); }

/* Saturation */
.saturate-50  { filter: saturate(0.5); }
.saturate-75  { filter: saturate(0.75); }
.saturate-125 { filter: saturate(1.25); }
.saturate-150 { filter: saturate(1.5); }
.saturate-200 { filter: saturate(2); }

/* Drop shadows (filter-based, different from box-shadow) */
.drop-shadow-sm { filter: drop-shadow(0 1px 1px rgba(0,0,0,0.1)); }
.drop-shadow-md { filter: drop-shadow(0 2px 4px rgba(0,0,0,0.2)); }
.drop-shadow-lg { filter: drop-shadow(0 4px 8px rgba(0,0,0,0.3)); }

/* ----------------------------
   Aspect Ratios
---------------------------- */
.ratio-square { aspect-ratio: var(--ratio-square); }
.ratio-video  { aspect-ratio: var(--ratio-video); }
.ratio-photo  { aspect-ratio: var(--ratio-photo); }
.ratio-widescreen { aspect-ratio: var(--ratio-widescreen); }
.ratio-extrawide { aspect-ratio: var(--ratio-extrawide); }
.ratio-banner { aspect-ratio: var(--ratio-banner); }



/* ============================================================
   OBJECTS & MEDIA
============================================================ */
.object-contain    { object-fit: contain !important; }
.object-cover      { object-fit: cover !important; }
.object-fill       { object-fit: fill !important; }
.object-none       { object-fit: none !important; }
.object-scale-down { object-fit: scale-down !important; }



/* ============================================================
   OVERFLOW
============================================================ */
/* Both axes */
.overflow-visible { overflow: visible !important; }
.overflow-hidden  { overflow: hidden !important; }
.overflow-auto    { overflow: auto !important; }
.overflow-scroll  { overflow: scroll !important; }

/* Horizontal only */
.overflow-x-visible { overflow-x: visible !important; }
.overflow-x-hidden  { overflow-x: hidden !important; }
.overflow-x-auto    { overflow-x: auto !important; }
.overflow-x-scroll  { overflow-x: scroll !important; }

/* Vertical only */
.overflow-y-visible { overflow-y: visible !important; }
.overflow-y-hidden  { overflow-y: hidden !important; }
.overflow-y-auto    { overflow-y: auto !important; }
.overflow-y-scroll  { overflow-y: scroll !important; }



/* ============================================================
   TYPOGRAPHY
============================================================ */

/* ----------------------------
   Text Classes (families, sizes, line heights, weights, tracking)
---------------------------- */
.font-sans { font-family: var(--font-family-sans); }
.font-serif { font-family: var(--font-family-serif); }

.text-xxxxl { font-size: var(--font-xxxxl); }
.text-xxxl { font-size: var(--font-xxxl); }
.text-xxl  { font-size: var(--font-xxl); }
.text-xl   { font-size: var(--font-xl); }
.text-lg   { font-size: var(--font-lg); }
.text-md   { font-size: var(--font-md); }
.text-sm   { font-size: var(--font-sm); }
.text-xs   { font-size: var(--font-xs); }

.leading-tightest { line-height: var(--line-tightest); }
.leading-tighter  { line-height: var(--line-tighter); }
.leading-tight    { line-height: var(--line-tight); }
.leading-normal   { line-height: var(--line-normal); }
.leading-loose    { line-height: var(--line-loose); }
.leading-looser   { line-height: var(--line-looser); }
.leading-loosest  { line-height: var(--line-loosest); }

.text-extra-bold { font-weight: var(--extra-bold); }
.text-bold       { font-weight: var(--bold); }
.text-semi-bold  { font-weight: var(--semi-bold); }
.text-medium     { font-weight: var(--medium); }
.text-regular    { font-weight: var(--regular); }
.text-light      { font-weight: var(--light); }
.text-extra-light{ font-weight: var(--extra-light); }

.tracking-tighter { letter-spacing: var(--track-tighter); }
.tracking-tight   { letter-spacing: var(--track-tight); }
.tracking-normal  { letter-spacing: var(--track-normal); }
.tracking-wide    { letter-spacing: var(--track-wide); }
.tracking-wider   { letter-spacing: var(--track-wider); }

/* Colors */
.text { color: var(--text); }
.text-muted { color: var(--muted); }
.text-black { color: var(--black); }
.text-white { color: var(--white); }
.text-grey-100 { color: var(--grey-100); }
.text-grey-200 { color: var(--grey-200); }
.text-grey-300 { color: var(--grey-300); }
.text-grey-400 { color: var(--grey-400); }
.text-grey-500 { color: var(--grey-500); }
.text-grey-600 { color: var(--grey-600); }
.text-grey-700 { color: var(--grey-700); }
.text-grey-800 { color: var(--grey-800); }
.text-grey-900 { color: var(--grey-900); }
.text-success { color: var(--success); }
.text-warning { color: var(--warning); }
.text-danger  { color: var(--danger);  }
.text-info    { color: var(--info);    }

/* Reds */
.text-red-1 { color: var(--red-1); }
.text-red-2 { color: var(--red-2); }
.text-red-3 { color: var(--red-3); }
.text-red-4 { color: var(--red-4); }
.text-red-5 { color: var(--red-5); }

/* Blues */
.text-blue-1 { color: var(--blue-1); }
.text-blue-2 { color: var(--blue-2); }
.text-blue-3 { color: var(--blue-3); }
.text-blue-4 { color: var(--blue-4); }
.text-blue-5 { color: var(--blue-5); }

/* Greens */
.text-green-1 { color: var(--green-1); }
.text-green-2 { color: var(--green-2); }
.text-green-3 { color: var(--green-3); }
.text-green-4 { color: var(--green-4); }
.text-green-5 { color: var(--green-5); }

/* Purples */
.text-purple-1 { color: var(--purple-1); }
.text-purple-2 { color: var(--purple-2); }
.text-purple-3 { color: var(--purple-3); }
.text-purple-4 { color: var(--purple-4); }
.text-purple-5 { color: var(--purple-5); }

/* Oranges */
.text-orange-1 { color: var(--orange-1); }
.text-orange-2 { color: var(--orange-2); }
.text-orange-3 { color: var(--orange-3); }
.text-orange-4 { color: var(--orange-4); }
.text-orange-5 { color: var(--orange-5); }

/* Brand */
.text-rmt { color: var(--rmt-green); }

/* ----------------------------
   Typography Utilities
---------------------------- */
/* Alignment */
.text-left { text-align: left; }
.text-center { text-align: center; }
.text-right { text-align: right; }
.text-justify { text-align: justify; }

/* Wrapping & Whitespace */
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.break-words { overflow-wrap: break-word; }
.break-all { word-break: break-all; }
.whitespace-nowrap { white-space: nowrap; }
.whitespace-normal { white-space: normal; }
.whitespace-pre { white-space: pre; }
.whitespace-pre-line { white-space: pre-line; }
.whitespace-pre-wrap { white-space: pre-wrap; }

/* Font Style */
.italic { font-style: italic; }
.not-italic { font-style: normal; }

/* Text Decoration: Line */
.underline { text-decoration-line: underline; }
.overline { text-decoration-line: overline; }
.line-through { text-decoration-line: line-through; }
.no-underline { text-decoration-line: none; }

/* Text Decoration: Style */
.dec-solid { text-decoration-style: solid; }
.dec-double { text-decoration-style: double; }
.dec-dotted { text-decoration-style: dotted; }
.dec-dashed { text-decoration-style: dashed; }
.dec-wavy { text-decoration-style: wavy; }

/* Text Decoration: Thickness */
.dec-auto { text-decoration-thickness: auto; }
.dec-from-font { text-decoration-thickness: from-font; }
.dec-thin { text-decoration-thickness: thin; }
.dec-medium { text-decoration-thickness: medium; }
.dec-thick { text-decoration-thickness: thick; }

/* Text Transform */
.uppercase { text-transform: uppercase; }
.lowercase { text-transform: lowercase; }
.capitalize { text-transform: capitalize; }
.normal-case { text-transform: none; }

/* Font Variant */
.small-caps { font-variant: small-caps; }
.normal-variant { font-variant: normal; }

/* (Note: list-related text transforms & decorations were duplicated under LISTS; consolidated here) */



/* ============================================================
   LISTS & CONTENT
============================================================ */
/* List Styles */
.list-none { list-style-type: none; }

/* Basic Shapes */
.list-disc { list-style-type: disc; }
.list-circle { list-style-type: circle; }
.list-square { list-style-type: square; }

/* Decimal / Numeric */
.list-decimal { list-style-type: decimal; }
.list-decimal-leading-zero { list-style-type: decimal-leading-zero; }

/* Alphabetical */
.list-lower-alpha { list-style-type: lower-alpha; }
.list-upper-alpha { list-style-type: upper-alpha; }
.list-lower-latin { list-style-type: lower-latin; }
.list-upper-latin { list-style-type: upper-latin; }

/* Roman Numerals */
.list-lower-roman { list-style-type: lower-roman; }
.list-upper-roman { list-style-type: upper-roman; }

/* Greek */
.list-lower-greek { list-style-type: lower-greek; }

/* Other numbering systems */
.list-armenian { list-style-type: armenian; }
.list-georgian { list-style-type: georgian; }

/* CJK (Chinese/Japanese/Korean) */
.list-cjk-ideographic { list-style-type: cjk-ideographic; }
.list-cjk-decimal { list-style-type: decimal; } /* alias */
.list-cjk-heavenly { list-style-type: cjk-heavenly-stem; }
.list-cjk-earthly { list-style-type: cjk-earthly-branch; }
.list-cjk-korean-hangul { list-style-type: hangul; }
.list-cjk-korean-hanja { list-style-type: hangul-consonant; }
.list-cjk-japanese { list-style-type: hiragana; }
.list-cjk-japanese-iroha { list-style-type: hiragana-iroha; }
.list-cjk-katakana { list-style-type: katakana; }
.list-cjk-katakana-iroha { list-style-type: katakana-iroha; }

/* Disclosure triangles */
.list-disclosure-open { list-style-type: disclosure-open; }
.list-disclosure-closed { list-style-type: disclosure-closed; }

/* (Case transforms, small-caps, and text decorations are in TYPOGRAPHY UTILITIES) */



/* ============================================================
   INTERACTIVITY
============================================================ */

/* Pointer Events */
.pointer-events-none { pointer-events: none; }
.pointer-events-auto { pointer-events: auto; }

/* Text Selection */
.select-none { user-select: none; }
.select-text { user-select: text; }
.select-all  { user-select: all; }

/* Focus Styles */
.focus-outline-none:focus { outline: none; }
.focus-ring:focus {
  outline: 2px solid var(--info);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* Cursor Utilities */
.cursor-pointer     { cursor: pointer; }
.cursor-default     { cursor: default; }
.cursor-not-allowed { cursor: not-allowed; }

/* Motion (note: uses --motion-* vars in your source) */
.transition-fast { transition: all var(--motion-fast) ease-in-out; }
.transition-med  { transition: all var(--motion-med) ease-in-out; }
.transition-slow { transition: all var(--motion-slow) ease-in-out; }

/* Hover Effects */
.hover-scale-sm:hover { transform: scale(var(--hover-scale-sm)); }
.hover-scale-md:hover { transform: scale(var(--hover-scale-md)); }
.hover-scale-lg:hover { transform: scale(var(--hover-scale-lg)); }