tpmjs/apps/web/src/app/globals.css

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  /* Light mode (default) - Warm earthy palette with copper accent */
  :root {
    /* ===========================================
       COMPREHENSIVE COLOR PALETTE
       Warm, earthy tones with copper accent
       =========================================== */

    /* Backgrounds - Layered surface system */
    --background: 30 15% 95%; /* #F5F3F0 - Warm off-white base */
    --surface: 0 0% 100%; /* #FFFFFF - Cards, panels */
    --surface-2: 30 20% 97%; /* #FAF8F6 - Elevated surfaces */
    --surface-3: 25 12% 93%; /* #F0EDEA - Highest elevation */
    --surface-secondary: 30 10% 95%; /* Legacy alias */
    --surface-elevated: 30 20% 97%; /* Legacy alias */
    --surface-overlay: 0 0% 100%; /* Overlays, modals */

    /* Text - Clear hierarchy */
    --foreground: 25 15% 10%; /* #1A1715 - Primary text */
    --foreground-secondary: 25 8% 35%; /* #5C564F - Secondary text */
    --foreground-tertiary: 25 6% 50%; /* #817B74 - Tertiary text */
    --foreground-muted: 25 5% 60%; /* #9A958F - Muted/hints */

    /* Borders - Warm grays */
    --border: 30 8% 80%; /* #CEC9C3 - Default borders */
    --border-strong: 25 8% 50%; /* #857F77 - Emphasized borders */
    --border-subtle: 30 6% 88%; /* #E3E0DC - Subtle borders */

    /* Primary - Copper accent #A6592D */
    --primary: 22 57% 41%; /* #A6592D - Brand copper */
    --primary-hover: 22 57% 35%; /* #8B4A26 - Hover state */
    --primary-active: 22 57% 30%; /* #753F20 - Active/pressed */
    --primary-foreground: 0 0% 100%; /* White text on primary */

    /* Accent - Copper variations */
    --accent: 22 57% 41%; /* #A6592D - Same as primary */
    --accent-strong: 22 60% 35%; /* #8F4722 - Darker/hover */
    --accent-muted: 22 30% 90%; /* #EDE5DF - Soft copper tint */
    --accent-foreground: 0 0% 100%; /* White text */

    /* Secondary - Warm neutrals */
    --secondary: 30 10% 92%; /* #EDEBE8 - Soft warm bg */
    --secondary-hover: 30 10% 88%; /* #E3E0DC - Hover */
    --secondary-foreground: 25 15% 10%; /* Dark text */

    /* Muted - Subtle backgrounds */
    --muted: 30 8% 94%; /* #F2F0ED - Muted background */
    --muted-foreground: 25 8% 40%; /* #6B655E - Muted text */

    /* Status Colors - Earthy, warm variants */
    --success: 145 45% 36%; /* #327D52 - Forest green */
    --success-light: 145 35% 92%; /* #E5F3EC - Light bg */
    --success-foreground: 0 0% 100%;

    --warning: 38 75% 50%; /* #D9A020 - Warm amber */
    --warning-light: 38 60% 92%; /* #F8F2E0 - Light bg */
    --warning-foreground: 25 15% 10%;

    --error: 0 55% 50%; /* #C44545 - Warm red */
    --error-light: 0 50% 95%; /* #F9EDED - Light bg */
    --error-foreground: 0 0% 100%;

    --info: 210 60% 50%; /* #3380CC - Cool blue */
    --info-light: 210 50% 95%; /* #EDF4FB - Light bg */
    --info-foreground: 0 0% 100%;

    /* Destructive (alias for error) */
    --destructive: 0 55% 50%;
    --destructive-foreground: 0 0% 100%;

    /* Form Elements */
    --input: 30 8% 80%; /* Input borders */
    --input-focus: 22 57% 41%; /* Copper focus */
    --ring: 22 57% 41%; /* Focus ring - copper */
    --ring-offset: 0 0% 100%;

    /* Grid/Blueprint Pattern */
    --grid-color: 25 8% 88%;
    --grid-size: 24px;

    /* Card */
    --card: 0 0% 100%;
    --card-foreground: 25 15% 10%;

    /* Border Radii - SHARP CORNERS (0) */
    --radius-sm: 0;
    --radius-md: 0;
    --radius-lg: 0;
    --radius-xl: 0;
    --radius: 0;

    /* Spacing - Generous whitespace */
    --spacing-section: 8rem;
    --spacing-component: 4rem;
    --spacing-element: 2rem;
    --spacing-tight: 1rem;
    --spacing-comfortable: 3rem;

    /* Typography */
    --font-sans: var(--font-inter), -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
    --font-mono: var(--font-jetbrains), "JetBrains Mono", "SF Mono", Consolas, monospace;

    /* Line Heights */
    --leading-tight: 1.2;
    --leading-snug: 1.4;
    --leading-normal: 1.6;
    --leading-relaxed: 1.7;
    --leading-loose: 1.8;
    --leading-editorial: 1.9;

    /* Letter Spacing */
    --tracking-tighter: -0.03em;
    --tracking-tight: -0.015em;
    --tracking-normal: 0;
    --tracking-wide: 0.025em;
    --tracking-wider: 0.05em;
    --tracking-widest: 0.1em;

    /* Brutalist Accents */
    --brutalist-accent: 22 57% 41%;
    --brutalist-accent-hover: 22 57% 35%;

    /* Gradients */
    --gradient-start: 24 70% 50%;
    --gradient-end: 15 60% 20%;

    /* ===========================================
       MOTION & ANIMATION TOKENS
       Motion communicates state, not decoration
       Fast by default (150-200ms)
       =========================================== */

    /* Duration tokens */
    --motion-instant: 0ms;
    --motion-fast: 150ms;
    --motion-base: 200ms;
    --motion-slow: 300ms;
    --motion-slower: 500ms;

    /* Easing tokens */
    --easing-standard: cubic-bezier(0.4, 0, 0.2, 1);
    --easing-decelerate: cubic-bezier(0, 0, 0.2, 1);
    --easing-accelerate: cubic-bezier(0.4, 0, 1, 1);
    --easing-linear: linear;
    --easing-spring: cubic-bezier(0.175, 0.885, 0.32, 1.275);

    /* ===========================================
       TYPOGRAPHY SCALE
       Modular scale with 1.25 ratio
       Base: 16px
       =========================================== */

    /* Type scale */
    --text-xs: 0.75rem; /* 12px */
    --text-sm: 0.875rem; /* 14px */
    --text-base: 1rem; /* 16px */
    --text-lg: 1.125rem; /* 18px */
    --text-xl: 1.25rem; /* 20px */
    --text-2xl: 1.5rem; /* 24px */
    --text-3xl: 2rem; /* 32px */
    --text-4xl: 2.5rem; /* 40px */
    --text-5xl: 3rem; /* 48px */
    --text-6xl: 4rem; /* 64px */

    /* Max line widths for readability */
    --prose-width: 65ch;
    --prose-width-narrow: 45ch;
    --prose-width-wide: 80ch;

    /* ===========================================
       BREAKPOINTS
       Mobile-first responsive design
       =========================================== */

    /* Breakpoint values (for reference, Tailwind handles classes) */
    --breakpoint-sm: 640px;
    --breakpoint-md: 768px;
    --breakpoint-lg: 1024px;
    --breakpoint-xl: 1280px;
    --breakpoint-2xl: 1536px;

    /* ===========================================
       DENSITY MODES
       Compact / Comfortable / Spacious
       =========================================== */

    /* Default is comfortable */
    --density-row-height: 48px;
    --density-cell-padding-x: 16px;
    --density-cell-padding-y: 12px;
    --density-icon-size: 20px;
    --density-font-size: var(--text-sm);

    /* ===========================================
       Z-INDEX SCALE
       Consistent layering
       =========================================== */

    --z-base: 0;
    --z-dropdown: 100;
    --z-sticky: 200;
    --z-fixed: 300;
    --z-modal-backdrop: 400;
    --z-modal: 500;
    --z-popover: 600;
    --z-tooltip: 700;
    --z-toast: 800;

    /* ===========================================
       FOCUS & ACCESSIBILITY
       Never remove focus indicators
       =========================================== */

    --focus-ring-width: 2px;
    --focus-ring-offset: 2px;
    --focus-ring-color: var(--ring);

    /* ===========================================
       ELEVATION & SHADOWS
       Subtle depth, prefer borders for emphasis
       =========================================== */

    --shadow-none: none;
    --shadow-xs: 0 1px 2px 0 hsl(var(--foreground) / 0.05);
    --shadow-sm:
      0 1px 3px 0 hsl(var(--foreground) / 0.08), 0 1px 2px -1px hsl(var(--foreground) / 0.08);
    --shadow-md:
      0 4px 6px -1px hsl(var(--foreground) / 0.08), 0 2px 4px -2px hsl(var(--foreground) / 0.08);
    --shadow-lg:
      0 10px 15px -3px hsl(var(--foreground) / 0.08), 0 4px 6px -4px hsl(var(--foreground) / 0.08);
    --shadow-xl:
      0 20px 25px -5px hsl(var(--foreground) / 0.08), 0 8px 10px -6px hsl(var(--foreground) / 0.08);
    --shadow-2xl: 0 25px 50px -12px hsl(var(--foreground) / 0.15);
    --shadow-inner: inset 0 2px 4px 0 hsl(var(--foreground) / 0.05);

    /* ===========================================
       RADIUS SCALE
       Sharp corners by default (brutalist)
       Explicit tokens for rare roundness
       =========================================== */

    --radius-none: 0;
    --radius-xs: 2px;
    --radius-sm: 4px;
    --radius-md: 6px;
    --radius-lg: 8px;
    --radius-xl: 12px;
    --radius-2xl: 16px;
    --radius-full: 9999px;

    /* ===========================================
       BORDER WIDTH SCALE
       =========================================== */

    --border-hairline: 0.5px;
    --border-thin: 1px;
    --border-medium: 2px;
    --border-thick: 4px;
    --border-heavy: 6px;
    --border-brutalist: 8px;

    /* ===========================================
       OPACITY SCALE
       For disabled, subtle, overlay states
       =========================================== */

    --opacity-0: 0;
    --opacity-disabled: 0.5;
    --opacity-subtle: 0.6;
    --opacity-muted: 0.4;
    --opacity-overlay: 0.8;
    --opacity-overlay-heavy: 0.9;
    --opacity-hover: 0.9;
    --opacity-full: 1;

    /* ===========================================
       ADDITIONAL Z-INDEX LAYERS
       Extended from base scale
       =========================================== */

    --z-drawer: 350;
    --z-command-palette: 900;
    --z-notification: 850;
  }

  /* Dark mode (opt-in) - Warm dark with copper accent */
  .dark {
    /* ===========================================
       DARK MODE - Warm charcoal with copper
       =========================================== */

    /* Backgrounds - Layered dark surfaces */
    --background: 25 10% 6%; /* #0F0E0D - Warm dark base */
    --surface: 25 10% 9%; /* #171514 - Cards, panels */
    --surface-2: 25 10% 12%; /* #1F1D1B - Elevated */
    --surface-3: 25 10% 16%; /* #2A2725 - Highest elevation */
    --surface-secondary: 25 10% 10%;
    --surface-elevated: 25 10% 12%;
    --surface-overlay: 25 10% 16%;

    /* Text - Clear hierarchy in dark */
    --foreground: 30 10% 90%; /* #E8E5E2 - Primary text */
    --foreground-secondary: 25 6% 60%; /* #9A9592 - Secondary */
    --foreground-tertiary: 25 5% 45%; /* #757270 - Tertiary */
    --foreground-muted: 25 4% 35%; /* #5A5856 - Muted */

    /* Borders - Subtle in dark */
    --border: 25 8% 20%; /* #363230 - Default */
    --border-strong: 25 8% 35%; /* #5C5854 - Emphasized */
    --border-subtle: 25 6% 14%; /* #252321 - Subtle */

    /* Primary - Copper, brighter for dark mode */
    --primary: 22 57% 50%; /* #C96A38 - Brighter copper */
    --primary-hover: 22 57% 55%; /* #D47942 - Hover */
    --primary-active: 22 57% 45%; /* #B55E2E - Active */
    --primary-foreground: 0 0% 100%;

    /* Accent - Copper variations */
    --accent: 22 57% 50%;
    --accent-strong: 22 60% 55%;
    --accent-muted: 22 20% 15%;
    --accent-foreground: 0 0% 100%;

    /* Secondary - Warm dark */
    --secondary: 25 10% 15%;
    --secondary-hover: 25 10% 20%;
    --secondary-foreground: 30 10% 90%;

    /* Muted - Subtle dark */
    --muted: 25 8% 12%;
    --muted-foreground: 25 6% 55%;

    /* Status Colors - Brighter for dark mode */
    --success: 145 50% 45%; /* Brighter green */
    --success-light: 145 30% 15%;
    --success-foreground: 0 0% 100%;

    --warning: 38 80% 55%; /* Brighter amber */
    --warning-light: 38 40% 15%;
    --warning-foreground: 25 15% 10%;

    --error: 0 60% 55%; /* Brighter red */
    --error-light: 0 40% 15%;
    --error-foreground: 0 0% 100%;

    --info: 210 70% 55%; /* Brighter blue */
    --info-light: 210 40% 15%;
    --info-foreground: 0 0% 100%;

    /* Destructive */
    --destructive: 0 60% 55%;
    --destructive-foreground: 0 0% 100%;

    /* Form Elements */
    --input: 25 8% 20%;
    --input-focus: 22 57% 50%;
    --ring: 22 57% 50%;
    --ring-offset: 25 10% 6%;

    /* Grid */
    --grid-color: 25 8% 15%;

    /* Card */
    --card: 25 10% 9%;
    --card-foreground: 30 10% 90%;

    /* Brutalist Accents */
    --brutalist-accent: 22 57% 50%;
    --brutalist-accent-hover: 22 57% 55%;

    /* Border Radii - SHARP CORNERS (0) */
    --radius-sm: 0;
    --radius-md: 0;
    --radius-lg: 0;
    --radius-xl: 0;
    --radius: 0;

    /* ===========================================
       DARK MODE SHADOWS
       Darker, more prominent for visibility
       =========================================== */

    --shadow-none: none;
    --shadow-xs: 0 1px 2px 0 hsl(0 0% 0% / 0.2);
    --shadow-sm: 0 1px 3px 0 hsl(0 0% 0% / 0.25), 0 1px 2px -1px hsl(0 0% 0% / 0.25);
    --shadow-md: 0 4px 6px -1px hsl(0 0% 0% / 0.25), 0 2px 4px -2px hsl(0 0% 0% / 0.25);
    --shadow-lg: 0 10px 15px -3px hsl(0 0% 0% / 0.25), 0 4px 6px -4px hsl(0 0% 0% / 0.25);
    --shadow-xl: 0 20px 25px -5px hsl(0 0% 0% / 0.3), 0 8px 10px -6px hsl(0 0% 0% / 0.3);
    --shadow-2xl: 0 25px 50px -12px hsl(0 0% 0% / 0.4);
    --shadow-inner: inset 0 2px 4px 0 hsl(0 0% 0% / 0.2);

    /* Radius, border, opacity tokens inherit from light mode */
  }

  /* Base element styles */
  * {
    @apply border-border;
  }

  html,
  body {
    overflow-x: hidden;
    max-width: 100vw;
  }

  body {
    @apply bg-background text-foreground;
    font-family: var(--font-sans);
    font-feature-settings:
      "rlig" 1,
      "calt" 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  /* Grid/Blueprint background patterns */
  .grid-background {
    background-image:
      linear-gradient(hsl(var(--grid-color)) 1px, transparent 1px),
      linear-gradient(90deg, hsl(var(--grid-color)) 1px, transparent 1px);
    background-size: var(--grid-size) var(--grid-size);
    background-position: -1px -1px;
  }

  .dotted-grid-background {
    background-image: radial-gradient(circle, hsl(var(--grid-color)) 1px, transparent 1px);
    background-size: var(--grid-size) var(--grid-size);
  }

  .blueprint-background {
    background-color: hsl(var(--background));
    /* Major grid lines (4x size) */
    background-image:
      linear-gradient(hsl(var(--grid-color)) 1px, transparent 1px),
      linear-gradient(90deg, hsl(var(--grid-color)) 1px, transparent 1px),
      /* Minor grid lines (1x size) */
      linear-gradient(hsl(var(--grid-color) / 0.3) 1px, transparent 1px),
      linear-gradient(90deg, hsl(var(--grid-color) / 0.3) 1px, transparent 1px);
    background-size:
      calc(var(--grid-size) * 4) calc(var(--grid-size) * 4),
      calc(var(--grid-size) * 4) calc(var(--grid-size) * 4),
      var(--grid-size) var(--grid-size),
      var(--grid-size) var(--grid-size);
  }

  /* Animated grid (subtle pulse) */
  .grid-background-animated {
    @apply grid-background;
    animation: grid-pulse 8s ease-in-out infinite;
  }

  @keyframes grid-pulse {
    0%,
    100% {
      opacity: 0.4;
    }
    50% {
      opacity: 0.6;
    }
  }
}

@layer utilities {
  /* Border utilities */
  .border-1 {
    border-width: 1px;
  }

  .border-dotted-1 {
    border-width: 1px;
    border-style: dotted;
  }

  .border-dashed-1 {
    border-width: 1px;
    border-style: dashed;
  }

  .border-dotted-2 {
    border-width: 2px;
    border-style: dotted;
  }

  /* Directional dotted borders */
  .border-t-dotted {
    border-top-width: 1px;
    border-top-style: dotted;
  }

  .border-b-dotted {
    border-bottom-width: 1px;
    border-bottom-style: dotted;
  }

  .border-l-dotted {
    border-left-width: 1px;
    border-left-style: dotted;
  }

  .border-r-dotted {
    border-right-width: 1px;
    border-right-style: dotted;
  }

  /* Shadow utilities - Blueprint aesthetic */
  .shadow-blueprint {
    box-shadow:
      0 1px 2px 0 rgb(0 0 0 / 0.03),
      0 0 0 1px rgb(0 0 0 / 0.02);
  }

  .shadow-blueprint-hover {
    box-shadow:
      0 2px 4px 0 rgb(0 0 0 / 0.05),
      0 0 0 1px rgb(0 0 0 / 0.03);
  }

  /* Transition presets */
  .transition-base {
    transition-property: background-color, border-color, color, fill, stroke;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 200ms;
  }

  .transition-transform {
    transition-property: transform;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 200ms;
  }

  .transition-all-smooth {
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 300ms;
  }

  /* Hover effects */
  .hover-lift {
    @apply transition-transform hover:-translate-y-0.5 hover:shadow-md;
  }

  /* Focus ring (modern, accessible) */
  .focus-ring {
    @apply focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background;
  }

  /* Custom animations */
  @keyframes slide-up {
    from {
      transform: translateY(10px);
      opacity: 0;
    }
    to {
      transform: translateY(0);
      opacity: 1;
    }
  }

  @keyframes shimmer {
    0% {
      background-position: -1000px 0;
    }
    100% {
      background-position: 1000px 0;
    }
  }

  .animate-slide-up {
    animation: slide-up 300ms cubic-bezier(0.4, 0, 0.2, 1);
  }

  .animate-shimmer {
    animation: shimmer 2s infinite linear;
    background: linear-gradient(
      90deg,
      hsl(var(--muted)) 0%,
      hsl(var(--accent)) 50%,
      hsl(var(--muted)) 100%
    );
    background-size: 1000px 100%;
  }

  /* Brutalist Typography */
  .brutalist-heading {
    font-size: clamp(48px, 8vw, 120px);
    font-weight: 800;
    letter-spacing: -0.05em;
    line-height: 0.9;
    text-transform: uppercase;
  }

  .brutalist-subheading {
    font-size: clamp(24px, 4vw, 56px);
    font-weight: 700;
    letter-spacing: -0.025em;
    line-height: 1.1;
    text-transform: uppercase;
  }

  /* Brutalist Borders */
  .brutalist-border {
    border: 6px solid hsl(var(--foreground));
    border-radius: 0;
  }

  .brutalist-border-thick {
    border: 8px solid hsl(var(--foreground));
    border-radius: 0;
  }

  .brutalist-border-mega {
    border: 12px solid hsl(var(--foreground));
    border-radius: 0;
  }

  /* Brutalist Shadows - Hard, not soft */
  .brutalist-shadow {
    box-shadow: 0 10px 0 0 hsl(var(--brutalist-accent));
  }

  .brutalist-shadow-hover {
    box-shadow: 0 12px 0 0 hsl(var(--brutalist-accent));
  }

  .brutalist-shadow-sm {
    box-shadow: 0 6px 0 0 hsl(var(--brutalist-accent));
  }

  /* Glitch Animation */
  @keyframes glitch {
    0%,
    100% {
      transform: translateX(0);
    }
    20% {
      transform: translateX(-5px);
    }
    40% {
      transform: translateX(5px);
    }
    60% {
      transform: translateX(-3px);
    }
    80% {
      transform: translateX(3px);
    }
  }

  .animate-glitch {
    animation: glitch 500ms ease-in-out;
  }

  /* Brutalist Entrance Animation */
  @keyframes brutalist-entrance {
    from {
      transform: translateY(40px) scale(0.9);
      opacity: 0;
    }
    to {
      transform: translateY(0) scale(1);
      opacity: 1;
    }
  }

  .animate-brutalist-entrance {
    animation: brutalist-entrance 600ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
  }

  /* Bar Growth Animation */
  @keyframes bar-grow {
    from {
      transform: scaleY(0);
      transform-origin: bottom;
    }
    to {
      transform: scaleY(1);
      transform-origin: bottom;
    }
  }

  .animate-bar-grow {
    animation: bar-grow 800ms ease-out forwards;
  }

  /* Stagger delays for entrance animations */
  .stagger-1 {
    animation-delay: 80ms;
  }
  .stagger-2 {
    animation-delay: 160ms;
  }
  .stagger-3 {
    animation-delay: 240ms;
  }
  .stagger-4 {
    animation-delay: 320ms;
  }
  .stagger-5 {
    animation-delay: 400ms;
  }

  /* Blueprint Scanline Animation */
  @keyframes scanline {
    0% {
      transform: translateY(-100%);
    }
    100% {
      transform: translateY(100vh);
    }
  }

  .blueprint-scanline {
    position: absolute;
    width: 100%;
    height: 2px;
    background: linear-gradient(
      90deg,
      transparent,
      hsl(var(--brutalist-accent) / 0.3),
      transparent
    );
    animation: scanline 30s linear infinite;
    pointer-events: none;
    z-index: 1;
  }

  /* Slide Down Animation (for Activity Stream) */
  @keyframes slide-down {
    from {
      transform: translateY(-10px);
      opacity: 0;
    }
    to {
      transform: translateY(0);
      opacity: 1;
    }
  }

  .animate-slide-down {
    animation: slide-down 300ms ease-out forwards;
  }

  /* Motion Preferences - Accessibility */
  @media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
      animation-duration: 0.01ms;
      animation-iteration-count: 1;
      transition-duration: 0.01ms;
    }
  }

  /* ===========================================
     DENSITY MODES
     Use data-density attribute on container
     =========================================== */

  /* Compact density */
  [data-density="compact"] {
    --density-row-height: 36px;
    --density-cell-padding-x: 8px;
    --density-cell-padding-y: 6px;
    --density-icon-size: 16px;
    --density-font-size: var(--text-xs);
  }

  /* Comfortable density (default) */
  [data-density="comfortable"] {
    --density-row-height: 48px;
    --density-cell-padding-x: 16px;
    --density-cell-padding-y: 12px;
    --density-icon-size: 20px;
    --density-font-size: var(--text-sm);
  }

  /* Spacious density */
  [data-density="spacious"] {
    --density-row-height: 64px;
    --density-cell-padding-x: 24px;
    --density-cell-padding-y: 20px;
    --density-icon-size: 24px;
    --density-font-size: var(--text-base);
  }

  /* Density utility classes */
  .density-row {
    height: var(--density-row-height);
    font-size: var(--density-font-size);
  }

  .density-cell {
    padding: var(--density-cell-padding-y) var(--density-cell-padding-x);
    font-size: var(--density-font-size);
  }

  .density-icon {
    width: var(--density-icon-size);
    height: var(--density-icon-size);
  }

  /* ===========================================
     PROSE WIDTHS FOR READABILITY
     =========================================== */

  .prose-width {
    max-width: var(--prose-width);
  }

  .prose-width-narrow {
    max-width: var(--prose-width-narrow);
  }

  .prose-width-wide {
    max-width: var(--prose-width-wide);
  }

  /* ===========================================
     MOTION UTILITIES
     Using CSS custom properties
     =========================================== */

  .motion-fast {
    transition-duration: var(--motion-fast);
    transition-timing-function: var(--easing-standard);
  }

  .motion-base {
    transition-duration: var(--motion-base);
    transition-timing-function: var(--easing-standard);
  }

  .motion-slow {
    transition-duration: var(--motion-slow);
    transition-timing-function: var(--easing-standard);
  }

  .motion-linear {
    transition-timing-function: var(--easing-linear);
  }

  .motion-spring {
    transition-timing-function: var(--easing-spring);
  }
}