@layer reset;

/* ==========================================================================
   Rakui CSS - Reset
   Modern CSS reset for consistent cross-browser styling
   ========================================================================== */

@layer reset {

/* Box sizing */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Remove default margin and padding */
* {
  margin: 0;
  padding: 0;
}

/* Prevent font size inflation */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* Set core body defaults */
body {
  min-height: 100vh;
  min-height: 100dvh; /* Dynamic viewport for mobile */
  line-height: 1.5;
}

/* Remove list styles for navigation/layout lists */
nav ul,
nav ol,
[role="list"] {
  list-style: none;
}

/* Set shorter line heights on headings */
h1,
h2,
h3,
h4,
h5,
h6 {
  line-height: 1.2;
}

/* Balance text wrapping on headings */
h1,
h2,
h3,
h4 {
  text-wrap: balance;
}

/* A elements that don't have a class get default styles */
a:not([class]) {
  text-decoration-skip-ink: auto;
  color: currentColor;
}

/* Make images easier to work with */
img,
picture,
svg,
video {
  max-width: 100%;
  display: block;
}

/* Inherit fonts for inputs and buttons */
input,
button,
textarea,
select {
  font: inherit;
}

/* Make sure textareas without rows don't shrink */
textarea:not([rows]) {
  min-height: 10em;
}

/* Anything that has been anchored to should have extra scroll margin */
:target {
  scroll-margin-block: 5ex;
}

/* Remove all animations and transitions for people that prefer not to see them */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

}
@layer tokens;

/* ==========================================================================
   Rakui CSS - Design Tokens
   CSS custom properties for theming and consistent design
   ========================================================================== */

@layer tokens {

:root {
  color-scheme: light dark;

  /* ==========================================================================
     Spacing Scale
     ========================================================================== */
  --spacing-xs: 0.25rem;   /* 4px */
  --spacing-sm: 0.5rem;    /* 8px */
  --spacing-md: 0.75rem;   /* 12px */
  --spacing-base: 1rem;    /* 16px */
  --spacing-lg: 1.5rem;    /* 24px */
  --spacing-xl: 2rem;      /* 32px */
  --spacing-2xl: 3rem;     /* 48px */
  --spacing-3xl: 4rem;     /* 64px */

  /* ==========================================================================
     Typography
     ========================================================================== */
  --font-mono: Monaco, 'Courier New', Consolas, monospace;

  --font-size-xs: 0.75rem;   /* 12px */
  --font-size-sm: 0.875rem;  /* 14px */
  --font-size-base: 1rem;    /* 16px */
  --font-size-lg: 1.2rem;    /* 19.2px */
  --font-size-xl: 1.5rem;    /* 24px */
  --font-size-2xl: 2rem;     /* 32px */
  --font-size-3xl: 2.5rem;   /* 40px */

  --line-height-tight: 1.2;
  --line-height-base: 1.5;
  --line-height-loose: 1.75;

  --letter-spacing-tight: 0.025em;
  --letter-spacing-normal: 0.05em;
  --letter-spacing-wide: 0.1em;

  /* ==========================================================================
     Borders
     ========================================================================== */
  --border-width: 1px;
  --border-radius: 0;  /* Brutalist: no rounded corners */

  /* ==========================================================================
     Transitions
     ========================================================================== */
  --transition-fast: 0.15s ease;
  --transition-base: 0.2s ease;

  /* ==========================================================================
     Container Widths
     ========================================================================== */
  --container-sm: 500px;
  --container-md: 768px;
  --container-lg: 1024px;
  --container-xl: 1200px;

  /* ==========================================================================
     Z-Index Scale
     ========================================================================== */
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-fixed: 300;
  --z-modal: 400;
  --z-tooltip: 500;

  /* ==========================================================================
     Breakpoints (for reference - CSS media queries require literal values)
     ========================================================================== */
  /* --breakpoint-tablet: 640px; */
  /* --breakpoint-desktop: 1024px; */

  /* ==========================================================================
     Theme Colors using light-dark()
     ========================================================================== */
  --color-bg: light-dark(#ffffff, #000000);
  --color-fg: light-dark(#000000, #ffffff);
  --color-accent: light-dark(#f5f5f5, #1a1a1a);
  --color-muted: light-dark(#666666, #888888);

  /* Status colors */
  --color-error: light-dark(#cc0000, #ff0000);
  --color-success: light-dark(#008800, #00ff00);
  --color-warning: light-dark(#cc8800, #ffaa00);
  --color-info: light-dark(#1976d2, #2196f3);

  /* Derived tokens */
  --border-color: var(--color-fg);
  --border-standard: var(--border-width) solid var(--border-color);
}

/* ==========================================================================
   Manual Theme Override (via data-theme attribute)
   ========================================================================== */
[data-theme="light"] {
  --color-bg: #ffffff;
  --color-fg: #000000;
  --color-accent: #f5f5f5;
  --color-muted: #666666;
  --color-error: #cc0000;
  --color-success: #008800;
  --color-warning: #cc8800;
  --color-info: #1976d2;
}

[data-theme="dark"] {
  --color-bg: #000000;
  --color-fg: #ffffff;
  --color-accent: #1a1a1a;
  --color-muted: #888888;
  --color-error: #ff0000;
  --color-success: #00ff00;
  --color-warning: #ffaa00;
  --color-info: #2196f3;
}

}
@layer base;

/* ==========================================================================
   Rakui CSS - Base Styles
   Foundation styles for HTML elements
   ========================================================================== */

@layer base {

/* ==========================================================================
   Document
   ========================================================================== */
html {
  font-size: 16px;
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-mono);
  font-size: var(--font-size-base);
  line-height: var(--line-height-base);
  letter-spacing: var(--letter-spacing-normal);
  color: var(--color-fg);
  background-color: var(--color-bg);
  min-height: 100vh;
  min-height: 100dvh; /* Dynamic viewport for mobile */
  display: flex;
  flex-direction: column;
}

/* ==========================================================================
   Selection
   ========================================================================== */
::selection {
  background-color: var(--color-fg);
  color: var(--color-bg);
}

/* ==========================================================================
   Focus States
   ========================================================================== */
:focus-visible {
  outline: 2px solid var(--color-fg);
  outline-offset: 2px;
}

/* ==========================================================================
   Links
   ========================================================================== */
a {
  color: var(--color-fg);
  text-decoration: underline;
  transition: all var(--transition-base);
}

a:hover {
  background-color: var(--color-fg);
  color: var(--color-bg);
}

/* ==========================================================================
   Horizontal Rule
   ========================================================================== */
hr {
  border: none;
  border-top: var(--border-standard);
  margin: var(--spacing-xl) 0;
}

/* ==========================================================================
   Code Elements
   ========================================================================== */
code,
kbd,
samp,
pre {
  font-family: var(--font-mono);
}

code {
  padding: 0.2em 0.4em;
  background-color: var(--color-accent);
  border: var(--border-standard);
  font-size: 0.9em;
}

pre {
  padding: var(--spacing-lg);
  background-color: var(--color-accent);
  border: var(--border-standard);
  overflow-x: auto;
}

pre code {
  padding: 0;
  background-color: transparent;
  border: none;
  font-size: inherit;
}

kbd {
  padding: 0.2em 0.4em;
  background-color: var(--color-fg);
  color: var(--color-bg);
  font-size: 0.9em;
}

/* ==========================================================================
   Blockquote
   ========================================================================== */
blockquote {
  margin: var(--spacing-lg) 0;
  padding: var(--spacing-base) var(--spacing-lg);
  border-left: 3px solid var(--color-fg);
  background-color: var(--color-accent);
}

blockquote p:last-child {
  margin-bottom: 0;
}

/* ==========================================================================
   Mark (Highlight)
   ========================================================================== */
mark {
  background-color: var(--color-warning);
  color: var(--color-bg);
  padding: 0.1em 0.2em;
}

/* ==========================================================================
   Abbreviation
   ========================================================================== */
abbr[title] {
  text-decoration: underline dotted;
  cursor: help;
}

/* ==========================================================================
   Small Text
   ========================================================================== */
small {
  font-size: var(--font-size-sm);
}

/* ==========================================================================
   Superscript & Subscript
   ========================================================================== */
sub,
sup {
  font-size: 0.75em;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sup {
  top: -0.5em;
}

sub {
  bottom: -0.25em;
}

/* ==========================================================================
   Main Content Area
   ========================================================================== */
main {
  flex: 1;
}

}
@layer layout;

/* ==========================================================================
   Rakui CSS - Layout
   Containers, grid, and responsive utilities
   ========================================================================== */

@layer layout {

/* ==========================================================================
   Containers
   ========================================================================== */
.container {
  width: 100%;
  margin-inline: auto;
  padding-inline: var(--spacing-base);
}

/* Tablet and up */
@media (min-width: 640px) {
  .container {
    padding-inline: var(--spacing-lg);
    max-width: var(--container-lg);
  }
}

/* Desktop */
@media (min-width: 1024px) {
  .container {
    padding-inline: var(--spacing-xl);
    max-width: var(--container-xl);
  }
}

/* Container Variants */
.container-sm {
  max-width: var(--container-sm);
}

.container-md {
  max-width: var(--container-md);
}

.container-lg {
  max-width: var(--container-lg);
}

.container-xl {
  max-width: var(--container-xl);
}

.container-full {
  max-width: none;
}

/* ==========================================================================
   Section
   ========================================================================== */
.section {
  padding-block: var(--spacing-2xl);
}

@media (min-width: 640px) {
  .section {
    padding-block: var(--spacing-3xl);
  }
}

/* ==========================================================================
   Grid System
   ========================================================================== */
.grid {
  display: grid;
  gap: var(--spacing-base);
}

.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);
}

/* Responsive grid - viewport based */
@media (min-width: 640px) {
  .tablet\:grid-cols-2 {
    grid-template-columns: repeat(2, 1fr);
  }

  .tablet\:grid-cols-3 {
    grid-template-columns: repeat(3, 1fr);
  }

  .tablet\:grid-cols-4 {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (min-width: 1024px) {
  .desktop\:grid-cols-2 {
    grid-template-columns: repeat(2, 1fr);
  }

  .desktop\:grid-cols-3 {
    grid-template-columns: repeat(3, 1fr);
  }

  .desktop\:grid-cols-4 {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* Grid gaps */
.gap-sm {
  gap: var(--spacing-sm);
}

.gap-md {
  gap: var(--spacing-md);
}

.gap-base {
  gap: var(--spacing-base);
}

.gap-lg {
  gap: var(--spacing-lg);
}

.gap-xl {
  gap: var(--spacing-xl);
}

/* Auto-responsive Grids */
.grid-auto-sm {
  display: grid;
  gap: var(--spacing-base);
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

.grid-auto-md {
  display: grid;
  gap: var(--spacing-base);
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

.grid-auto-lg {
  display: grid;
  gap: var(--spacing-base);
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
}

/* ==========================================================================
   Flexbox
   ========================================================================== */
.flex {
  display: flex;
}

.flex-col {
  flex-direction: column;
}

.flex-row {
  flex-direction: row;
}

.flex-wrap {
  flex-wrap: wrap;
}

.flex-nowrap {
  flex-wrap: nowrap;
}

/* 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;
}

/* Align items */
.items-start {
  align-items: flex-start;
}

.items-end {
  align-items: flex-end;
}

.items-center {
  align-items: center;
}

.items-stretch {
  align-items: stretch;
}

.items-baseline {
  align-items: baseline;
}

/* Flex item properties */
.flex-1 {
  flex: 1;
}

.flex-auto {
  flex: auto;
}

.flex-none {
  flex: none;
}

.flex-grow {
  flex-grow: 1;
}

.flex-shrink {
  flex-shrink: 1;
}

/* ==========================================================================
   Responsive Display
   ========================================================================== */
.hide {
  display: none;
}

.show {
  display: block;
}

/* Hide on mobile, show on tablet+ */
.hide-mobile {
  display: none;
}

@media (min-width: 640px) {
  .hide-mobile {
    display: block;
  }

  .show-mobile {
    display: none;
  }
}

/* Hide on tablet, show on desktop+ */
@media (min-width: 640px) and (max-width: 1023px) {
  .hide-tablet {
    display: none;
  }
}

@media (min-width: 1024px) {
  .show-tablet {
    display: none;
  }

  .hide-desktop {
    display: none;
  }
}

/* ==========================================================================
   Responsive Stack
   Stack items vertically on mobile, horizontally on larger screens
   ========================================================================== */
.stack {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-base);
}

@media (min-width: 640px) {
  .stack {
    flex-direction: row;
  }
}

/* Always stack vertically */
.stack-always {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-base);
}

/* ==========================================================================
   Center Content
   ========================================================================== */
.center {
  display: flex;
  place-items: center;
}

.center-text {
  text-align: center;
}

}
@layer components;

/* ==========================================================================
   Rakui CSS - Badges Component
   Status badges, labels, and indicators
   ========================================================================== */

@layer components {

/* ==========================================================================
   Base Badge
   ========================================================================== */
.badge {
  display: inline-block;
  padding: var(--spacing-xs) var(--spacing-sm);
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
  line-height: 1;
  text-align: center;
  white-space: nowrap;
  vertical-align: baseline;
  border: var(--border-standard);
  background-color: var(--color-bg);
  color: var(--color-fg);
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-wide);
}

/* ==========================================================================
   Badge Variants
   ========================================================================== */

/* Error/Danger */
.badge-error {
  border-color: var(--color-error);
  color: var(--color-error);
}

/* Success */
.badge-success {
  border-color: var(--color-success);
  color: var(--color-success);
}

/* Warning */
.badge-warning {
  border-color: var(--color-warning);
  color: var(--color-warning);
}

/* Info */
.badge-info {
  border-color: var(--color-info);
  color: var(--color-info);
}

/* Muted/Neutral */
.badge-muted {
  border-color: var(--color-muted);
  color: var(--color-muted);
}

/* ==========================================================================
   Filled Badges
   ========================================================================== */
.badge-filled {
  background-color: var(--color-fg);
  color: var(--color-bg);
}

.badge-filled.badge-error {
  background-color: var(--color-error);
  border-color: var(--color-error);
  color: var(--color-bg);
}

.badge-filled.badge-success {
  background-color: var(--color-success);
  border-color: var(--color-success);
  color: var(--color-bg);
}

.badge-filled.badge-warning {
  background-color: var(--color-warning);
  border-color: var(--color-warning);
  color: light-dark(#000000, #000000); /* Dark text for contrast on yellow */
}

.badge-filled.badge-info {
  background-color: var(--color-info);
  border-color: var(--color-info);
  color: var(--color-bg);
}

.badge-filled.badge-muted {
  background-color: var(--color-muted);
  border-color: var(--color-muted);
  color: var(--color-bg);
}

/* ==========================================================================
   Badge Sizes
   ========================================================================== */

/* Small */
.badge-sm {
  padding: var(--spacing-xs) var(--spacing-xs);
  font-size: var(--font-size-xs);
}

/* Large */
.badge-lg {
  padding: var(--spacing-sm) var(--spacing-md);
  font-size: var(--font-size-sm);
}

/* ==========================================================================
   Status Badges (Common use cases)
   ========================================================================== */
.status-draft {
  border-color: var(--color-muted);
  color: var(--color-muted);
}

.status-pending {
  border-color: var(--color-warning);
  color: var(--color-warning);
}

.status-active,
.status-published {
  border-color: var(--color-success);
  color: var(--color-success);
}

.status-inactive,
.status-archived {
  border-color: var(--color-muted);
  color: var(--color-muted);
}

.status-error,
.status-failed {
  border-color: var(--color-error);
  color: var(--color-error);
}

.status-sent {
  border-color: var(--color-info);
  color: var(--color-info);
}

.status-paid {
  border-color: var(--color-success);
  color: var(--color-success);
}

.status-cancelled {
  border-color: var(--color-error);
  color: var(--color-error);
}

/* ==========================================================================
   Badge with Dot Indicator
   ========================================================================== */
.badge-dot {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-xs);
}

.badge-dot::before {
  content: "";
  display: inline-block;
  width: var(--spacing-xs);
  height: var(--spacing-xs);
  background-color: currentColor;
}

/* ==========================================================================
   Pill Badge (for counts, notifications)
   ========================================================================== */
.badge-pill {
  padding: var(--spacing-xs) var(--spacing-sm);
  min-width: var(--spacing-lg);
  text-align: center;
}

/* Notification count badge */
.badge-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--spacing-base);
  height: var(--spacing-base);
  padding: 0 var(--spacing-xs);
  font-size: var(--font-size-xs);
  background-color: var(--color-fg);
  color: var(--color-bg);
  border: none;
}

.badge-count.badge-error {
  background-color: var(--color-error);
}

.badge-count.badge-success {
  background-color: var(--color-success);
}

/* ==========================================================================
   Badge Groups
   ========================================================================== */
.badge-group {
  display: inline-flex;
  flex-wrap: wrap;
  gap: var(--spacing-xs);
}

/* ==========================================================================
   Tag (Removable badge, but styled for pure CSS)
   ========================================================================== */
.tag {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-xs);
  padding: var(--spacing-xs) var(--spacing-sm);
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
  border: var(--border-standard);
  background-color: var(--color-bg);
  color: var(--color-fg);
}

.tag-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--spacing-base);
  height: var(--spacing-base);
  margin-left: var(--spacing-xs);
  margin-right: calc(-1 * var(--spacing-xs));
  font-size: var(--font-size-xs);
  text-decoration: none;
  color: inherit;
  transition: all var(--transition-base);
}

.tag-remove:hover {
  background-color: var(--color-fg);
  color: var(--color-bg);
}

/* ==========================================================================
   Badge in Text
   For inline badges within text content
   ========================================================================== */
p .badge,
span .badge,
a .badge {
  vertical-align: middle;
  margin-left: var(--spacing-xs);
}

/* ==========================================================================
   Badge attached to elements (e.g., notification count on icon)
   ========================================================================== */
.badge-container {
  position: relative;
  display: inline-block;
}

.badge-attached {
  position: absolute;
  top: calc(-1 * var(--spacing-sm));
  right: calc(-1 * var(--spacing-sm));
}

}
@layer components;

/* ==========================================================================
   Rakui CSS - Buttons Component
   Button styles with brutalist hover inversion pattern
   ========================================================================== */

@layer components {

/* ==========================================================================
   Base Button
   ========================================================================== */
.btn {
  display: inline-block;
  padding: var(--spacing-md) var(--spacing-xl);
  font-family: var(--font-mono);
  font-size: var(--font-size-base);
  letter-spacing: var(--letter-spacing-normal);
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  vertical-align: middle;
  cursor: pointer;
  user-select: none;
  border: var(--border-standard);
  background-color: var(--color-bg);
  color: var(--color-fg);
  transition: all var(--transition-base);
  min-height: 44px; /* Touch-friendly */
}

/* Hover: Invert colors (signature brutalist pattern) */
@media (hover: hover) {
  .btn:hover {
    background-color: var(--color-fg);
    color: var(--color-bg);
  }
}

/* Focus state */
.btn:focus-visible {
  outline: 2px solid var(--color-fg);
  outline-offset: 2px;
}

/* Active state */
.btn:active {
  background-color: var(--color-fg);
  color: var(--color-bg);
}

/* ==========================================================================
   Button Variants
   ========================================================================== */

/* Primary (filled) */
.btn-primary {
  background-color: var(--color-fg);
  color: var(--color-bg);
}

@media (hover: hover) {
  .btn-primary:hover {
    background-color: var(--color-bg);
    color: var(--color-fg);
  }
}

/* Secondary (transparent) */
.btn-secondary {
  background-color: transparent;
}

@media (hover: hover) {
  .btn-secondary:hover {
    background-color: var(--color-fg);
    color: var(--color-bg);
  }
}

/* Ghost (no border until hover) */
.btn-ghost {
  background-color: transparent;
  border-color: transparent;
}

@media (hover: hover) {
  .btn-ghost:hover {
    background-color: var(--color-fg);
    color: var(--color-bg);
    border-color: var(--color-fg);
  }
}

/* ==========================================================================
   Button Sizes
   ========================================================================== */

/* Small */
.btn-sm {
  padding: var(--spacing-sm) var(--spacing-base);
  font-size: var(--font-size-sm);
  min-height: 36px;
}

/* Large */
.btn-lg {
  padding: var(--spacing-base) var(--spacing-2xl);
  font-size: var(--font-size-lg);
  min-height: 52px;
}

/* ==========================================================================
   Button States
   ========================================================================== */

/* Disabled */
.btn:disabled,
.btn.disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

/* Active (for toggle states, tabs, etc.) */
.btn.active:not(:disabled):not(.disabled) {
  background-color: var(--color-fg);
  color: var(--color-bg);
  text-decoration: underline;
}

/* Loading state */
.btn.loading {
  position: relative;
  color: transparent;
  pointer-events: none;
}

.btn.loading::after {
  content: "...";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  color: var(--color-muted);
}

@media (hover: hover) {
  .btn.loading:hover::after {
    color: var(--color-bg);
  }
}

/* ==========================================================================
   Button Status Colors
   ========================================================================== */

/* Error/Danger */
.btn-error {
  border-color: var(--color-error);
  color: var(--color-error);
}

@media (hover: hover) {
  .btn-error:hover {
    background-color: var(--color-error);
    color: var(--color-bg);
    border-color: var(--color-error);
  }
}

/* Success */
.btn-success {
  border-color: var(--color-success);
  color: var(--color-success);
}

@media (hover: hover) {
  .btn-success:hover {
    background-color: var(--color-success);
    color: var(--color-bg);
    border-color: var(--color-success);
  }
}

/* Warning */
.btn-warning {
  border-color: var(--color-warning);
  color: var(--color-warning);
}

@media (hover: hover) {
  .btn-warning:hover {
    background-color: var(--color-warning);
    color: var(--color-bg);
    border-color: var(--color-warning);
  }
}

/* ==========================================================================
   Full Width Button
   ========================================================================== */
.btn-block {
  display: block;
  width: 100%;
}

/* ==========================================================================
   Button Groups
   ========================================================================== */
.btn-group {
  display: inline-flex;
  width: fit-content;
}

.btn-group .btn + .btn {
  border-inline-start: none;
}

/* Vertical button group */
.btn-group-vertical {
  display: inline-flex;
  flex-direction: column;
  width: fit-content;
}

.btn-group-vertical .btn + .btn {
  border-block-start: none;
}

/* ==========================================================================
   Link styled as button
   ========================================================================== */
a.btn {
  text-decoration: none;
}

@media (hover: hover) {
  a.btn:hover {
    text-decoration: none;
  }
}

/* ==========================================================================
   Icon Button
   ========================================================================== */
.btn-icon {
  padding: var(--spacing-sm);
  min-width: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.btn-icon.btn-sm {
  min-width: 36px;
  min-height: 36px;
  padding: var(--spacing-xs);
}

.btn-icon.btn-lg {
  min-width: 52px;
  min-height: 52px;
  padding: var(--spacing-md);
}

/* ==========================================================================
   Reduced Motion Support
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .btn.loading::after {
    animation: none;
  }
}

}
@layer components;

/* ==========================================================================
   Rakui CSS - Cards Component
   Cards, containers, and info boxes
   ========================================================================== */

@layer components {

/* ==========================================================================
   Base Card
   Using CSS Grid for clean full-bleed headers/footers
   ========================================================================== */
.card {
  display: grid;
  grid-template-columns: var(--spacing-lg) 1fr var(--spacing-lg);
  row-gap: var(--spacing-sm);
  padding-block: var(--spacing-lg);
  border: var(--border-standard);
  background-color: var(--color-bg);
  overflow-x: auto;
}

.card > * {
  grid-column: 2;
  min-width: 0;
}

.card-sm {
  grid-template-columns: var(--spacing-base) 1fr var(--spacing-base);
  padding-block: var(--spacing-base);
}

.card-lg {
  grid-template-columns: var(--spacing-xl) 1fr var(--spacing-xl);
  padding-block: var(--spacing-xl);
}

/* ==========================================================================
   Card Header & Footer (Full-bleed via grid)
   ========================================================================== */
.card-header,
.card-footer {
  grid-column: 1 / -1;
  padding-inline: var(--spacing-lg);
  padding-block: var(--spacing-base);
  background-color: var(--color-accent);
}

.card-header {
  border-bottom: var(--border-standard);
}

.card-footer {
  border-top: var(--border-standard);
}

.card-header:first-child {
  margin-top: calc(-1 * var(--spacing-lg));
}

.card-footer:last-child {
  margin-bottom: calc(-1 * var(--spacing-lg));
}

.card-sm .card-header,
.card-sm .card-footer {
  padding-inline: var(--spacing-base);
  padding-block: var(--spacing-sm);
}

.card-sm .card-header:first-child {
  margin-top: calc(-1 * var(--spacing-base));
}

.card-sm .card-footer:last-child {
  margin-bottom: calc(-1 * var(--spacing-base));
}

.card-lg .card-header,
.card-lg .card-footer {
  padding-inline: var(--spacing-xl);
  padding-block: var(--spacing-lg);
}

.card-lg .card-header:first-child {
  margin-top: calc(-1 * var(--spacing-xl));
}

.card-lg .card-footer:last-child {
  margin-bottom: calc(-1 * var(--spacing-xl));
}

/* ==========================================================================
   Card Title & Text
   ========================================================================== */
.card-title {
  font-size: var(--font-size-lg);
  margin-bottom: var(--spacing-base);
  letter-spacing: var(--letter-spacing-normal);
}

.card-subtitle {
  font-size: var(--font-size-sm);
  color: var(--color-muted);
  margin-top: calc(-1 * var(--spacing-sm));
  margin-bottom: var(--spacing-base);
}

.card-text {
  margin-bottom: var(--spacing-base);
}

.card-text:last-child {
  margin-bottom: 0;
}

/* ==========================================================================
   Clickable Card
   ========================================================================== */
.card-clickable {
  cursor: pointer;
  transition: all var(--transition-base);
}

.card-clickable:hover {
  background-color: var(--color-fg);
  color: var(--color-bg);
}

.card-clickable:hover .card-header,
.card-clickable:hover .card-footer {
  background-color: var(--color-fg);
  border-color: var(--color-bg);
}

.card-clickable:focus {
  outline: 2px solid var(--color-fg);
  outline-offset: 2px;
}

.card-clickable:focus-within {
  outline: 2px solid var(--color-fg);
  outline-offset: 2px;
}

/* ==========================================================================
   Info Box
   ========================================================================== */
.info-box {
  padding: var(--spacing-lg);
  border: var(--border-standard);
  background-color: var(--color-accent);
}

.info-box-sm {
  padding: var(--spacing-base);
}

.info-box-lg {
  padding: var(--spacing-xl);
}

/* ==========================================================================
   Stat Card
   ========================================================================== */
.stat-card {
  padding: var(--spacing-lg);
  border: var(--border-standard);
  min-width: 200px;
}

.stat-label {
  font-size: var(--font-size-sm);
  color: var(--color-muted);
  margin-bottom: var(--spacing-sm);
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-wide);
}

.stat-value {
  font-size: var(--font-size-2xl);
  font-weight: bold;
  line-height: var(--line-height-tight);
}

.stat-change {
  font-size: var(--font-size-sm);
  margin-top: var(--spacing-sm);
}

/* Stat value colors */
.stat-value.success {
  color: var(--color-success);
}

.stat-value.error {
  color: var(--color-error);
}

.stat-value.warning {
  color: var(--color-warning);
}

/* Stat change indicators */
.stat-change.positive {
  color: var(--color-success);
}

.stat-change.positive::before {
  content: "+ ";
}

.stat-change.negative {
  color: var(--color-error);
}

.stat-change.negative::before {
  content: "- ";
}

/* ==========================================================================
   Card Grid
   Intrinsically responsive using auto-fit + minmax
   ========================================================================== */
.card-grid {
  display: grid;
  gap: var(--spacing-base);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
}

/* Specific column counts */
.card-grid-2 {
  display: grid;
  gap: var(--spacing-base);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
}

.card-grid-4 {
  display: grid;
  gap: var(--spacing-base);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
}

/* ==========================================================================
   Card Divider
   ========================================================================== */
.card-divider {
  margin-block: var(--spacing-lg);
  border: none;
  border-top: var(--border-standard);
}

/* ==========================================================================
   Card Actions (Bottom aligned buttons)
   Intrinsically responsive using flex-wrap
   ========================================================================== */
.card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-sm);
  margin-top: var(--spacing-lg);
}

.card-actions .btn {
  flex: 1 1 auto;
  min-width: fit-content;
}

.card-actions-end {
  justify-content: flex-end;
}

.card-actions-between {
  justify-content: space-between;
}

/* ==========================================================================
   Feature Card (Icon + Title + Description)
   ========================================================================== */
.feature-card {
  padding: var(--spacing-xl);
  border: var(--border-standard);
  text-align: center;
}

.feature-icon {
  font-size: var(--font-size-3xl);
  margin-bottom: var(--spacing-base);
}

.feature-title {
  font-size: var(--font-size-lg);
  margin-bottom: var(--spacing-sm);
}

.feature-description {
  font-size: var(--font-size-sm);
  color: var(--color-muted);
}

}
@layer components;

/* ==========================================================================
   Rakui CSS - Forms Component
   Form controls, inputs, labels, and validation states
   ========================================================================== */

@layer components {

/* ==========================================================================
   Form Container
   ========================================================================== */
.form {
  max-width: var(--container-sm);
}

.form-wide {
  max-width: var(--container-md);
}

.form-full {
  max-width: none;
}

/* ==========================================================================
   Form Group
   ========================================================================== */
.form-group {
  margin-bottom: var(--spacing-lg);
}

.form-group:last-child {
  margin-bottom: 0;
}

/* ==========================================================================
   Labels
   ========================================================================== */
.form-label {
  display: block;
  margin-bottom: var(--spacing-sm);
  font-size: var(--font-size-sm);
  letter-spacing: var(--letter-spacing-normal);
}

.form-label-required::after {
  content: " *";
  color: var(--color-error);
}

/* ==========================================================================
   Base Input Styles
   ========================================================================== */
.form-input,
.form-select,
.form-textarea {
  display: block;
  width: 100%;
  padding: var(--spacing-md);
  font-family: var(--font-mono);
  font-size: var(--font-size-base);
  line-height: var(--line-height-base);
  color: var(--color-fg);
  background-color: var(--color-bg);
  border: var(--border-standard);
  transition: all var(--transition-base);
  min-height: 44px; /* Touch-friendly */
}

.form-input:hover,
.form-select:hover,
.form-textarea:hover {
  background-color: var(--color-accent);
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
  outline: none;
  background-color: var(--color-fg);
  color: var(--color-bg);
}

/* Placeholder */
.form-input::placeholder,
.form-textarea::placeholder {
  color: var(--color-muted);
  opacity: 1;
}

.form-input:focus::placeholder,
.form-textarea:focus::placeholder {
  color: var(--color-muted);
}

/* Selection in focused inputs (inverted/colored backgrounds need visible selection) */
.form-input:focus::selection,
.form-select:focus::selection,
.form-textarea:focus::selection {
  background-color: var(--color-bg);
  color: var(--color-fg);
}

/* ==========================================================================
   Textarea
   ========================================================================== */
.form-textarea {
  min-height: 120px;
  resize: vertical;
}

.form-textarea-sm {
  min-height: 80px;
}

.form-textarea-lg {
  min-height: 200px;
}

/* ==========================================================================
   Select

   Note on arrow SVG duplication:
   The dropdown arrow color must be baked into each SVG data URI because
   CSS custom properties and currentColor don't work inside data URIs.
   The alternative (mask-image + currentColor) would require wrapping every
   <select> in a container element, which is a worse DX trade-off.
   ========================================================================== */
.form-select {
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23ffffff' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--spacing-md) center;
  padding-right: var(--spacing-2xl);
}

/* Light mode select arrow (system preference) */
@media (prefers-color-scheme: light) {
  .form-select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23000000' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
  }
}

/* Light mode select arrow (manual override) */
[data-theme="light"] .form-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23000000' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
}

/* Dark mode select arrow (manual override) */
[data-theme="dark"] .form-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23ffffff' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
}

/* Focus state - inverted arrow colors */
.form-select:focus {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23000000' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
}

@media (prefers-color-scheme: light) {
  .form-select:focus {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23ffffff' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
  }
}

[data-theme="light"] .form-select:focus {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23ffffff' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
}

[data-theme="dark"] .form-select:focus {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23000000' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
}

/* ==========================================================================
   Checkbox & Radio
   ========================================================================== */
.form-check {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-sm);
  margin-bottom: var(--spacing-sm);
  cursor: pointer;
  min-height: 44px; /* Touch-friendly */
  padding: var(--spacing-sm) 0;
}

.form-check:last-child {
  margin-bottom: 0;
}

.form-check-input {
  flex-shrink: 0;
  width: var(--spacing-base);
  height: var(--spacing-base);
  margin-top: var(--spacing-xs);
  cursor: pointer;
  accent-color: var(--color-fg);
}

.form-check-input:focus-visible {
  outline: 2px solid var(--color-fg);
  outline-offset: 2px;
}

.form-check-label {
  cursor: pointer;
  user-select: none;
}

/* Inline checkboxes/radios */
.form-check-inline {
  display: inline-flex;
  margin-right: var(--spacing-lg);
}

/* ==========================================================================
   File Input
   ========================================================================== */
.form-file {
  display: block;
  width: 100%;
  padding: var(--spacing-md);
  font-family: var(--font-mono);
  font-size: var(--font-size-base);
  border: var(--border-standard);
  background-color: var(--color-bg);
  cursor: pointer;
  min-height: 44px;
}

.form-file::file-selector-button {
  padding: var(--spacing-sm) var(--spacing-md);
  font-family: var(--font-mono);
  font-size: var(--font-size-sm);
  background-color: var(--color-fg);
  color: var(--color-bg);
  border: var(--border-standard);
  margin-right: var(--spacing-md);
  cursor: pointer;
}

/* ==========================================================================
   Range Input
   ========================================================================== */
.form-range {
  width: 100%;
  height: 44px;
  accent-color: var(--color-fg);
  cursor: pointer;
}

/* ==========================================================================
   Color Input
   ========================================================================== */
.form-color {
  width: 100%;
  height: 44px;
  padding: var(--spacing-xs);
  border: var(--border-standard);
  background-color: var(--color-bg);
  cursor: pointer;
}

/* ==========================================================================
   Help Text
   ========================================================================== */
.form-help {
  display: block;
  margin-top: var(--spacing-sm);
  font-size: var(--font-size-sm);
  color: var(--color-muted);
}

/* ==========================================================================
   Validation States
   ========================================================================== */

/* Error */
.form-input.error,
.form-select.error,
.form-textarea.error {
  border-color: var(--color-error);
}

.form-input.error:focus,
.form-select.error:focus,
.form-textarea.error:focus {
  background-color: var(--color-error);
  border-color: var(--color-error);
}

.form-help.error {
  color: var(--color-error);
}

.form-group.error .form-label {
  color: var(--color-error);
}

/* Success */
.form-input.success,
.form-select.success,
.form-textarea.success {
  border-color: var(--color-success);
}

.form-input.success:focus,
.form-select.success:focus,
.form-textarea.success:focus {
  background-color: var(--color-success);
  border-color: var(--color-success);
}

.form-help.success {
  color: var(--color-success);
}

/* Warning */
.form-input.warning,
.form-select.warning,
.form-textarea.warning {
  border-color: var(--color-warning);
}

.form-input.warning:focus,
.form-select.warning:focus,
.form-textarea.warning:focus {
  background-color: var(--color-warning);
  border-color: var(--color-warning);
}

.form-help.warning {
  color: var(--color-warning);
}

/* ==========================================================================
   Native HTML5 Validation States
   ========================================================================== */

/* :user-invalid only triggers after user interaction, avoiding red borders
   on page load for empty required fields. Supported in Chrome 119+,
   Firefox 88+, Safari 16.5+. */
.form-input:user-invalid,
.form-select:user-invalid,
.form-textarea:user-invalid {
  border-color: var(--color-error);
}

.form-input:required,
.form-select:required,
.form-textarea:required {
  /* Visual indicator for required fields handled by .form-label-required */
}

/* ==========================================================================
   Disabled State
   ========================================================================== */
.form-input:disabled,
.form-select:disabled,
.form-textarea:disabled,
.form-check-input:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.form-check-input:disabled + .form-check-label {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ==========================================================================
   Input Sizes
   ========================================================================== */

/* Small */
.form-input-sm,
.form-select-sm {
  padding: var(--spacing-sm) var(--spacing-md);
  font-size: var(--font-size-sm);
  min-height: 36px;
}

/* Large */
.form-input-lg,
.form-select-lg {
  padding: var(--spacing-base) var(--spacing-lg);
  font-size: var(--font-size-lg);
  min-height: 52px;
}

/* ==========================================================================
   Form Row (Inline Fields)
   ========================================================================== */
.form-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-base);
  margin-bottom: var(--spacing-lg);
  container-type: inline-size;
}

.form-row:last-child {
  margin-bottom: 0;
}

.form-row .form-group {
  flex: 1;
  min-width: 100%;
  margin-bottom: 0;
}

/* Inline when container is wide enough */
@container (min-width: 400px) {
  .form-row .form-group {
    min-width: 150px;
  }
}

/* ==========================================================================
   Input Group (Input with Add-ons)
   ========================================================================== */
.input-group {
  display: flex;
}

.input-group .form-input {
  flex: 1;
}

.input-group .form-input:not(:first-child) {
  border-left: none;
}

.input-group .form-input:not(:last-child) {
  border-right: none;
}

.input-group-text {
  display: flex;
  align-items: center;
  padding: var(--spacing-md);
  font-family: var(--font-mono);
  font-size: var(--font-size-base);
  color: var(--color-fg);
  background-color: var(--color-accent);
  border: var(--border-standard);
  white-space: nowrap;
}

.input-group .btn {
  min-height: auto;
}

.input-group .btn:not(:first-child) {
  border-left: none;
}

}
@layer components;

/* ==========================================================================
   Rakui CSS - Messages Component
   Alerts, notifications, and status messages
   ========================================================================== */

@layer components {

/* ==========================================================================
   Base Message
   ========================================================================== */
.message {
  padding: var(--spacing-base) var(--spacing-lg);
  border: var(--border-standard);
  background-color: var(--color-bg);
  margin-bottom: var(--spacing-lg);
}

.message:last-child {
  margin-bottom: 0;
}

/* ==========================================================================
   Message Variants
   ========================================================================== */

/* Error */
.message-error {
  border-color: var(--color-error);
  color: var(--color-error);
}

/* Success */
.message-success {
  border-color: var(--color-success);
  color: var(--color-success);
}

/* Warning */
.message-warning {
  border-color: var(--color-warning);
  color: var(--color-warning);
}

/* Info */
.message-info {
  border-color: var(--color-info);
  color: var(--color-info);
}

/* ==========================================================================
   Message with Icon
   ========================================================================== */
.message-with-icon {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-base);
}

.message-icon {
  flex-shrink: 0;
  font-size: var(--font-size-lg);
}

.message-content {
  flex: 1;
}

/* ==========================================================================
   Message Title & Text
   ========================================================================== */
.message-title {
  font-size: var(--font-size-base);
  font-weight: bold;
  margin-bottom: var(--spacing-sm);
}

.message-text {
  font-size: var(--font-size-base);
}

.message-text:last-child {
  margin-bottom: 0;
}

/* ==========================================================================
   Dismissible Message (Pure CSS using :target)
   ========================================================================== */
.message-dismissible {
  position: relative;
  padding-right: calc(var(--spacing-lg) + 44px);
}

.message-close {
  position: absolute;
  top: 50%;
  right: var(--spacing-base);
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: var(--border-standard);
  background-color: transparent;
  color: inherit;
  cursor: pointer;
  text-decoration: none;
  font-size: var(--font-size-lg);
  transition: all var(--transition-base);
}

.message-close:hover {
  background-color: var(--color-fg);
  color: var(--color-bg);
}

.message-close:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

/* Hide dismissible messages when targeted */
.message-dismissible:target {
  display: none;
}

/* Error close button */
.message-error .message-close {
  border-color: var(--color-error);
}

.message-error .message-close:hover {
  background-color: var(--color-error);
  color: var(--color-bg);
}

/* Success close button */
.message-success .message-close {
  border-color: var(--color-success);
}

.message-success .message-close:hover {
  background-color: var(--color-success);
  color: var(--color-bg);
}

/* Warning close button */
.message-warning .message-close {
  border-color: var(--color-warning);
}

.message-warning .message-close:hover {
  background-color: var(--color-warning);
  color: var(--color-bg);
}

/* Info close button */
.message-info .message-close {
  border-color: var(--color-info);
}

.message-info .message-close:hover {
  background-color: var(--color-info);
  color: var(--color-bg);
}

/* ==========================================================================
   Inline Message (Small, inline with text)
   ========================================================================== */
.message-inline {
  display: inline-block;
  padding: var(--spacing-sm) var(--spacing-base);
  margin-bottom: 0;
  font-size: var(--font-size-sm);
}

/* ==========================================================================
   Full Width Message (For top of page alerts)
   ========================================================================== */
.message-banner {
  margin: 0;
  border-left: none;
  border-right: none;
  border-top: none;
  text-align: center;
}

/* ==========================================================================
   Message List
   ========================================================================== */
.message-list {
  list-style: none;
  padding-left: var(--spacing-lg);
}

.message-list li {
  position: relative;
  margin-bottom: var(--spacing-sm);
}

.message-list li::before {
  content: ">";
  position: absolute;
  left: calc(-1 * var(--spacing-lg));
}

.message-list li:last-child {
  margin-bottom: 0;
}

/* ==========================================================================
   Empty State
   ========================================================================== */
.empty-state {
  padding: var(--spacing-3xl) var(--spacing-lg);
  text-align: center;
  border: var(--border-standard);
  border-style: dashed;
}

.empty-state-icon {
  font-size: var(--font-size-3xl);
  color: var(--color-muted);
  margin-bottom: var(--spacing-lg);
}

.empty-state-title {
  font-size: var(--font-size-lg);
  margin-bottom: var(--spacing-sm);
}

.empty-state-text {
  font-size: var(--font-size-base);
  color: var(--color-muted);
  margin-bottom: var(--spacing-lg);
}

.empty-state-action {
  margin-top: var(--spacing-lg);
}

/* ==========================================================================
   Loading State
   ========================================================================== */
.loading:not(.btn) {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-2xl);
  color: var(--color-muted);
}

.loading-spinner {
  font-size: var(--font-size-2xl);
  margin-bottom: var(--spacing-base);
  animation: loading-blink 1s step-start infinite;
}

@keyframes loading-blink {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
}

.loading-text {
  font-size: var(--font-size-sm);
  letter-spacing: var(--letter-spacing-wide);
  text-transform: uppercase;
}

/* Inline loading */
.loading-inline {
  display: inline-flex;
  flex-direction: row;
  padding: 0;
  gap: var(--spacing-sm);
}

.loading-inline .loading-spinner {
  font-size: inherit;
  margin-bottom: 0;
}

.loading-inline .loading-text {
  font-size: inherit;
  text-transform: none;
  letter-spacing: inherit;
}

/* ==========================================================================
   Reduced Motion Support
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .loading-spinner {
    animation: none;
  }
}

}
@layer components;

/* ==========================================================================
   Rakui CSS - Navigation Component
   Navbar, links, and pure CSS dropdowns
   ========================================================================== */

@layer components {

/* ==========================================================================
   Navbar
   ========================================================================== */
.navbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--spacing-base) var(--spacing-lg);
  border-bottom: var(--border-standard);
  background-color: var(--color-bg);
}

@media (min-width: 640px) {
  .navbar {
    padding: var(--spacing-lg) var(--spacing-xl);
  }
}

/* ==========================================================================
   Navbar Container
   ========================================================================== */
.navbar-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  max-width: var(--container-xl);
  margin: 0 auto;
  container-type: inline-size;
}

/* ==========================================================================
   Brand
   ========================================================================== */
.navbar-brand {
  font-size: var(--font-size-lg);
  font-weight: normal;
  letter-spacing: var(--letter-spacing-wide);
  text-decoration: none;
  color: var(--color-fg);
  transition: all var(--transition-base);
}

.navbar-brand:hover,
.navbar-brand:focus {
  background-color: var(--color-fg);
  color: var(--color-bg);
  padding: 0 var(--spacing-sm);
  margin: 0 calc(-1 * var(--spacing-sm));
}

/* ==========================================================================
   Nav Links
   ========================================================================== */
.nav-links {
  display: flex;
  align-items: center;
  gap: var(--spacing-base);
  list-style: none;
}

/* Hide nav links on mobile/tablet when .hide-mobile is applied */
.nav-links.hide-mobile {
  display: none;
}

@container (min-width: 1024px) {
  .nav-links.hide-mobile {
    display: flex;
  }
  .nav-links {
    gap: var(--spacing-lg);
  }
}

/* ==========================================================================
   Nav Link
   ========================================================================== */
.nav-link {
  display: inline-block;
  padding: var(--spacing-sm) var(--spacing-md);
  font-size: var(--font-size-base);
  text-decoration: none;
  color: var(--color-fg);
  border: var(--border-standard);
  background-color: transparent;
  transition: all var(--transition-base);
  min-height: 44px; /* Touch-friendly */
  display: flex;
  align-items: center;
}

.nav-link:hover,
.nav-link:focus {
  background-color: var(--color-fg);
  color: var(--color-bg);
}

.nav-link.active {
  background-color: var(--color-fg);
  color: var(--color-bg);
  text-decoration: underline;
}

/* Ghost nav link (no border) */
.nav-link-ghost {
  border-color: transparent;
}

.nav-link-ghost:hover,
.nav-link-ghost:focus {
  border-color: var(--color-fg);
}

/* ==========================================================================
   Nav Dropdown (Pure CSS)
   ========================================================================== */
.nav-dropdown {
  position: relative;
}

.nav-dropdown-toggle {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-sm) var(--spacing-md);
  font-size: var(--font-size-base);
  text-decoration: none;
  color: var(--color-fg);
  border: var(--border-standard);
  background-color: transparent;
  cursor: pointer;
  transition: all var(--transition-base);
  min-height: 44px;
}

.nav-dropdown-toggle::after {
  content: "▼";
  font-size: var(--font-size-xs);
  transition: transform var(--transition-base);
}

.nav-dropdown-toggle:hover,
.nav-dropdown-toggle:focus {
  background-color: var(--color-fg);
  color: var(--color-bg);
}

/* Dropdown Menu */
.nav-dropdown-menu {
  display: none;
  position: absolute;
  top: calc(100% - 1px);
  left: 0;
  min-width: 200px;
  background-color: var(--color-bg);
  border: var(--border-standard);
  border-top: none;
  z-index: var(--z-dropdown);
}

/* Show menu on hover or keyboard focus */
.nav-dropdown:hover .nav-dropdown-menu,
.nav-dropdown:focus-within .nav-dropdown-menu {
  display: block;
}

/* Rotate arrow on hover or keyboard focus */
.nav-dropdown:hover .nav-dropdown-toggle::after,
.nav-dropdown:focus-within .nav-dropdown-toggle::after {
  transform: rotate(180deg);
}

/* Keep toggle styled when dropdown is open */
.nav-dropdown:hover .nav-dropdown-toggle,
.nav-dropdown:focus-within .nav-dropdown-toggle {
  background-color: var(--color-fg);
  color: var(--color-bg);
}

/* Dropdown Items */
.nav-dropdown-item {
  display: block;
  padding: var(--spacing-md) var(--spacing-lg);
  font-size: var(--font-size-base);
  text-decoration: none;
  color: var(--color-fg);
  border-bottom: var(--border-standard);
  transition: all var(--transition-base);
  min-height: 44px;
}

.nav-dropdown-item:last-child {
  border-bottom: none;
}

.nav-dropdown-item:hover,
.nav-dropdown-item:focus {
  background-color: var(--color-fg);
  color: var(--color-bg);
}

.nav-dropdown-item.active {
  background-color: var(--color-fg);
  color: var(--color-bg);
}

/* Dropdown Divider */
.nav-dropdown-divider {
  height: 0;
  margin: 0;
  border: none;
  border-top: var(--border-standard);
}

/* Right-aligned dropdown */
.nav-dropdown-right .nav-dropdown-menu {
  left: auto;
  right: 0;
}

/* ==========================================================================
   Mobile Navigation
   Uses HTML Popover API (no JS required)

   Accessibility features (native):
   - Escape key closes menu
   - Click outside closes menu (light dismiss)
   - Focus returns to toggle button on close
   - Semantic aria-controls/aria-expanded relationship

   Remaining limitations (CSS-only constraint):
   - No focus trapping (Tab can leave menu)
   - Focus doesn't auto-move into menu on open

   For full WCAG compliance, enhance with JavaScript.
   ========================================================================== */

/* Mobile menu toggle button */
.nav-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: var(--border-standard);
  background-color: transparent;
  color: var(--color-fg);
  cursor: pointer;
  transition: all var(--transition-base);
}

.nav-toggle:hover,
.nav-toggle:focus {
  background-color: var(--color-fg);
  color: var(--color-bg);
}

/* Hamburger icon using CSS */
.nav-toggle-icon {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
  width: var(--spacing-base);
}

.nav-toggle-icon span {
  display: block;
  height: 2px;
  background-color: currentColor;
  transition: all var(--transition-base);
}

/* Hide mobile toggle on desktop */
@container (min-width: 1024px) {
  .nav-toggle {
    display: none;
  }
}

/* Mobile menu wrapper */
.nav-mobile-menu {
  /* Override popover defaults for full-screen menu */
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  border: none;
  overflow: visible;

  /* Menu styling */
  background-color: var(--color-bg);
  color: var(--color-fg);
  padding: var(--spacing-lg);
  flex-direction: column;
}

/* Show when popover is open */
.nav-mobile-menu:popover-open {
  display: flex;
}

/* Hide on desktop even when open */
@container (min-width: 1024px) {
  .nav-mobile-menu:popover-open {
    display: none;
  }
}

/* Mobile menu header */
.nav-mobile-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--spacing-xl);
  padding-bottom: var(--spacing-lg);
  border-bottom: var(--border-standard);
}

/* Close button */
.nav-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: var(--border-standard);
  background-color: transparent;
  color: var(--color-fg);
  cursor: pointer;
  text-decoration: none;
  font-size: var(--font-size-lg);
  transition: all var(--transition-base);
}

.nav-close:hover,
.nav-close:focus {
  background-color: var(--color-fg);
  color: var(--color-bg);
}

/* Mobile nav links */
.nav-mobile-links {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
  list-style: none;
}

.nav-mobile-link {
  display: block;
  padding: var(--spacing-md) var(--spacing-lg);
  font-size: var(--font-size-lg);
  text-decoration: none;
  color: var(--color-fg);
  border: var(--border-standard);
  transition: all var(--transition-base);
}

.nav-mobile-link:hover,
.nav-mobile-link:focus {
  background-color: var(--color-fg);
  color: var(--color-bg);
}

.nav-mobile-link.active {
  background-color: var(--color-fg);
  color: var(--color-bg);
}

/* ==========================================================================
   Breadcrumbs
   ========================================================================== */
.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-sm);
  list-style: none;
  font-size: var(--font-size-sm);
}

.breadcrumb-item {
  display: flex;
  align-items: center;
}

.breadcrumb-item::after {
  content: "/";
  margin-left: var(--spacing-sm);
  color: var(--color-muted);
}

.breadcrumb-item:last-child::after {
  display: none;
}

.breadcrumb-link {
  color: var(--color-fg);
  text-decoration: underline;
}

.breadcrumb-link:hover,
.breadcrumb-link:focus {
  background-color: var(--color-fg);
  color: var(--color-bg);
}

.breadcrumb-item.active {
  color: var(--color-muted);
}

/* ==========================================================================
   Footer
   ========================================================================== */
.footer {
  padding: var(--spacing-xl) var(--spacing-lg);
  border-top: var(--border-standard);
  text-align: center;
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--spacing-lg);
  list-style: none;
  margin-bottom: var(--spacing-lg);
}

.footer-link {
  color: var(--color-fg);
  text-decoration: underline;
}

.footer-link:hover,
.footer-link:focus {
  background-color: var(--color-fg);
  color: var(--color-bg);
}

.footer-text {
  font-size: var(--font-size-sm);
  color: var(--color-muted);
}

}
@layer components;

/* ==========================================================================
   Rakui CSS - Tables Component
   Data tables with responsive wrapper
   ========================================================================== */

@layer components {

/* ==========================================================================
   Table Wrapper (Responsive)
   ========================================================================== */
.table-wrapper {
  width: 100%;
  overflow-x: auto;
}

/* ==========================================================================
   Base Table
   ========================================================================== */
.table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-mono);
  font-size: var(--font-size-base);
}

.table th,
.table td {
  padding: var(--spacing-md) var(--spacing-base);
  text-align: left;
  border-bottom: var(--border-standard);
  vertical-align: top;
}

.table th {
  font-weight: normal;
  text-transform: uppercase;
  font-size: var(--font-size-sm);
  letter-spacing: var(--letter-spacing-wide);
  color: var(--color-muted);
}

/* Last row no border */
.table tbody tr:last-child td {
  border-bottom: none;
}

/* ==========================================================================
   Table Variants
   ========================================================================== */

/* Bordered - all borders */
.table-bordered {
  border: var(--border-standard);
}

.table-bordered th,
.table-bordered td {
  border: var(--border-standard);
}

/* Striped rows */
.table-striped tbody tr:nth-child(odd) {
  background-color: var(--color-accent);
}

/* Compact */
.table-compact th,
.table-compact td {
  padding: var(--spacing-sm) var(--spacing-md);
}

/* ==========================================================================
   Clickable Rows
   ========================================================================== */
.table-clickable tbody tr {
  cursor: pointer;
  transition: all var(--transition-base);
}

.table-clickable tbody tr:hover {
  background-color: var(--color-fg);
  color: var(--color-bg);
}

.table-clickable tbody tr:hover a {
  color: var(--color-bg);
}

/* Focus state for keyboard navigation */
.table-clickable tbody tr:focus {
  outline: 2px solid var(--color-fg);
  outline-offset: -2px;
}

/* ==========================================================================
   Cell Alignment
   ========================================================================== */
.table th.text-left,
.table td.text-left {
  text-align: left;
}

.table th.text-center,
.table td.text-center {
  text-align: center;
}

.table th.text-right,
.table td.text-right {
  text-align: right;
}

.table th.align-top,
.table td.align-top {
  vertical-align: top;
}

.table th.align-middle,
.table td.align-middle {
  vertical-align: middle;
}

.table th.align-bottom,
.table td.align-bottom {
  vertical-align: bottom;
}

/* ==========================================================================
   Numeric Cells
   ========================================================================== */
.table td.numeric {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   Row States
   Note: These states use color only. For accessibility, ensure the content
   itself communicates the status (e.g., "Payment successful" not just green row).
   Consider adding icons or status text for colorblind users.
   ========================================================================== */
.table tr.row-success {
  color: var(--color-success);
}

.table tr.row-error {
  color: var(--color-error);
}

.table tr.row-warning {
  color: var(--color-warning);
}

.table tr.row-muted {
  color: var(--color-muted);
}

/* ==========================================================================
   Table Header Sticky
   ========================================================================== */
.table-sticky thead th {
  position: sticky;
  top: 0;
  background-color: var(--color-bg);
  z-index: var(--z-sticky);
}

/* Add border when scrolled */
.table-sticky thead th {
  box-shadow: inset 0 -1px 0 var(--color-fg);
}

/* ==========================================================================
   Empty State
   ========================================================================== */
.table-empty {
  padding: var(--spacing-2xl);
  text-align: center;
  color: var(--color-muted);
}

/* ==========================================================================
   Table Caption
   ========================================================================== */
.table caption {
  padding: var(--spacing-base);
  font-size: var(--font-size-sm);
  color: var(--color-muted);
  text-align: left;
  caption-side: bottom;
}

/* ==========================================================================
   Sortable Columns
   ========================================================================== */
.table th.sortable {
  cursor: pointer;
  user-select: none;
}

.table th.sortable:hover {
  background-color: var(--color-accent);
}

.table th.sortable::after {
  content: " ↕";
  font-size: var(--font-size-xs);
}

.table th.sortable.sort-asc::after {
  content: " ↑";
}

.table th.sortable.sort-desc::after {
  content: " ↓";
}

/* ==========================================================================
   Responsive Table - Stack on Mobile
   For tables that need to stack on small screens
   ========================================================================== */
@media (max-width: 639px) {
  .table-stack {
    display: block;
  }

  .table-stack thead {
    display: none;
  }

  .table-stack tbody,
  .table-stack tr,
  .table-stack td {
    display: block;
  }

  .table-stack tr {
    padding: var(--spacing-base) 0;
    border-bottom: var(--border-standard);
  }

  .table-stack tr:last-child {
    border-bottom: none;
  }

  .table-stack td {
    padding: var(--spacing-xs) 0;
    border: none;
    text-align: left;
  }

  .table-stack td::before {
    content: attr(data-label);
    display: block;
    font-size: var(--font-size-sm);
    color: var(--color-muted);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-wide);
    margin-bottom: var(--spacing-xs);
  }

  .table-stack td:first-child {
    padding-top: 0;
  }

  .table-stack td:last-child {
    padding-bottom: 0;
  }
}

/* ==========================================================================
   Table Footer
   ========================================================================== */
.table tfoot td {
  font-weight: bold;
  border-top: 2px solid var(--color-fg);
  border-bottom: none;
}

}
@layer components;

/* ==========================================================================
   Rakui CSS - Typography Component
   Headings, paragraphs, lists, and text elements
   ========================================================================== */

@layer components {

/* ==========================================================================
   Headings
   ========================================================================== */
h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
  font-family: var(--font-mono);
  font-weight: normal;
  letter-spacing: var(--letter-spacing-normal);
  margin-bottom: var(--spacing-lg);
  line-height: var(--line-height-tight);
}

h1,
.h1 {
  font-size: clamp(2rem, 5vw + 1rem, var(--font-size-3xl));
  letter-spacing: var(--letter-spacing-wide);
}

h2,
.h2 {
  font-size: clamp(1.5rem, 3vw + 0.75rem, var(--font-size-2xl));
}

h3,
.h3 {
  font-size: clamp(1.2rem, 2vw + 0.6rem, var(--font-size-xl));
}

h4,
.h4 {
  font-size: var(--font-size-lg);
}

h5,
.h5 {
  font-size: var(--font-size-base);
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-wide);
}

h6,
.h6 {
  font-size: var(--font-size-sm);
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-wide);
}

/* ==========================================================================
   Paragraphs
   ========================================================================== */
p {
  margin-bottom: var(--spacing-base);
}

p:last-child {
  margin-bottom: 0;
}

.lead {
  font-size: var(--font-size-lg);
  line-height: var(--line-height-loose);
}

.small {
  font-size: var(--font-size-sm);
}

.muted {
  color: var(--color-muted);
}

/* ==========================================================================
   Lists
   ========================================================================== */
.list {
  margin-bottom: var(--spacing-base);
  padding-left: var(--spacing-lg);
}

.list li {
  margin-bottom: var(--spacing-sm);
}

.list li:last-child {
  margin-bottom: 0;
}

/* Unordered list with custom marker */
ul.list {
  list-style: none;
}

ul.list li {
  position: relative;
}

ul.list li::before {
  content: ">";
  position: absolute;
  left: 0;
  color: var(--color-fg);
}

/* Ordered list */
ol.list {
  list-style: decimal;
}

/* Nested lists */
.list .list {
  margin-top: var(--spacing-sm);
  margin-bottom: 0;
}

/* Definition list */
dl.list {
  padding-left: 0;
}

dl.list dt {
  font-weight: bold;
  margin-bottom: var(--spacing-xs);
}

dl.list dd {
  margin-bottom: var(--spacing-base);
  padding-left: var(--spacing-lg);
}

/* Inline list */
.list-inline {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-base);
  padding-left: 0;
  list-style: none;
}

.list-inline li::before {
  display: none;
}

/* ==========================================================================
   Text Utilities
   ========================================================================== */
.text-left {
  text-align: left;
}

.text-center {
  text-align: center;
}

.text-right {
  text-align: right;
}

.text-uppercase {
  text-transform: uppercase;
}

.text-lowercase {
  text-transform: lowercase;
}

.text-capitalize {
  text-transform: capitalize;
}

.text-underline {
  text-decoration: underline;
}

.text-no-underline {
  text-decoration: none;
}

.text-strike {
  text-decoration: line-through;
}

/* ==========================================================================
   Font Sizes
   ========================================================================== */
.text-xs {
  font-size: var(--font-size-xs);
}

.text-sm {
  font-size: var(--font-size-sm);
}

.text-base {
  font-size: var(--font-size-base);
}

.text-lg {
  font-size: var(--font-size-lg);
}

.text-xl {
  font-size: var(--font-size-xl);
}

.text-2xl {
  font-size: var(--font-size-2xl);
}

.text-3xl {
  font-size: var(--font-size-3xl);
}

/* ==========================================================================
   Font Weights
   ========================================================================== */
.font-normal {
  font-weight: normal;
}

.font-bold {
  font-weight: bold;
}

/* ==========================================================================
   Line Heights
   ========================================================================== */
.leading-tight {
  line-height: var(--line-height-tight);
}

.leading-base {
  line-height: var(--line-height-base);
}

.leading-loose {
  line-height: var(--line-height-loose);
}

/* ==========================================================================
   Letter Spacing
   ========================================================================== */
.tracking-tight {
  letter-spacing: var(--letter-spacing-tight);
}

.tracking-normal {
  letter-spacing: var(--letter-spacing-normal);
}

.tracking-wide {
  letter-spacing: var(--letter-spacing-wide);
}

/* ==========================================================================
   Text Wrapping
   ========================================================================== */
.text-balance {
  text-wrap: balance;
}

.text-pretty {
  text-wrap: pretty;
}

.text-nowrap {
  text-wrap: nowrap;
}

}
@layer utilities;

/* ==========================================================================
   Rakui CSS - Utilities
   Helper classes for spacing, display, and common patterns
   ========================================================================== */

@layer utilities {

/* ==========================================================================
   Margin Utilities
   ========================================================================== */

/* All sides */
.m-0 { margin: 0; }
.m-xs { margin: var(--spacing-xs); }
.m-sm { margin: var(--spacing-sm); }
.m-md { margin: var(--spacing-md); }
.m-base { margin: var(--spacing-base); }
.m-lg { margin: var(--spacing-lg); }
.m-xl { margin: var(--spacing-xl); }
.m-2xl { margin: var(--spacing-2xl); }
.m-auto { margin: auto; }

/* Top */
.mt-0 { margin-top: 0; }
.mt-xs { margin-top: var(--spacing-xs); }
.mt-sm { margin-top: var(--spacing-sm); }
.mt-md { margin-top: var(--spacing-md); }
.mt-base { margin-top: var(--spacing-base); }
.mt-lg { margin-top: var(--spacing-lg); }
.mt-xl { margin-top: var(--spacing-xl); }
.mt-2xl { margin-top: var(--spacing-2xl); }
.mt-auto { margin-top: auto; }

/* Right */
.mr-0 { margin-right: 0; }
.mr-xs { margin-right: var(--spacing-xs); }
.mr-sm { margin-right: var(--spacing-sm); }
.mr-md { margin-right: var(--spacing-md); }
.mr-base { margin-right: var(--spacing-base); }
.mr-lg { margin-right: var(--spacing-lg); }
.mr-xl { margin-right: var(--spacing-xl); }
.mr-auto { margin-right: auto; }

/* Bottom */
.mb-0 { margin-bottom: 0; }
.mb-xs { margin-bottom: var(--spacing-xs); }
.mb-sm { margin-bottom: var(--spacing-sm); }
.mb-md { margin-bottom: var(--spacing-md); }
.mb-base { margin-bottom: var(--spacing-base); }
.mb-lg { margin-bottom: var(--spacing-lg); }
.mb-xl { margin-bottom: var(--spacing-xl); }
.mb-2xl { margin-bottom: var(--spacing-2xl); }

/* Left */
.ml-0 { margin-left: 0; }
.ml-xs { margin-left: var(--spacing-xs); }
.ml-sm { margin-left: var(--spacing-sm); }
.ml-md { margin-left: var(--spacing-md); }
.ml-base { margin-left: var(--spacing-base); }
.ml-lg { margin-left: var(--spacing-lg); }
.ml-xl { margin-left: var(--spacing-xl); }
.ml-auto { margin-left: auto; }

/* Horizontal (inline) */
.mx-0 { margin-inline: 0; }
.mx-xs { margin-inline: var(--spacing-xs); }
.mx-sm { margin-inline: var(--spacing-sm); }
.mx-base { margin-inline: var(--spacing-base); }
.mx-lg { margin-inline: var(--spacing-lg); }
.mx-auto { margin-inline: auto; }

/* Vertical (block) */
.my-0 { margin-block: 0; }
.my-xs { margin-block: var(--spacing-xs); }
.my-sm { margin-block: var(--spacing-sm); }
.my-base { margin-block: var(--spacing-base); }
.my-lg { margin-block: var(--spacing-lg); }
.my-xl { margin-block: var(--spacing-xl); }

/* ==========================================================================
   Padding Utilities
   ========================================================================== */

/* All sides */
.p-0 { padding: 0; }
.p-xs { padding: var(--spacing-xs); }
.p-sm { padding: var(--spacing-sm); }
.p-md { padding: var(--spacing-md); }
.p-base { padding: var(--spacing-base); }
.p-lg { padding: var(--spacing-lg); }
.p-xl { padding: var(--spacing-xl); }
.p-2xl { padding: var(--spacing-2xl); }

/* Top */
.pt-0 { padding-top: 0; }
.pt-xs { padding-top: var(--spacing-xs); }
.pt-sm { padding-top: var(--spacing-sm); }
.pt-md { padding-top: var(--spacing-md); }
.pt-base { padding-top: var(--spacing-base); }
.pt-lg { padding-top: var(--spacing-lg); }
.pt-xl { padding-top: var(--spacing-xl); }

/* Right */
.pr-0 { padding-right: 0; }
.pr-xs { padding-right: var(--spacing-xs); }
.pr-sm { padding-right: var(--spacing-sm); }
.pr-md { padding-right: var(--spacing-md); }
.pr-base { padding-right: var(--spacing-base); }
.pr-lg { padding-right: var(--spacing-lg); }
.pr-xl { padding-right: var(--spacing-xl); }

/* Bottom */
.pb-0 { padding-bottom: 0; }
.pb-xs { padding-bottom: var(--spacing-xs); }
.pb-sm { padding-bottom: var(--spacing-sm); }
.pb-md { padding-bottom: var(--spacing-md); }
.pb-base { padding-bottom: var(--spacing-base); }
.pb-lg { padding-bottom: var(--spacing-lg); }
.pb-xl { padding-bottom: var(--spacing-xl); }

/* Left */
.pl-0 { padding-left: 0; }
.pl-xs { padding-left: var(--spacing-xs); }
.pl-sm { padding-left: var(--spacing-sm); }
.pl-md { padding-left: var(--spacing-md); }
.pl-base { padding-left: var(--spacing-base); }
.pl-lg { padding-left: var(--spacing-lg); }
.pl-xl { padding-left: var(--spacing-xl); }

/* Horizontal (inline) */
.px-0 { padding-inline: 0; }
.px-xs { padding-inline: var(--spacing-xs); }
.px-sm { padding-inline: var(--spacing-sm); }
.px-base { padding-inline: var(--spacing-base); }
.px-lg { padding-inline: var(--spacing-lg); }
.px-xl { padding-inline: var(--spacing-xl); }

/* Vertical (block) */
.py-0 { padding-block: 0; }
.py-xs { padding-block: var(--spacing-xs); }
.py-sm { padding-block: var(--spacing-sm); }
.py-base { padding-block: var(--spacing-base); }
.py-lg { padding-block: var(--spacing-lg); }
.py-xl { padding-block: var(--spacing-xl); }

/* ==========================================================================
   Width Utilities
   ========================================================================== */
.w-full { width: 100%; }
.w-auto { width: auto; }
.w-half { width: 50%; }
.w-third { width: 33.333%; }
.w-quarter { width: 25%; }

.max-w-sm { max-width: var(--container-sm); }
.max-w-md { max-width: var(--container-md); }
.max-w-lg { max-width: var(--container-lg); }
.max-w-xl { max-width: var(--container-xl); }
.max-w-full { max-width: 100%; }
.max-w-none { max-width: none; }

.min-w-0 { min-width: 0; }
.min-w-full { min-width: 100%; }

/* ==========================================================================
   Height Utilities
   ========================================================================== */
.h-full { height: 100%; }
.h-auto { height: auto; }
.h-screen { height: 100vh; }

.min-h-0 { min-height: 0; }
.min-h-full { min-height: 100%; }
.min-h-screen { min-height: 100vh; }

/* ==========================================================================
   Display Utilities
   ========================================================================== */
.block { display: block; }
.inline-block { display: inline-block; }
.inline { display: inline; }
.hidden { display: none; }
.visible { visibility: visible; }
.invisible { visibility: hidden; }

/* ==========================================================================
   Overflow Utilities
   ========================================================================== */
.overflow-auto { overflow: auto; }
.overflow-hidden { overflow: hidden; }
.overflow-scroll { overflow: scroll; }
.overflow-visible { overflow: visible; }
.overflow-x-auto { overflow-x: auto; }
.overflow-y-auto { overflow-y: auto; }

/* ==========================================================================
   Position Utilities
   ========================================================================== */
.relative { position: relative; }
.absolute { position: absolute; }
.fixed { position: fixed; }
.sticky { position: sticky; }
.static { position: static; }

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

/* ==========================================================================
   Z-Index Utilities
   ========================================================================== */
.z-0 { z-index: 0; }
.z-10 { z-index: 10; }
.z-20 { z-index: 20; }
.z-30 { z-index: 30; }
.z-40 { z-index: 40; }
.z-50 { z-index: 50; }
.z-dropdown { z-index: var(--z-dropdown); }
.z-sticky { z-index: var(--z-sticky); }
.z-fixed { z-index: var(--z-fixed); }
.z-modal { z-index: var(--z-modal); }

/* ==========================================================================
   Border Utilities
   ========================================================================== */
.border { border: var(--border-standard); }
.border-0 { border: none; }
.border-t { border-top: var(--border-standard); }
.border-r { border-right: var(--border-standard); }
.border-b { border-bottom: var(--border-standard); }
.border-l { border-left: var(--border-standard); }

/* Logical Border Utilities */
.border-block-start { border-block-start: var(--border-standard); }
.border-block-end { border-block-end: var(--border-standard); }
.border-inline-start { border-inline-start: var(--border-standard); }
.border-inline-end { border-inline-end: var(--border-standard); }

/* Logical Position Utilities */
.inset-block-start-0 { inset-block-start: 0; }
.inset-block-end-0 { inset-block-end: 0; }
.inset-inline-start-0 { inset-inline-start: 0; }
.inset-inline-end-0 { inset-inline-end: 0; }

/* ==========================================================================
   Background Utilities
   ========================================================================== */
.bg-bg { background-color: var(--color-bg); }
.bg-fg { background-color: var(--color-fg); }
.bg-accent { background-color: var(--color-accent); }
.bg-transparent { background-color: transparent; }

/* ==========================================================================
   Text Colors
   ========================================================================== */
.text-fg { color: var(--color-fg); }
.text-bg { color: var(--color-bg); }
.text-accent { color: var(--color-accent); }
.text-muted { color: var(--color-muted); }
.text-error { color: var(--color-error); }
.text-success { color: var(--color-success); }
.text-warning { color: var(--color-warning); }
.text-info { color: var(--color-info); }

/* ==========================================================================
   Opacity Utilities
   ========================================================================== */
.opacity-0 { opacity: 0; }
.opacity-25 { opacity: 0.25; }
.opacity-50 { opacity: 0.5; }
.opacity-75 { opacity: 0.75; }
.opacity-100 { opacity: 1; }

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

/* ==========================================================================
   User Select Utilities
   ========================================================================== */
.select-none { user-select: none; }
.select-text { user-select: text; }
.select-all { user-select: all; }

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

/* ==========================================================================
   Screen Reader Only
   ========================================================================== */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.not-sr-only {
  position: static;
  width: auto;
  height: auto;
  padding: 0;
  margin: 0;
  overflow: visible;
  clip: auto;
  white-space: normal;
}

/* ==========================================================================
   Print Utilities
   ========================================================================== */
@media print {
  .print-hidden {
    display: none !important;
  }

  .print-only {
    display: block !important;
  }
}

.print-only {
  display: none;
}

/* ==========================================================================
   Truncate Text
   ========================================================================== */
.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.line-clamp-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ==========================================================================
   Word Break
   ========================================================================== */
.break-normal { word-break: normal; overflow-wrap: normal; }
.break-words { overflow-wrap: break-word; }
.break-all { word-break: break-all; }

/* ==========================================================================
   Whitespace
   ========================================================================== */
.whitespace-normal { white-space: normal; }
.whitespace-nowrap { white-space: nowrap; }
.whitespace-pre { white-space: pre; }
.whitespace-pre-line { white-space: pre-line; }
.whitespace-pre-wrap { white-space: pre-wrap; }

/* ==========================================================================
   Numeric Font Variants
   ========================================================================== */
.tabular-nums {
  font-variant-numeric: tabular-nums;
}

.oldstyle-nums {
  font-variant-numeric: oldstyle-nums;
}

.lining-nums {
  font-variant-numeric: lining-nums;
}

.proportional-nums {
  font-variant-numeric: proportional-nums;
}

}