/* Generated by @ihaos-sa/tokens from src/tokens.json — do not edit. */
:root {
  --x-color-ink-300: #a5a9af; /* Aisle ink.300 */
  --x-color-ink-400: #8a8f98; /* muted text (Aisle ink.400) */
  --x-color-ink-600: #30343a; /* Aisle ink.600 */
  --x-color-ink-700: #25292f; /* hairline on dark (Aisle ink.700) */
  --x-color-ink-800: #15181c; /* cards (Aisle ink.800) */
  --x-color-ink-850: #14161a; /* highest surface — website --ink-3 */
  --x-color-ink-900: #0e1013; /* raised surface — website --ink-2 */
  --x-color-ink-950: #090a0c; /* canvas — website --ink */
  --x-color-ivory: #f4f3ed; /* primary text — website --ivory (Aisle used #f2f0e9; unified per ADR-0002) */
  --x-color-ivory-dim: rgba(244, 243, 237, 0.85); /* secondary text */
  --x-color-ivory-faint: rgba(244, 243, 237, 0.65); /* tertiary text / mono labels */
  --x-color-line: rgba(244, 243, 237, 0.09); /* hairline — website --line */
  --x-color-line-strong: rgba(244, 243, 237, 0.18); /* border/divider — website --line-strong */
  --x-color-lime: #b8ff3d; /* xAura brand signal — website --lime */
  --x-color-lime-dim: rgba(184, 255, 61, 0.14); /* lime wash — website --lime-dim */
  --x-color-lime-soft: #d2ff86; /* legacy lime-soft */
  --x-color-lime-deep: #7ab321; /* legacy lime-deep */
  --x-color-status-success: #3ecf8e; /* legacy paid-text */
  --x-color-status-success-surface: #0e7b4f; /* legacy paid */
  --x-color-status-warning: #f2b84b; /* Aisle state.warn (legacy duesoon-text #e8a04c is close; unified) */
  --x-color-status-warning-surface: #b4690e; /* legacy duesoon */
  --x-color-status-danger: #ff6b62; /* Aisle state.danger (legacy overdue-text #ef6f61; website error #ffd2d2 text) */
  --x-color-status-danger-surface: #c0362c; /* legacy overdue */
  --x-color-status-info: #6fa9ff; /* Aisle state.info (legacy info-text #6ba3e8) */
  --x-color-status-info-surface: #1f4e8c; /* legacy info */
  --x-color-accent: #b8ff3d; /* single brand accent across every xAura surface; see ADR-0002 */
  --x-brand-xaura-accent: #b8ff3d;
  --x-brand-aisle-accent: #b8ff3d;
  --x-brand-mithaq-accent: #b8ff3d; /* planned product; the same xAura brand, with no separate marketing palette */
  --x-font-sans: 'IBM Plex Sans Arabic', 'IBM Plex Sans', system-ui, sans-serif;
  --x-font-mono: 'IBM Plex Mono', 'IBM Plex Sans Arabic', monospace;
  --x-space-1: 4px;
  --x-space-2: 8px;
  --x-space-3: 12px;
  --x-space-4: 16px;
  --x-space-5: 20px;
  --x-space-6: 24px;
  --x-space-8: 32px;
  --x-space-10: 40px;
  --x-space-12: 48px;
  --x-space-16: 64px;
  --x-space-20: 80px;
  --x-space-24: 96px;
  --x-layout-page-max: 1280px;
  --x-layout-page-gutter: clamp(20px, 5vw, 64px);
  --x-layout-form-max: 440px;
  --x-layout-reading-max: 68ch;
  --x-font-size-eyebrow: 0.6875rem;
  --x-font-size-title: 1.375rem;
  --x-font-size-display: clamp(2rem, 3.6vw, 2.75rem);
  --x-font-size-hero: clamp(2.75rem, 6.5vw, 5rem);
  --x-radius-sm: 6px; /* buttons, inputs, alerts — website production layer */
  --x-radius-md: 8px; /* nav, banners */
  --x-radius-lg: 10px; /* panels/cards — website */
  --x-radius-xl: 16px; /* legacy card */
  --x-radius-console: 20px; /* Aisle POS console surfaces */
  --x-radius-pill: 999px;
  --x-shadow-none: none; /* website production layer: no faux depth */
  --x-shadow-card: 0 1px 2px rgb(0 0 0 / 0.3), 0 8px 24px rgb(0 0 0 / 0.2);
  --x-shadow-raised: 0 2px 4px rgb(0 0 0 / 0.34), 0 18px 48px rgb(0 0 0 / 0.34);
  --x-shadow-pop: 0 16px 48px rgb(0 0 0 / 0.5);
  --x-shadow-glow: 0 0 0 1px rgb(184 255 61 / 0.22), 0 0 32px rgb(184 255 61 / 0.14);
  --x-shadow-focus: 0 0 0 2px rgba(184, 255, 61, 0.12); /* website .input-soft:focus */
  --x-motion-ease-out: cubic-bezier(0.25, 1, 0.5, 1);
  --x-motion-ease-in-out: cubic-bezier(0.78, 0, 0.22, 1);
  --x-motion-ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --x-motion-duration-fast: 180ms;
  --x-motion-duration-base: 420ms;
  --x-motion-duration-slow: 720ms;
  --x-size-touch-compact: 44px; /* website/legacy minimum target */
  --x-size-touch-touch: 56px; /* Aisle POS spec §1.2 */
  --x-size-input-min: 48px; /* website .input-soft */
  --x-size-input-font: 16px; /* prevents iOS zoom */
  --x-breakpoint-sm: 640px;
  --x-breakpoint-md: 768px;
  --x-breakpoint-lg: 1024px;
  --x-breakpoint-xl: 1280px;
  --x-breakpoint-2xl: 1536px;
  /* density hook: data-density="touch" (POS) | "compact" (default) */
  --x-target-min: var(--x-size-touch-compact);
  --x-accent: var(--x-color-lime);
}
[data-density="touch"] { --x-target-min: var(--x-size-touch-touch); }
[data-density="compact"] { --x-target-min: var(--x-size-touch-compact); }
[data-product="xaura"] { --x-accent: var(--x-brand-xaura-accent); }
[data-product="aisle"] { --x-accent: var(--x-brand-aisle-accent); }
[data-product="mithaq"] { --x-accent: var(--x-brand-mithaq-accent); }
/* One semantic palette for every application; brand pigments remain immutable. */
:root {
  color-scheme: light;
  --x-canvas-rgb: 244 243 237;
  --x-surface-rgb: 253 252 248;
  --x-raised-rgb: 255 255 255;
  --x-text-rgb: 21 24 28;
  --x-secondary-rgb: 62 66 71;
  --x-muted-rgb: 97 102 94;
  --x-border-rgb: 221 223 213;
  --x-border-strong-rgb: 129 135 119;
  --x-selected-rgb: 232 239 218;
  --x-brand-text-rgb: 53 90 4;
  --x-success-rgb: 37 96 68;
  --x-warning-rgb: 136 80 0;
  --x-danger-rgb: 182 48 39;
  --x-info-rgb: 38 85 137;
  /* The `state-*` aliases, made theme-reactive. Product back offices used
   * fixed dark-tuned pigments in both themes; against the light canvas they
   * measured 1.74:1 to 2.72:1 where WCAG AA needs 4.5:1 for text. The light
   * values are this palette's own accessible text colours; the dark values
   * below are byte-identical to what shipped. Canonical here, vendored by
   * every consumer, never edited locally. */
  --x-state-warn-rgb: 136 80 0;
  --x-state-danger-rgb: 182 48 39;
  --x-state-info-rgb: 38 85 137;
  --x-canvas: rgb(var(--x-canvas-rgb));
  --x-surface: rgb(var(--x-surface-rgb));
  --x-surface-raised: rgb(var(--x-raised-rgb));
  --x-text: rgb(var(--x-text-rgb));
  --x-text-secondary: rgb(var(--x-secondary-rgb));
  --x-text-muted: rgb(var(--x-muted-rgb));
  --x-border: rgb(var(--x-border-rgb));
  --x-border-strong: rgb(var(--x-border-strong-rgb));
  --x-selected: rgb(var(--x-selected-rgb));
  --x-accent-text: rgb(var(--x-brand-text-rgb));
  --x-on-accent: #15181c;
  --x-focus: var(--x-accent-text);
  --x-success: rgb(var(--x-success-rgb));
  --x-warning: rgb(var(--x-warning-rgb));
  --x-danger: rgb(var(--x-danger-rgb));
  --x-info: rgb(var(--x-info-rgb));
  --x-shadow-soft: 0 2px 4px rgb(20 25 15 / 0.03), 0 20px 70px rgb(20 25 15 / 0.07);
}
:root[data-theme='dark'] {
  color-scheme: dark;
  --x-canvas-rgb: 9 10 12;
  --x-surface-rgb: 14 16 19;
  --x-raised-rgb: 23 26 29;
  --x-text-rgb: 244 243 237;
  --x-secondary-rgb: 202 205 198;
  --x-muted-rgb: 161 166 157;
  --x-border-rgb: 40 44 45;
  --x-border-strong-rgb: 96 105 96;
  --x-selected-rgb: 33 44 21;
  --x-brand-text-rgb: 184 255 61;
  --x-success-rgb: 130 217 173;
  --x-warning-rgb: 231 188 116;
  --x-danger-rgb: 255 149 139;
  --x-info-rgb: 139 190 245;
  --x-state-warn-rgb: 242 184 75;
  --x-state-danger-rgb: 255 107 98;
  --x-state-info-rgb: 111 169 255;
  --x-shadow-soft: 0 2px 4px rgb(0 0 0 / 0.2), 0 24px 80px rgb(0 0 0 / 0.28);
}
[data-xaura-theme] {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  max-width: 100%;
}
.xaura-theme-select {
  font: 400 12px/1.4 var(--x-font-sans);
  color: var(--x-text);
  background: var(--x-surface);
  min-height: 36px;
  width: auto;
  max-width: 120px;
  border: 1px solid var(--x-border-strong);
  border-radius: 6px;
  padding: 6px 10px;
  cursor: pointer;
}
.xaura-theme-select:focus-visible {
  outline: 2px solid var(--x-focus);
  outline-offset: 3px;
}
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ibm-plex-sans-arabic-arabic-400-normal */
@font-face {
  font-family: 'IBM Plex Sans Arabic';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(./fonts/ibm-plex-sans-arabic-arabic-400-normal.woff2) format('woff2');
  unicode-range:
    U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E,
    U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB,
    U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22,
    U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49,
    U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F,
    U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E,
    U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;
}

/* ibm-plex-sans-arabic-latin-400-normal */
@font-face {
  font-family: 'IBM Plex Sans Arabic';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(./fonts/ibm-plex-sans-arabic-latin-400-normal.woff2) format('woff2');
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ibm-plex-sans-arabic-latin-ext-400-normal */
@font-face {
  font-family: 'IBM Plex Sans Arabic';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(./fonts/ibm-plex-sans-arabic-latin-ext-400-normal.woff2) format('woff2');
  unicode-range:
    U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329,
    U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F,
    U+A720-A7FF;
}

/* ibm-plex-sans-arabic-arabic-500-normal */
@font-face {
  font-family: 'IBM Plex Sans Arabic';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url(./fonts/ibm-plex-sans-arabic-arabic-500-normal.woff2) format('woff2');
  unicode-range:
    U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E,
    U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB,
    U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22,
    U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49,
    U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F,
    U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E,
    U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;
}

/* ibm-plex-sans-arabic-latin-500-normal */
@font-face {
  font-family: 'IBM Plex Sans Arabic';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url(./fonts/ibm-plex-sans-arabic-latin-500-normal.woff2) format('woff2');
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ibm-plex-sans-arabic-latin-ext-500-normal */
@font-face {
  font-family: 'IBM Plex Sans Arabic';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url(./fonts/ibm-plex-sans-arabic-latin-ext-500-normal.woff2) format('woff2');
  unicode-range:
    U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329,
    U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F,
    U+A720-A7FF;
}

/* ibm-plex-sans-arabic-arabic-600-normal */
@font-face {
  font-family: 'IBM Plex Sans Arabic';
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url(./fonts/ibm-plex-sans-arabic-arabic-600-normal.woff2) format('woff2');
  unicode-range:
    U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E,
    U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB,
    U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22,
    U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49,
    U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F,
    U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E,
    U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;
}

/* ibm-plex-sans-arabic-latin-600-normal */
@font-face {
  font-family: 'IBM Plex Sans Arabic';
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url(./fonts/ibm-plex-sans-arabic-latin-600-normal.woff2) format('woff2');
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ibm-plex-sans-arabic-latin-ext-600-normal */
@font-face {
  font-family: 'IBM Plex Sans Arabic';
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url(./fonts/ibm-plex-sans-arabic-latin-ext-600-normal.woff2) format('woff2');
  unicode-range:
    U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329,
    U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F,
    U+A720-A7FF;
}

/* ibm-plex-sans-arabic-arabic-700-normal */
@font-face {
  font-family: 'IBM Plex Sans Arabic';
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url(./fonts/ibm-plex-sans-arabic-arabic-700-normal.woff2) format('woff2');
  unicode-range:
    U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E,
    U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB,
    U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22,
    U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49,
    U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F,
    U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E,
    U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;
}

/* ibm-plex-sans-arabic-latin-700-normal */
@font-face {
  font-family: 'IBM Plex Sans Arabic';
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url(./fonts/ibm-plex-sans-arabic-latin-700-normal.woff2) format('woff2');
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ibm-plex-sans-arabic-latin-ext-700-normal */
@font-face {
  font-family: 'IBM Plex Sans Arabic';
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url(./fonts/ibm-plex-sans-arabic-latin-ext-700-normal.woff2) format('woff2');
  unicode-range:
    U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329,
    U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F,
    U+A720-A7FF;
}

/* Explicit classes only: loading the brand foundation never resets an application's elements. */
:root {
  --x-accent: var(--x-color-lime);
  --ink: var(--x-canvas);
  --ink-2: var(--x-surface);
  --ink-3: var(--x-surface-raised);
  --ivory: var(--x-text);
  --muted: var(--x-text-muted);
  --line: var(--x-border);
  --line-strong: var(--x-border-strong);
  --lime: var(--x-accent);
  --font-sans: var(--x-font-sans);
}

.x-root {
  background: var(--x-canvas);
  color: var(--x-text);
  font-family: var(--x-font-sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

.x-shell {
  width: min(calc(100% - 2 * var(--x-layout-page-gutter)), var(--x-layout-page-max));
  margin-inline: auto;
}

.x-wordmark {
  display: inline-flex;
  align-items: center;
  gap: var(--x-space-2);
  color: var(--x-text);
  font: 600 26px / 1 var(--x-font-sans);
  letter-spacing: -0.055em;
  text-decoration: none;
  direction: ltr;
  white-space: nowrap;
}

.x-eyebrow {
  color: var(--x-text-muted);
  font: 500 0.75rem / 1.5 var(--x-font-sans);
  letter-spacing: 0.05em;
}

.x-title {
  margin: 0;
  color: var(--x-text);
  font: 500 clamp(2rem, 4.2vw, 3.75rem) / 1.08 var(--x-font-sans);
  letter-spacing: -0.045em;
  text-wrap: balance;
}

.x-title--hero {
  font-size: clamp(2.6rem, 6vw, 5.7rem);
  line-height: 1.03;
}

.x-title:lang(ar) {
  letter-spacing: -0.02em;
  line-height: 1.3;
}

.x-copy {
  max-width: var(--x-layout-reading-max);
  color: var(--x-text-muted);
  font: 400 1rem / 1.7 var(--x-font-sans);
  text-wrap: pretty;
}

.x-button {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--x-space-2);
  min-height: var(--x-target-min);
  padding: 11px 20px;
  border: 1px solid var(--x-accent);
  border-radius: var(--x-radius-md);
  background: var(--x-accent);
  color: var(--x-on-accent);
  font: 600 0.875rem / 1.4 var(--x-font-sans);
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition:
    background-color var(--x-motion-duration-fast) var(--x-motion-ease-out),
    border-color var(--x-motion-duration-fast) var(--x-motion-ease-out),
    opacity var(--x-motion-duration-fast) var(--x-motion-ease-out);
}

.x-button:hover {
  background: var(--x-color-lime-soft);
  border-color: var(--x-color-lime-soft);
}

.x-button--secondary {
  border-color: var(--x-border-strong);
  background: var(--x-surface);
  color: var(--x-text);
}

.x-button--secondary:hover {
  border-color: var(--x-text-muted);
  background: var(--x-surface-raised);
}

.x-button--quiet {
  border-color: transparent;
  background: transparent;
  color: var(--x-text-secondary);
}

.x-button--quiet:hover {
  border-color: var(--x-border-strong);
  background: var(--x-surface);
}

.x-button:disabled,
.x-button[aria-disabled='true'] {
  opacity: 0.5;
  cursor: not-allowed;
}

:where(.x-button, .x-wordmark, .x-link, .x-input, .x-select, .x-textarea):focus-visible {
  outline: 2px solid var(--x-accent);
  outline-offset: 4px;
}

.x-link {
  color: var(--x-text);
  text-decoration-color: var(--x-text-muted);
  text-underline-offset: 4px;
}

.x-link:hover {
  color: var(--x-accent);
}

.x-field {
  display: grid;
  gap: var(--x-space-2);
  color: var(--x-text-secondary);
  font: 500 0.875rem / 1.5 var(--x-font-sans);
}

:where(.x-input, .x-select, .x-textarea) {
  box-sizing: border-box;
  width: 100%;
  min-height: var(--x-size-input-min);
  padding: 11px 14px;
  border: 1px solid var(--x-border-strong);
  border-radius: var(--x-radius-md);
  background: var(--x-surface);
  color: var(--x-text);
  font: 400 var(--x-size-input-font) / 1.5 var(--x-font-sans);
  transition: border-color var(--x-motion-duration-fast) var(--x-motion-ease-out);
}

:where(.x-input, .x-textarea)::placeholder {
  color: var(--x-text-muted);
  opacity: 1;
}

:where(.x-input, .x-select, .x-textarea):focus {
  border-color: var(--x-accent);
}

:where(.x-input, .x-select, .x-textarea)[aria-invalid='true'] {
  border-color: var(--x-color-status-danger);
}

:where(.x-input, .x-select, .x-textarea):disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.x-textarea {
  min-height: 120px;
  resize: vertical;
}

.x-field__hint {
  color: var(--x-text-muted);
  font-weight: 400;
}

.x-field__error {
  color: var(--x-color-status-danger);
}

.x-panel {
  border: 1px solid var(--x-border-strong);
  border-radius: var(--x-radius-xl);
  background: var(--x-surface);
  padding: clamp(20px, 3vw, 40px);
}

.x-divider {
  border: 0;
  border-top: 1px solid var(--x-border);
}

.x-stack {
  display: flex;
  flex-direction: column;
  gap: var(--x-space-6);
}

.x-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--x-space-3);
}

.x-number {
  font-variant-numeric: tabular-nums;
}

@media (prefers-reduced-motion: reduce) {
  .x-button,
  .x-input,
  .x-select,
  .x-textarea {
    transition: none;
  }
}