@layer tokens, reset, base, utilities, components;  /* ======================================================= Design Tokens — core-css v1 Single source of all shared visual values.  Hierarchy: 1. Primitive — raw color/spacing/radius/shadow scales 2. Semantic  — named by role (color-primary, space-4…) 3. Component — scoped overrides (button-radius, etc.)  Every layer consumes tokens — never hardcode a value when a matching token exists. ======================================================= */  @layer tokens { :root { color-scheme: light;  /* --------------------------------------------------- 1. PRIMITIVE TOKENS Raw palette and scales. Not used directly in components — consumed only by semantic tokens. --------------------------------------------------- */  /* Gray palette */ --gray-50:  hsl(210 20% 98%); --gray-100: hsl(210 20% 96%); --gray-200: hsl(214 32% 91%); --gray-300: hsl(213 27% 84%); --gray-400: hsl(215 20% 65%); --gray-500: hsl(215 16% 47%); --gray-600: hsl(215 19% 35%); --gray-700: hsl(215 25% 27%); --gray-800: hsl(217 33% 17%); --gray-900: hsl(222 47% 11%);  /* Blue palette */ --blue-50:  hsl(221 83% 53% / 0.08); --blue-100: hsl(221 83% 53% / 0.15); --blue-200: hsl(221 83% 53% / 0.35); --blue-300: hsl(221 83% 53% / 0.5); --blue-400: hsl(221 83% 53% / 0.7); --blue-500: hsl(221 83% 53%); --blue-600: hsl(221 83% 46%); --blue-700: hsl(221 83% 40%); --blue-800: hsl(221 83% 34%); --blue-900: hsl(221 83% 28%);  /* Green palette */ --green-50:  hsl(160 84% 39% / 0.08); --green-100: hsl(160 84% 39% / 0.15); --green-200: hsl(160 84% 39% / 0.35); --green-300: hsl(160 84% 39% / 0.5); --green-400: hsl(160 84% 39% / 0.7); --green-500: hsl(160 84% 39%); --green-600: hsl(160 84% 28%); --green-700: hsl(160 84% 24%); --green-800: hsl(160 84% 20%); --green-900: hsl(160 84% 16%);   /* Amber palette */ --amber-50:  hsl(35 92% 52% / 0.08); --amber-100: hsl(35 92% 52% / 0.15); --amber-200: hsl(35 92% 52% / 0.35); --amber-300: hsl(35 92% 52% / 0.5); --amber-400: hsl(35 92% 52% / 0.7); --amber-500: hsl(35 92% 52%); --amber-600: hsl(35 92% 44%); --amber-700: hsl(35 92% 38%); --amber-800: hsl(35 92% 32%); --amber-900: hsl(35 92% 26%);  /* Red palette */ --red-50:  hsl(0 84% 60% / 0.08); --red-100: hsl(0 84% 60% / 0.15); --red-200: hsl(0 84% 60% / 0.35); --red-300: hsl(0 84% 60% / 0.5); --red-400: hsl(0 84% 60% / 0.7); --red-500: hsl(0 84% 60%); --red-600: hsl(0 84% 48%); --red-700: hsl(0 84% 44%); --red-800: hsl(0 84% 40%); --red-900: hsl(0 84% 36%);  --white: hsl(0 0% 100%);  /* Primitive spacing — 4px grid (1 unit = 0.25rem) */ --space-0:  0; --space-1:  0.25rem;   /*  4px */ --space-2:  0.5rem;    /*  8px */ --space-3:  0.75rem;   /* 12px */ --space-4:  1rem;      /* 16px */ --space-5:  1.25rem;   /* 20px */ --space-6:  1.5rem;    /* 24px */ --space-8:  2rem;      /* 32px */ --space-10: 2.5rem;    /* 40px */ --space-12: 3rem;      /* 48px */ --space-16: 4rem;      /* 64px */  /* Primitive radius */ --radius-0:    0; --radius-1:    0.25rem; --radius-2:    0.375rem; --radius-3:    0.5rem; --radius-4:    0.75rem; --radius-5:    1rem; --radius-full: 999rem;  /* Primitive shadows */ --shadow-0:  0 0 0 0 transparent; --shadow-1:  0 1px 2px 0 hsl(222 47% 11% / 0.06); --shadow-2:  0 1px 3px 0 hsl(222 47% 11% / 0.1), 0 1px 2px -1px hsl(222 47% 11% / 0.1); --shadow-3:  0 4px 6px -1px hsl(222 47% 11% / 0.1), 0 2px 4px -2px hsl(222 47% 11% / 0.1); --shadow-4:  0 10px 15px -3px hsl(222 47% 11% / 0.1), 0 4px 6px -4px hsl(222 47% 11% / 0.1); --shadow-5:  0 20px 25px -5px hsl(222 47% 11% / 0.1), 0 8px 10px -6px hsl(222 47% 11% / 0.1);  /* --------------------------------------------------- 2. SEMANTIC TOKENS Named by role. Components use these. --------------------------------------------------- */  /* Color — surfaces */ --color-background:    var(--gray-50); --color-surface:       var(--white); --color-surface-muted: var(--gray-100); --color-border:        var(--gray-200);  /* Color — text */ --color-text:       var(--gray-900); --color-text-muted: var(--gray-500);  /* Color — brand / semantic */ --color-primary:          var(--blue-500); --color-primary-hover:    var(--blue-600); --color-primary-active:   var(--blue-700); --color-primary-subtle:   var(--blue-50); --color-primary-contrast: var(--white);  --color-success:          var(--green-600); --color-success-hover:    var(--green-700); --color-success-subtle:   var(--green-50); --color-success-contrast: var(--white);  --color-warning:          var(--amber-500); --color-warning-hover:    var(--amber-600); --color-warning-subtle:   var(--amber-50); --color-warning-contrast: var(--gray-900);  --color-danger:          var(--red-600); --color-danger-hover:    var(--red-700); --color-danger-subtle:   var(--red-50); --color-danger-contrast: var(--white);  --color-backdrop: hsl(222 47% 11% / 0.6);  /* Focus ring */ --focus-ring-width:  2px; --focus-ring-color:  var(--blue-200); --focus-ring-offset: 2px;  /* Typography */ --font-family-base:    Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --font-family-heading: var(--font-family-base); --font-family-mono:    "SFMono-Regular", ui-monospace, "Cascadia Code", "Source Code Pro", Menlo, monospace;  --font-size-xs:   0.75rem;    /* 12px */ --font-size-sm:   0.875rem;   /* 14px */ --font-size-md:   1rem;       /* 16px */ --font-size-lg:   1.125rem;   /* 18px */ --font-size-xl:   1.25rem;    /* 20px */ --font-size-2xl:  1.5rem;     /* 24px */ --font-size-3xl:  1.875rem;   /* 30px */ --font-size-4xl:  2.25rem;    /* 36px */  --font-weight-regular:  400; --font-weight-medium:   500; --font-weight-semibold: 600; --font-weight-bold:     700;  --line-height-tight:   1.25; --line-height-normal:  1.5; --line-height-relaxed: 1.75;  --letter-spacing-tight:  -0.025em; --letter-spacing-normal: 0; --letter-spacing-wide:   0.025em;  /* Borders */ --border-width-sm: 1px; --border-width-md: 2px;  /* Semantic radius */ --radius-sm:   var(--radius-2); --radius-md:   var(--radius-3); --radius-lg:   var(--radius-4); --radius-xl:   var(--radius-5); --radius-pill:  var(--radius-full);  /* Semantic shadows */ --shadow-none: var(--shadow-0); --shadow-sm:   var(--shadow-1); --shadow-md:   var(--shadow-3); --shadow-lg:   var(--shadow-5);  /* Motion */ --duration-fast:   120ms; --duration-normal: 200ms; --duration-slow:   300ms; --easing-standard:   cubic-bezier(0.4, 0, 0.2, 1); --easing-accelerate: cubic-bezier(0.4, 0, 1, 1); --easing-decelerate: cubic-bezier(0, 0, 0.2, 1);  /* Shorthand motion */ --motion-fast:   var(--duration-fast) var(--easing-standard); --motion-normal: var(--duration-normal) var(--easing-standard); --motion-slow:   var(--duration-slow) var(--easing-standard);  /* Opacity */ --opacity-disabled: 0.5; --opacity-muted:    0.7;  /* Z-index scale */ --z-dropdown: 100; --z-sticky:   200; --z-overlay:  300; --z-modal:    400; --z-toast:    500;  /* Sizing */ --size-full:            100%; --size-viewport-height: 100vh; --size-measure:         65ch; --size-control-sm:      2rem;     /* 32px */ --size-control-md:      2.5rem;   /* 40px */ --size-control-lg:      3rem;     /* 48px */ --size-field-min:       12rem; --size-icon-sm:         1rem;     /* 16px */ --size-icon-md:         1.25rem;  /* 20px */ --size-icon-lg:         1.5rem;   /* 24px */ --size-container-sm:    40rem;    /* 640px */ --size-container-md:    48rem;    /* 768px */ --size-container-lg:    64rem;    /* 1024px */ --size-container-xl:    80rem;    /* 1280px */ --size-modal-sm:        24rem;    /* 384px */ --size-modal-md:        32rem;    /* 512px */ --size-modal-lg:        48rem;    /* 768px */  /* --------------------------------------------------- 3. COMPONENT TOKENS Scoped overrides for component flexibility. Keep minimal — add only when theming demands it. --------------------------------------------------- */  --button-radius:    var(--radius-md); --button-font-size: var(--font-size-sm);  --card-radius:  var(--radius-lg); --card-padding: var(--space-6);  --badge-radius: var(--radius-pill);  --alert-radius: var(--radius-lg);  --input-radius: var(--radius-md); } } /* ======================================================= Reset — core-css v1 Normalize browser defaults to a consistent baseline. Low-specificity rules only — no layout opinions. ======================================================= */  @layer reset { *, *::before, *::after { box-sizing: border-box; }  * { margin: 0; }  html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }  html:focus-within { scroll-behavior: smooth; }  body { min-height: var(--size-viewport-height); -webkit-font-smoothing: antialiased; }  img, picture, svg, video, canvas { display: block; max-width: var(--size-full); }  input, button, textarea, select { font: inherit; color: inherit; }  button { background: none; border: 0; cursor: pointer; padding: 0; }  a { color: inherit; }  table { border-collapse: collapse; border-spacing: 0; }  ul[role='list'], ol[role='list'] { list-style: none; padding: 0; }  textarea:not([rows]) { min-height: var(--size-control-lg); }  :target { scroll-margin-block: var(--space-8); }  @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; } } } /* ======================================================= Base — core-css v1 Global element defaults — typography, links, code, focus ring and selection. Builds on reset, consumes semantic tokens for every visual value. ======================================================= */  @layer base { html { font-family: var(--font-family-base); font-size: 100%; line-height: var(--line-height-normal); }  body { background-color: var(--color-background); color: var(--color-text); font-size: var(--font-size-md); letter-spacing: var(--letter-spacing-normal); text-rendering: optimizeLegibility; }  /* Headings */  h1, h2, h3, h4, h5, h6 { color: var(--color-text); font-family: var(--font-family-heading); font-weight: var(--font-weight-semibold); letter-spacing: var(--letter-spacing-tight); line-height: var(--line-height-tight); }  h1 { font-size: var(--font-size-3xl); } h2 { font-size: var(--font-size-2xl); } h3 { font-size: var(--font-size-xl); } h4 { font-size: var(--font-size-lg); }  /* Body text */  p { max-width: var(--size-measure); }  small { font-size: var(--font-size-sm); }  strong, b { font-weight: var(--font-weight-semibold); }  /* Links */  a { color: var(--color-primary); text-decoration-line: underline; text-decoration-thickness: from-font; text-underline-offset: 0.15em; transition: color var(--motion-fast); }  a:hover { color: var(--color-primary-hover); }  /* Code */  code, pre { font-family: var(--font-family-mono); }  code { background-color: var(--color-surface-muted); border-radius: var(--radius-sm); font-size: var(--font-size-sm); padding-block: var(--space-0); padding-inline: var(--space-1); }  pre { overflow-x: auto; }  pre code { background: none; padding: 0; }  /* Focus ring — global accessible treatment */  :focus-visible { outline: var(--focus-ring-width) solid var(--focus-ring-color); outline-offset: var(--focus-ring-offset); }  /* Selection */  ::selection { background-color: var(--color-primary-subtle); color: var(--color-text); } }  /* ======================================================= STABLE UTILITIES SYSTEM (v1.1)  Utilities - core-css v1 Atomic helpers for layout, spacing and typography. Responsive naming contract: u-{breakpoint}-{utility}  WARNING: - This file is manually maintained - Any change MUST be replicated across: base + xs + sm + md + lg + xl  Future plan: - Replace with generated system (Phase 4)  ======================================================= */  @layer utilities {  /* ========================= RESPONSIVE CORE UTILITIES (must be generated for base + xs/sm/md/lg/xl) ========================= */  /* ---- Display ---- */  .u-block { display: block; } .u-inline-block { display: inline-block; } .u-inline { display: inline; } .u-flex { display: flex; } .u-inline-flex { display: inline-flex; } .u-grid { display: grid; } .u-inline-grid { display: inline-grid; } .u-hidden { display: none; }  /* ---- Flex ---- */  .u-flex-row { flex-direction: row; } .u-flex-col { flex-direction: column; } .u-flex-wrap { flex-wrap: wrap; } .u-flex-nowrap { flex-wrap: nowrap; }  /* ---- Alignment ---- */  .u-items-start { align-items: flex-start; } .u-items-center { align-items: center; } .u-items-end { align-items: flex-end; } .u-items-stretch { align-items: stretch; }  .u-justify-start { justify-content: flex-start; } .u-justify-center { justify-content: center; } .u-justify-end { justify-content: flex-end; } .u-justify-between { justify-content: space-between; }  /* ========================= BASE-ONLY UTILITIES (no responsive variants by design) ========================= */ .u-self-center { align-self: center; }  /* ========================= RESPONSIVE CORE UTILITIES (must be generated for xs/sm/md/lg/xl) ========================= */  /* ---- Position ---- */  .u-static { position: static; } .u-relative { position: relative; } .u-absolute { position: absolute; } .u-fixed { position: fixed; } .u-sticky { position: sticky; }  .u-inset-0 { inset: 0; } .u-top-0 { top: 0; } .u-right-0 { right: 0; } .u-bottom-0 { bottom: 0; } .u-left-0 { left: 0; }  /* ---- Z-index ---- */  .u-z-0 { z-index: 0; } .u-z-10 { z-index: var(--z-dropdown); } .u-z-20 { z-index: var(--z-sticky); } .u-z-30 { z-index: var(--z-overlay); } .u-z-40 { z-index: var(--z-modal); } .u-z-50 { z-index: var(--z-toast); }  /* ---- Width ---- */  .u-w-auto { width: auto; } .u-w-full { width: var(--size-full); } .u-w-screen { width: 100vw; }  /* ---- Max width ---- */  .u-max-w-xs { max-width: var(--container-xs); } .u-max-w-sm { max-width: var(--container-sm); } .u-max-w-md { max-width: var(--container-md); } .u-max-w-lg { max-width: var(--container-lg); } .u-max-w-xl { max-width: var(--container-xl); } .u-max-w-full { max-width: var(--size-full); }  /* ---- Grid ---- */  .u-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); } .u-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .u-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .u-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .u-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); } .u-cols-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); }  /* ---- Gap ---- */  .u-gap-0 { gap: var(--space-0); } .u-gap-1 { gap: var(--space-1); } .u-gap-2 { gap: var(--space-2); } .u-gap-3 { gap: var(--space-3); } .u-gap-4 { gap: var(--space-4); } .u-gap-5 { gap: var(--space-5); } .u-gap-6 { gap: var(--space-6); }  /* ========================= BASE-ONLY UTILITIES (no responsive variants by design) ========================= */ .u-gap-8 { gap: var(--space-8); }  /* ========================= RESPONSIVE CORE UTILITIES (must be generated for xs/sm/md/lg/xl) ========================= */  /* ---- Border ---- */  .u-border { border: var(--border-width-sm) solid var(--color-border); } .u-border-0 { border: 0; } .u-border-top { border-top: var(--border-width-sm) solid var(--color-border); } .u-border-bottom { border-bottom: var(--border-width-sm) solid var(--color-border); } .u-border-default { border-color: var(--color-border); }  .u-rounded { border-radius: var(--radius-md); } .u-rounded-sm { border-radius: var(--radius-sm); } .u-rounded-md { border-radius: var(--radius-md); } .u-rounded-lg { border-radius: var(--radius-lg); } .u-rounded-full { border-radius: var(--radius-full); }  /* ---- Background ---- */  .u-bg-surface { background-color: var(--color-surface); } .u-bg-surface-2 { background-color: var(--color-surface-2); } .u-bg-surface-3 { background-color: var(--color-surface-3); } .u-bg-transparent { background-color: transparent; }  /* ---- Shadow ---- */  .u-shadow-sm { box-shadow: var(--shadow-sm); } .u-shadow-md { box-shadow: var(--shadow-md); } .u-shadow-lg { box-shadow: var(--shadow-lg); }  /* ---- Cursor ---- */  .u-cursor-pointer { cursor: pointer; } .u-cursor-not-allowed { cursor: not-allowed; }  /* ---- Spacing ---- */  .u-p-0 { padding: var(--space-0); } .u-p-1 { padding: var(--space-1); } .u-p-2 { padding: var(--space-2); } .u-p-3 { padding: var(--space-3); } .u-p-4 { padding: var(--space-4); } .u-p-5 { padding: var(--space-5); } .u-p-6 { padding: var(--space-6); }  .u-px-0 { padding-inline: var(--space-0); } .u-px-1 { padding-inline: var(--space-1); } .u-px-2 { padding-inline: var(--space-2); } .u-px-3 { padding-inline: var(--space-3); } .u-px-4 { padding-inline: var(--space-4); } .u-px-5 { padding-inline: var(--space-5); } .u-px-6 { padding-inline: var(--space-6); }  .u-py-0 { padding-block: var(--space-0); } .u-py-1 { padding-block: var(--space-1); } .u-py-2 { padding-block: var(--space-2); } .u-py-3 { padding-block: var(--space-3); } .u-py-4 { padding-block: var(--space-4); } .u-py-5 { padding-block: var(--space-5); } .u-py-6 { padding-block: var(--space-6); }  .u-m-0 { margin: var(--space-0); } .u-m-1 { margin: var(--space-1); } .u-m-2 { margin: var(--space-2); } .u-m-3 { margin: var(--space-3); } .u-m-4 { margin: var(--space-4); } .u-m-5 { margin: var(--space-5); } .u-m-6 { margin: var(--space-6); } .u-mx-auto { margin-inline: auto; }  /* ========================= BASE-ONLY UTILITIES (no responsive variants by design) ========================= */  /* existing spacing helpers */ .u-mt-2 { margin-top: var(--space-2); } .u-mt-4 { margin-top: var(--space-4); } .u-mb-2 { margin-bottom: var(--space-2); } .u-mb-4 { margin-bottom: var(--space-4); }  /* ========================= LEGACY / NON-CORE UTILITIES ========================= */  /* ---- Text ---- */  .u-text-left { text-align: left; } .u-text-center { text-align: center; } .u-text-right { text-align: right; }  .u-text-xs { font-size: var(--font-size-xs); } .u-text-sm { font-size: var(--font-size-sm); } .u-text-lg { font-size: var(--font-size-lg); } .u-text-xl { font-size: var(--font-size-xl); } .u-text-muted { color: var(--color-text-muted); }  .u-font-medium { font-weight: var(--font-weight-medium); } .u-font-semibold { font-weight: var(--font-weight-semibold); } .u-font-bold { font-weight: var(--font-weight-bold); } .u-font-mono { font-family: var(--font-family-mono); }  .u-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }  /* ---- Visibility ---- */  .u-overflow-auto { overflow: auto; } .u-overflow-hidden { overflow: hidden; } .u-overflow-visible { overflow: visible; } .u-overflow-x-auto { overflow-x: auto; } .u-overflow-y-auto { overflow-y: auto; }  .u-visually-hidden { clip: rect(0 0 0 0); clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; white-space: nowrap; width: 1px; }  .u-list-none { list-style: none; padding-left: 0; }  /* ---- State helpers ---- */  .is-hidden { display: none !important; } .is-disabled { cursor: not-allowed !important; opacity: var(--opacity-disabled) !important; pointer-events: none !important; } .is-loading { cursor: wait !important; opacity: var(--opacity-muted) !important; pointer-events: none !important; }  /* ---- Debug ---- */  .u-debug * { outline: 1px solid hsl(0 100% 50% / 0.3); } .u-debug-spacing * { outline: 1px dashed hsl(200 100% 50% / 0.3); }  /* ========================= RESPONSIVE CORE UTILITIES (must be generated for xs/sm/md/lg/xl) ========================= */  /* ---- Responsive: xs ---- */ @media (min-width: 30rem) { .u-xs-block { display: block; } .u-xs-inline-block { display: inline-block; } .u-xs-inline { display: inline; } .u-xs-flex { display: flex; } .u-xs-inline-flex { display: inline-flex; } .u-xs-grid { display: grid; } .u-xs-inline-grid { display: inline-grid; } .u-xs-hidden { display: none; } .u-xs-flex-row { flex-direction: row; } .u-xs-flex-col { flex-direction: column; } .u-xs-flex-wrap { flex-wrap: wrap; } .u-xs-flex-nowrap { flex-wrap: nowrap; } .u-xs-items-start { align-items: flex-start; } .u-xs-items-center { align-items: center; } .u-xs-items-end { align-items: flex-end; } .u-xs-items-stretch { align-items: stretch; } .u-xs-justify-start { justify-content: flex-start; } .u-xs-justify-center { justify-content: center; } .u-xs-justify-end { justify-content: flex-end; } .u-xs-justify-between { justify-content: space-between; } .u-xs-static { position: static; } .u-xs-relative { position: relative; } .u-xs-absolute { position: absolute; } .u-xs-fixed { position: fixed; } .u-xs-sticky { position: sticky; } .u-xs-inset-0 { inset: 0; } .u-xs-top-0 { top: 0; } .u-xs-right-0 { right: 0; } .u-xs-bottom-0 { bottom: 0; } .u-xs-left-0 { left: 0; } .u-xs-z-0 { z-index: 0; } .u-xs-z-10 { z-index: var(--z-dropdown); } .u-xs-z-20 { z-index: var(--z-sticky); } .u-xs-z-30 { z-index: var(--z-overlay); } .u-xs-z-40 { z-index: var(--z-modal); } .u-xs-z-50 { z-index: var(--z-toast); } .u-xs-text-left { text-align: left; } .u-xs-text-center { text-align: center; } .u-xs-text-right { text-align: right; } .u-xs-w-auto { width: auto; } .u-xs-w-full { width: var(--size-full); } .u-xs-w-screen { width: 100vw; } .u-xs-max-w-xs { max-width: var(--container-xs); } .u-xs-max-w-sm { max-width: var(--container-sm); } .u-xs-max-w-md { max-width: var(--container-md); } .u-xs-max-w-lg { max-width: var(--container-lg); } .u-xs-max-w-xl { max-width: var(--container-xl); } .u-xs-max-w-full { max-width: var(--size-full); } .u-xs-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); } .u-xs-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .u-xs-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .u-xs-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .u-xs-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); } .u-xs-cols-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); } .u-xs-gap-0 { gap: var(--space-0); } .u-xs-gap-1 { gap: var(--space-1); } .u-xs-gap-2 { gap: var(--space-2); } .u-xs-gap-3 { gap: var(--space-3); } .u-xs-gap-4 { gap: var(--space-4); } .u-xs-gap-5 { gap: var(--space-5); } .u-xs-gap-6 { gap: var(--space-6); } .u-xs-overflow-auto { overflow: auto; } .u-xs-overflow-hidden { overflow: hidden; } .u-xs-overflow-visible { overflow: visible; } .u-xs-overflow-x-auto { overflow-x: auto; } .u-xs-overflow-y-auto { overflow-y: auto; } .u-xs-border { border: var(--border-width-sm) solid var(--color-border); } .u-xs-border-0 { border: 0; } .u-xs-border-top { border-top: var(--border-width-sm) solid var(--color-border); } .u-xs-border-bottom { border-bottom: var(--border-width-sm) solid var(--color-border); } .u-xs-border-default { border-color: var(--color-border); } .u-xs-rounded { border-radius: var(--radius-md); } .u-xs-rounded-sm { border-radius: var(--radius-sm); } .u-xs-rounded-md { border-radius: var(--radius-md); } .u-xs-rounded-lg { border-radius: var(--radius-lg); } .u-xs-rounded-full { border-radius: var(--radius-full); } .u-xs-bg-surface { background-color: var(--color-surface); } .u-xs-bg-surface-2 { background-color: var(--color-surface-2); } .u-xs-bg-surface-3 { background-color: var(--color-surface-3); } .u-xs-bg-transparent { background-color: transparent; } .u-xs-shadow-sm { box-shadow: var(--shadow-sm); } .u-xs-shadow-md { box-shadow: var(--shadow-md); } .u-xs-shadow-lg { box-shadow: var(--shadow-lg); } .u-xs-cursor-pointer { cursor: pointer; } .u-xs-cursor-not-allowed { cursor: not-allowed; } .u-xs-p-0 { padding: var(--space-0); } .u-xs-p-1 { padding: var(--space-1); } .u-xs-p-2 { padding: var(--space-2); } .u-xs-p-3 { padding: var(--space-3); } .u-xs-p-4 { padding: var(--space-4); } .u-xs-p-5 { padding: var(--space-5); } .u-xs-p-6 { padding: var(--space-6); } .u-xs-px-0 { padding-inline: var(--space-0); } .u-xs-px-1 { padding-inline: var(--space-1); } .u-xs-px-2 { padding-inline: var(--space-2); } .u-xs-px-3 { padding-inline: var(--space-3); } .u-xs-px-4 { padding-inline: var(--space-4); } .u-xs-px-5 { padding-inline: var(--space-5); } .u-xs-px-6 { padding-inline: var(--space-6); } .u-xs-py-0 { padding-block: var(--space-0); } .u-xs-py-1 { padding-block: var(--space-1); } .u-xs-py-2 { padding-block: var(--space-2); } .u-xs-py-3 { padding-block: var(--space-3); } .u-xs-py-4 { padding-block: var(--space-4); } .u-xs-py-5 { padding-block: var(--space-5); } .u-xs-py-6 { padding-block: var(--space-6); } .u-xs-m-0 { margin: var(--space-0); } .u-xs-m-1 { margin: var(--space-1); } .u-xs-m-2 { margin: var(--space-2); } .u-xs-m-3 { margin: var(--space-3); } .u-xs-m-4 { margin: var(--space-4); } .u-xs-m-5 { margin: var(--space-5); } .u-xs-m-6 { margin: var(--space-6); } .u-xs-mx-auto { margin-inline: auto; } }  /* ---- Responsive: sm ---- */ @media (min-width: 48rem) { .u-sm-block { display: block; } .u-sm-inline-block { display: inline-block; } .u-sm-inline { display: inline; } .u-sm-flex { display: flex; } .u-sm-inline-flex { display: inline-flex; } .u-sm-grid { display: grid; } .u-sm-inline-grid { display: inline-grid; } .u-sm-hidden { display: none; } .u-sm-flex-row { flex-direction: row; } .u-sm-flex-col { flex-direction: column; } .u-sm-flex-wrap { flex-wrap: wrap; } .u-sm-flex-nowrap { flex-wrap: nowrap; } .u-sm-items-start { align-items: flex-start; } .u-sm-items-center { align-items: center; } .u-sm-items-end { align-items: flex-end; } .u-sm-items-stretch { align-items: stretch; } .u-sm-justify-start { justify-content: flex-start; } .u-sm-justify-center { justify-content: center; } .u-sm-justify-end { justify-content: flex-end; } .u-sm-justify-between { justify-content: space-between; } .u-sm-static { position: static; } .u-sm-relative { position: relative; } .u-sm-absolute { position: absolute; } .u-sm-fixed { position: fixed; } .u-sm-sticky { position: sticky; } .u-sm-inset-0 { inset: 0; } .u-sm-top-0 { top: 0; } .u-sm-right-0 { right: 0; } .u-sm-bottom-0 { bottom: 0; } .u-sm-left-0 { left: 0; } .u-sm-z-0 { z-index: 0; } .u-sm-z-10 { z-index: var(--z-dropdown); } .u-sm-z-20 { z-index: var(--z-sticky); } .u-sm-z-30 { z-index: var(--z-overlay); } .u-sm-z-40 { z-index: var(--z-modal); } .u-sm-z-50 { z-index: var(--z-toast); } .u-sm-text-left { text-align: left; } .u-sm-text-center { text-align: center; } .u-sm-text-right { text-align: right; } .u-sm-w-auto { width: auto; } .u-sm-w-full { width: var(--size-full); } .u-sm-w-screen { width: 100vw; } .u-sm-max-w-xs { max-width: var(--container-xs); } .u-sm-max-w-sm { max-width: var(--container-sm); } .u-sm-max-w-md { max-width: var(--container-md); } .u-sm-max-w-lg { max-width: var(--container-lg); } .u-sm-max-w-xl { max-width: var(--container-xl); } .u-sm-max-w-full { max-width: var(--size-full); } .u-sm-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); } .u-sm-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .u-sm-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .u-sm-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .u-sm-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); } .u-sm-cols-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); } .u-sm-gap-0 { gap: var(--space-0); } .u-sm-gap-1 { gap: var(--space-1); } .u-sm-gap-2 { gap: var(--space-2); } .u-sm-gap-3 { gap: var(--space-3); } .u-sm-gap-4 { gap: var(--space-4); } .u-sm-gap-5 { gap: var(--space-5); } .u-sm-gap-6 { gap: var(--space-6); } .u-sm-overflow-auto { overflow: auto; } .u-sm-overflow-hidden { overflow: hidden; } .u-sm-overflow-visible { overflow: visible; } .u-sm-overflow-x-auto { overflow-x: auto; } .u-sm-overflow-y-auto { overflow-y: auto; } .u-sm-border { border: var(--border-width-sm) solid var(--color-border); } .u-sm-border-0 { border: 0; } .u-sm-border-top { border-top: var(--border-width-sm) solid var(--color-border); } .u-sm-border-bottom { border-bottom: var(--border-width-sm) solid var(--color-border); } .u-sm-border-default { border-color: var(--color-border); } .u-sm-rounded { border-radius: var(--radius-md); } .u-sm-rounded-sm { border-radius: var(--radius-sm); } .u-sm-rounded-md { border-radius: var(--radius-md); } .u-sm-rounded-lg { border-radius: var(--radius-lg); } .u-sm-rounded-full { border-radius: var(--radius-full); } .u-sm-bg-surface { background-color: var(--color-surface); } .u-sm-bg-surface-2 { background-color: var(--color-surface-2); } .u-sm-bg-surface-3 { background-color: var(--color-surface-3); } .u-sm-bg-transparent { background-color: transparent; } .u-sm-shadow-sm { box-shadow: var(--shadow-sm); } .u-sm-shadow-md { box-shadow: var(--shadow-md); } .u-sm-shadow-lg { box-shadow: var(--shadow-lg); } .u-sm-cursor-pointer { cursor: pointer; } .u-sm-cursor-not-allowed { cursor: not-allowed; } .u-sm-p-0 { padding: var(--space-0); } .u-sm-p-1 { padding: var(--space-1); } .u-sm-p-2 { padding: var(--space-2); } .u-sm-p-3 { padding: var(--space-3); } .u-sm-p-4 { padding: var(--space-4); } .u-sm-p-5 { padding: var(--space-5); } .u-sm-p-6 { padding: var(--space-6); } .u-sm-px-0 { padding-inline: var(--space-0); } .u-sm-px-1 { padding-inline: var(--space-1); } .u-sm-px-2 { padding-inline: var(--space-2); } .u-sm-px-3 { padding-inline: var(--space-3); } .u-sm-px-4 { padding-inline: var(--space-4); } .u-sm-px-5 { padding-inline: var(--space-5); } .u-sm-px-6 { padding-inline: var(--space-6); } .u-sm-py-0 { padding-block: var(--space-0); } .u-sm-py-1 { padding-block: var(--space-1); } .u-sm-py-2 { padding-block: var(--space-2); } .u-sm-py-3 { padding-block: var(--space-3); } .u-sm-py-4 { padding-block: var(--space-4); } .u-sm-py-5 { padding-block: var(--space-5); } .u-sm-py-6 { padding-block: var(--space-6); } .u-sm-m-0 { margin: var(--space-0); } .u-sm-m-1 { margin: var(--space-1); } .u-sm-m-2 { margin: var(--space-2); } .u-sm-m-3 { margin: var(--space-3); } .u-sm-m-4 { margin: var(--space-4); } .u-sm-m-5 { margin: var(--space-5); } .u-sm-m-6 { margin: var(--space-6); } .u-sm-mx-auto { margin-inline: auto; } }  /* ---- Responsive: md ---- */ @media (min-width: 64rem) { .u-md-block { display: block; } .u-md-inline-block { display: inline-block; } .u-md-inline { display: inline; } .u-md-flex { display: flex; } .u-md-inline-flex { display: inline-flex; } .u-md-grid { display: grid; } .u-md-inline-grid { display: inline-grid; } .u-md-hidden { display: none; } .u-md-flex-row { flex-direction: row; } .u-md-flex-col { flex-direction: column; } .u-md-flex-wrap { flex-wrap: wrap; } .u-md-flex-nowrap { flex-wrap: nowrap; } .u-md-items-start { align-items: flex-start; } .u-md-items-center { align-items: center; } .u-md-items-end { align-items: flex-end; } .u-md-items-stretch { align-items: stretch; } .u-md-justify-start { justify-content: flex-start; } .u-md-justify-center { justify-content: center; } .u-md-justify-end { justify-content: flex-end; } .u-md-justify-between { justify-content: space-between; } .u-md-static { position: static; } .u-md-relative { position: relative; } .u-md-absolute { position: absolute; } .u-md-fixed { position: fixed; } .u-md-sticky { position: sticky; } .u-md-inset-0 { inset: 0; } .u-md-top-0 { top: 0; } .u-md-right-0 { right: 0; } .u-md-bottom-0 { bottom: 0; } .u-md-left-0 { left: 0; } .u-md-z-0 { z-index: 0; } .u-md-z-10 { z-index: var(--z-dropdown); } .u-md-z-20 { z-index: var(--z-sticky); } .u-md-z-30 { z-index: var(--z-overlay); } .u-md-z-40 { z-index: var(--z-modal); } .u-md-z-50 { z-index: var(--z-toast); } .u-md-text-left { text-align: left; } .u-md-text-center { text-align: center; } .u-md-text-right { text-align: right; } .u-md-w-auto { width: auto; } .u-md-w-full { width: var(--size-full); } .u-md-w-screen { width: 100vw; } .u-md-max-w-xs { max-width: var(--container-xs); } .u-md-max-w-sm { max-width: var(--container-sm); } .u-md-max-w-md { max-width: var(--container-md); } .u-md-max-w-lg { max-width: var(--container-lg); } .u-md-max-w-xl { max-width: var(--container-xl); } .u-md-max-w-full { max-width: var(--size-full); } .u-md-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); } .u-md-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .u-md-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .u-md-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .u-md-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); } .u-md-cols-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); } .u-md-gap-0 { gap: var(--space-0); } .u-md-gap-1 { gap: var(--space-1); } .u-md-gap-2 { gap: var(--space-2); } .u-md-gap-3 { gap: var(--space-3); } .u-md-gap-4 { gap: var(--space-4); } .u-md-gap-5 { gap: var(--space-5); } .u-md-gap-6 { gap: var(--space-6); } .u-md-overflow-auto { overflow: auto; } .u-md-overflow-hidden { overflow: hidden; } .u-md-overflow-visible { overflow: visible; } .u-md-overflow-x-auto { overflow-x: auto; } .u-md-overflow-y-auto { overflow-y: auto; } .u-md-border { border: var(--border-width-sm) solid var(--color-border); } .u-md-border-0 { border: 0; } .u-md-border-top { border-top: var(--border-width-sm) solid var(--color-border); } .u-md-border-bottom { border-bottom: var(--border-width-sm) solid var(--color-border); } .u-md-border-default { border-color: var(--color-border); } .u-md-rounded { border-radius: var(--radius-md); } .u-md-rounded-sm { border-radius: var(--radius-sm); } .u-md-rounded-md { border-radius: var(--radius-md); } .u-md-rounded-lg { border-radius: var(--radius-lg); } .u-md-rounded-full { border-radius: var(--radius-full); } .u-md-bg-surface { background-color: var(--color-surface); } .u-md-bg-surface-2 { background-color: var(--color-surface-2); } .u-md-bg-surface-3 { background-color: var(--color-surface-3); } .u-md-bg-transparent { background-color: transparent; } .u-md-shadow-sm { box-shadow: var(--shadow-sm); } .u-md-shadow-md { box-shadow: var(--shadow-md); } .u-md-shadow-lg { box-shadow: var(--shadow-lg); } .u-md-cursor-pointer { cursor: pointer; } .u-md-cursor-not-allowed { cursor: not-allowed; } .u-md-p-0 { padding: var(--space-0); } .u-md-p-1 { padding: var(--space-1); } .u-md-p-2 { padding: var(--space-2); } .u-md-p-3 { padding: var(--space-3); } .u-md-p-4 { padding: var(--space-4); } .u-md-p-5 { padding: var(--space-5); } .u-md-p-6 { padding: var(--space-6); } .u-md-px-0 { padding-inline: var(--space-0); } .u-md-px-1 { padding-inline: var(--space-1); } .u-md-px-2 { padding-inline: var(--space-2); } .u-md-px-3 { padding-inline: var(--space-3); } .u-md-px-4 { padding-inline: var(--space-4); } .u-md-px-5 { padding-inline: var(--space-5); } .u-md-px-6 { padding-inline: var(--space-6); } .u-md-py-0 { padding-block: var(--space-0); } .u-md-py-1 { padding-block: var(--space-1); } .u-md-py-2 { padding-block: var(--space-2); } .u-md-py-3 { padding-block: var(--space-3); } .u-md-py-4 { padding-block: var(--space-4); } .u-md-py-5 { padding-block: var(--space-5); } .u-md-py-6 { padding-block: var(--space-6); } .u-md-m-0 { margin: var(--space-0); } .u-md-m-1 { margin: var(--space-1); } .u-md-m-2 { margin: var(--space-2); } .u-md-m-3 { margin: var(--space-3); } .u-md-m-4 { margin: var(--space-4); } .u-md-m-5 { margin: var(--space-5); } .u-md-m-6 { margin: var(--space-6); } .u-md-mx-auto { margin-inline: auto; } }  /* ---- Responsive: lg ---- */ @media (min-width: 80rem) { .u-lg-block { display: block; } .u-lg-inline-block { display: inline-block; } .u-lg-inline { display: inline; } .u-lg-flex { display: flex; } .u-lg-inline-flex { display: inline-flex; } .u-lg-grid { display: grid; } .u-lg-inline-grid { display: inline-grid; } .u-lg-hidden { display: none; } .u-lg-flex-row { flex-direction: row; } .u-lg-flex-col { flex-direction: column; } .u-lg-flex-wrap { flex-wrap: wrap; } .u-lg-flex-nowrap { flex-wrap: nowrap; } .u-lg-items-start { align-items: flex-start; } .u-lg-items-center { align-items: center; } .u-lg-items-end { align-items: flex-end; } .u-lg-items-stretch { align-items: stretch; } .u-lg-justify-start { justify-content: flex-start; } .u-lg-justify-center { justify-content: center; } .u-lg-justify-end { justify-content: flex-end; } .u-lg-justify-between { justify-content: space-between; } .u-lg-static { position: static; } .u-lg-relative { position: relative; } .u-lg-absolute { position: absolute; } .u-lg-fixed { position: fixed; } .u-lg-sticky { position: sticky; } .u-lg-inset-0 { inset: 0; } .u-lg-top-0 { top: 0; } .u-lg-right-0 { right: 0; } .u-lg-bottom-0 { bottom: 0; } .u-lg-left-0 { left: 0; } .u-lg-z-0 { z-index: 0; } .u-lg-z-10 { z-index: var(--z-dropdown); } .u-lg-z-20 { z-index: var(--z-sticky); } .u-lg-z-30 { z-index: var(--z-overlay); } .u-lg-z-40 { z-index: var(--z-modal); } .u-lg-z-50 { z-index: var(--z-toast); } .u-lg-text-left { text-align: left; } .u-lg-text-center { text-align: center; } .u-lg-text-right { text-align: right; } .u-lg-w-auto { width: auto; } .u-lg-w-full { width: var(--size-full); } .u-lg-w-screen { width: 100vw; } .u-lg-max-w-xs { max-width: var(--container-xs); } .u-lg-max-w-sm { max-width: var(--container-sm); } .u-lg-max-w-md { max-width: var(--container-md); } .u-lg-max-w-lg { max-width: var(--container-lg); } .u-lg-max-w-xl { max-width: var(--container-xl); } .u-lg-max-w-full { max-width: var(--size-full); } .u-lg-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); } .u-lg-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .u-lg-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .u-lg-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .u-lg-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); } .u-lg-cols-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); } .u-lg-gap-0 { gap: var(--space-0); } .u-lg-gap-1 { gap: var(--space-1); } .u-lg-gap-2 { gap: var(--space-2); } .u-lg-gap-3 { gap: var(--space-3); } .u-lg-gap-4 { gap: var(--space-4); } .u-lg-gap-5 { gap: var(--space-5); } .u-lg-gap-6 { gap: var(--space-6); } .u-lg-overflow-auto { overflow: auto; } .u-lg-overflow-hidden { overflow: hidden; } .u-lg-overflow-visible { overflow: visible; } .u-lg-overflow-x-auto { overflow-x: auto; } .u-lg-overflow-y-auto { overflow-y: auto; } .u-lg-border { border: var(--border-width-sm) solid var(--color-border); } .u-lg-border-0 { border: 0; } .u-lg-border-top { border-top: var(--border-width-sm) solid var(--color-border); } .u-lg-border-bottom { border-bottom: var(--border-width-sm) solid var(--color-border); } .u-lg-border-default { border-color: var(--color-border); } .u-lg-rounded { border-radius: var(--radius-md); } .u-lg-rounded-sm { border-radius: var(--radius-sm); } .u-lg-rounded-md { border-radius: var(--radius-md); } .u-lg-rounded-lg { border-radius: var(--radius-lg); } .u-lg-rounded-full { border-radius: var(--radius-full); } .u-lg-bg-surface { background-color: var(--color-surface); } .u-lg-bg-surface-2 { background-color: var(--color-surface-2); } .u-lg-bg-surface-3 { background-color: var(--color-surface-3); } .u-lg-bg-transparent { background-color: transparent; } .u-lg-shadow-sm { box-shadow: var(--shadow-sm); } .u-lg-shadow-md { box-shadow: var(--shadow-md); } .u-lg-shadow-lg { box-shadow: var(--shadow-lg); } .u-lg-cursor-pointer { cursor: pointer; } .u-lg-cursor-not-allowed { cursor: not-allowed; } .u-lg-p-0 { padding: var(--space-0); } .u-lg-p-1 { padding: var(--space-1); } .u-lg-p-2 { padding: var(--space-2); } .u-lg-p-3 { padding: var(--space-3); } .u-lg-p-4 { padding: var(--space-4); } .u-lg-p-5 { padding: var(--space-5); } .u-lg-p-6 { padding: var(--space-6); } .u-lg-px-0 { padding-inline: var(--space-0); } .u-lg-px-1 { padding-inline: var(--space-1); } .u-lg-px-2 { padding-inline: var(--space-2); } .u-lg-px-3 { padding-inline: var(--space-3); } .u-lg-px-4 { padding-inline: var(--space-4); } .u-lg-px-5 { padding-inline: var(--space-5); } .u-lg-px-6 { padding-inline: var(--space-6); } .u-lg-py-0 { padding-block: var(--space-0); } .u-lg-py-1 { padding-block: var(--space-1); } .u-lg-py-2 { padding-block: var(--space-2); } .u-lg-py-3 { padding-block: var(--space-3); } .u-lg-py-4 { padding-block: var(--space-4); } .u-lg-py-5 { padding-block: var(--space-5); } .u-lg-py-6 { padding-block: var(--space-6); } .u-lg-m-0 { margin: var(--space-0); } .u-lg-m-1 { margin: var(--space-1); } .u-lg-m-2 { margin: var(--space-2); } .u-lg-m-3 { margin: var(--space-3); } .u-lg-m-4 { margin: var(--space-4); } .u-lg-m-5 { margin: var(--space-5); } .u-lg-m-6 { margin: var(--space-6); } .u-lg-mx-auto { margin-inline: auto; } }  /* ---- Responsive: xl ---- */ @media (min-width: 96rem) { .u-xl-block { display: block; } .u-xl-inline-block { display: inline-block; } .u-xl-inline { display: inline; } .u-xl-flex { display: flex; } .u-xl-inline-flex { display: inline-flex; } .u-xl-grid { display: grid; } .u-xl-inline-grid { display: inline-grid; } .u-xl-hidden { display: none; } .u-xl-flex-row { flex-direction: row; } .u-xl-flex-col { flex-direction: column; } .u-xl-flex-wrap { flex-wrap: wrap; } .u-xl-flex-nowrap { flex-wrap: nowrap; } .u-xl-items-start { align-items: flex-start; } .u-xl-items-center { align-items: center; } .u-xl-items-end { align-items: flex-end; } .u-xl-items-stretch { align-items: stretch; } .u-xl-justify-start { justify-content: flex-start; } .u-xl-justify-center { justify-content: center; } .u-xl-justify-end { justify-content: flex-end; } .u-xl-justify-between { justify-content: space-between; } .u-xl-static { position: static; } .u-xl-relative { position: relative; } .u-xl-absolute { position: absolute; } .u-xl-fixed { position: fixed; } .u-xl-sticky { position: sticky; } .u-xl-inset-0 { inset: 0; } .u-xl-top-0 { top: 0; } .u-xl-right-0 { right: 0; } .u-xl-bottom-0 { bottom: 0; } .u-xl-left-0 { left: 0; } .u-xl-z-0 { z-index: 0; } .u-xl-z-10 { z-index: var(--z-dropdown); } .u-xl-z-20 { z-index: var(--z-sticky); } .u-xl-z-30 { z-index: var(--z-overlay); } .u-xl-z-40 { z-index: var(--z-modal); } .u-xl-z-50 { z-index: var(--z-toast); } .u-xl-text-left { text-align: left; } .u-xl-text-center { text-align: center; } .u-xl-text-right { text-align: right; } .u-xl-w-auto { width: auto; } .u-xl-w-full { width: var(--size-full); } .u-xl-w-screen { width: 100vw; } .u-xl-max-w-xs { max-width: var(--container-xs); } .u-xl-max-w-sm { max-width: var(--container-sm); } .u-xl-max-w-md { max-width: var(--container-md); } .u-xl-max-w-lg { max-width: var(--container-lg); } .u-xl-max-w-xl { max-width: var(--container-xl); } .u-xl-max-w-full { max-width: var(--size-full); } .u-xl-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); } .u-xl-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .u-xl-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .u-xl-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .u-xl-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); } .u-xl-cols-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); } .u-xl-gap-0 { gap: var(--space-0); } .u-xl-gap-1 { gap: var(--space-1); } .u-xl-gap-2 { gap: var(--space-2); } .u-xl-gap-3 { gap: var(--space-3); } .u-xl-gap-4 { gap: var(--space-4); } .u-xl-gap-5 { gap: var(--space-5); } .u-xl-gap-6 { gap: var(--space-6); } .u-xl-overflow-auto { overflow: auto; } .u-xl-overflow-hidden { overflow: hidden; } .u-xl-overflow-visible { overflow: visible; } .u-xl-overflow-x-auto { overflow-x: auto; } .u-xl-overflow-y-auto { overflow-y: auto; } .u-xl-border { border: var(--border-width-sm) solid var(--color-border); } .u-xl-border-0 { border: 0; } .u-xl-border-top { border-top: var(--border-width-sm) solid var(--color-border); } .u-xl-border-bottom { border-bottom: var(--border-width-sm) solid var(--color-border); } .u-xl-border-default { border-color: var(--color-border); } .u-xl-rounded { border-radius: var(--radius-md); } .u-xl-rounded-sm { border-radius: var(--radius-sm); } .u-xl-rounded-md { border-radius: var(--radius-md); } .u-xl-rounded-lg { border-radius: var(--radius-lg); } .u-xl-rounded-full { border-radius: var(--radius-full); } .u-xl-bg-surface { background-color: var(--color-surface); } .u-xl-bg-surface-2 { background-color: var(--color-surface-2); } .u-xl-bg-surface-3 { background-color: var(--color-surface-3); } .u-xl-bg-transparent { background-color: transparent; } .u-xl-shadow-sm { box-shadow: var(--shadow-sm); } .u-xl-shadow-md { box-shadow: var(--shadow-md); } .u-xl-shadow-lg { box-shadow: var(--shadow-lg); } .u-xl-cursor-pointer { cursor: pointer; } .u-xl-cursor-not-allowed { cursor: not-allowed; } .u-xl-p-0 { padding: var(--space-0); } .u-xl-p-1 { padding: var(--space-1); } .u-xl-p-2 { padding: var(--space-2); } .u-xl-p-3 { padding: var(--space-3); } .u-xl-p-4 { padding: var(--space-4); } .u-xl-p-5 { padding: var(--space-5); } .u-xl-p-6 { padding: var(--space-6); } .u-xl-px-0 { padding-inline: var(--space-0); } .u-xl-px-1 { padding-inline: var(--space-1); } .u-xl-px-2 { padding-inline: var(--space-2); } .u-xl-px-3 { padding-inline: var(--space-3); } .u-xl-px-4 { padding-inline: var(--space-4); } .u-xl-px-5 { padding-inline: var(--space-5); } .u-xl-px-6 { padding-inline: var(--space-6); } .u-xl-py-0 { padding-block: var(--space-0); } .u-xl-py-1 { padding-block: var(--space-1); } .u-xl-py-2 { padding-block: var(--space-2); } .u-xl-py-3 { padding-block: var(--space-3); } .u-xl-py-4 { padding-block: var(--space-4); } .u-xl-py-5 { padding-block: var(--space-5); } .u-xl-py-6 { padding-block: var(--space-6); } .u-xl-m-0 { margin: var(--space-0); } .u-xl-m-1 { margin: var(--space-1); } .u-xl-m-2 { margin: var(--space-2); } .u-xl-m-3 { margin: var(--space-3); } .u-xl-m-4 { margin: var(--space-4); } .u-xl-m-5 { margin: var(--space-5); } .u-xl-m-6 { margin: var(--space-6); } .u-xl-mx-auto { margin-inline: auto; } } } /* ======================================================= Container - core-css v1 Centered wrapper aligned to canonical --container-* tokens. ======================================================= */  @layer components { .container { width: var(--size-full); margin-inline: auto; max-width: var(--container-lg); padding-inline: var(--space-4); }  .container--narrow { max-width: var(--container-sm); } .container--wide { max-width: var(--container-xl); } .container--fluid { max-width: none; } .container--full { max-width: var(--size-full); padding-inline: 0; }  @media (min-width: 48rem) { .container { padding-inline: var(--space-5); } .container--full { padding-inline: 0; } }  @media (min-width: 64rem) { .container { padding-inline: var(--space-6); } .container--full { padding-inline: 0; } } } /* ======================================================= Icon — core-css v1 Minimal primitive for inline icon sizing. Works with SVG icons or icon fonts. Sets width/height and shrink behavior. ======================================================= */  @layer components { .icon { display: inline-flex; flex-shrink: 0; height: var(--size-icon-md); width: var(--size-icon-md); }  .icon svg { height: var(--size-full); width: var(--size-full); }  .icon--sm { height: var(--size-icon-sm); width: var(--size-icon-sm); }  .icon--lg { height: var(--size-icon-lg); width: var(--size-icon-lg); } } /* ======================================================= Button — core-css v1 Clickable action trigger. Base is neutral; variants add semantic color. Sizes: sm / md (default) / lg.  Accessible: supports :disabled and [aria-disabled]. All visual values come from tokens. ======================================================= */  @layer components {  .button { align-items: center; background-color: var(--color-surface); border: var(--border-width-sm) solid var(--color-border); border-radius: var(--button-radius); color: var(--color-text); cursor: pointer; display: inline-flex; font-size: var(--button-font-size); font-weight: var(--font-weight-medium); gap: var(--space-2); justify-content: center; line-height: var(--line-height-tight); min-height: var(--size-control-md); padding-block: var(--space-2); padding-inline: var(--space-4); text-align: center; text-decoration: none; touch-action: manipulation; transition: background-color var(--motion-fast), border-color var(--motion-fast), box-shadow var(--motion-fast), color var(--motion-fast), transform var(--motion-fast); white-space: nowrap; }  .button:where(:not(:disabled):not([aria-disabled='true'])):hover { background-color: var(--color-surface-muted); }  @media (prefers-reduced-motion: no-preference) { .button:where(:not(:disabled):not([aria-disabled='true'])):active { transform: translateY(calc(var(--space-1) / 4)); } }  .button:focus-visible { outline: var(--focus-ring-width) solid var(--focus-ring-color); outline-offset: var(--focus-ring-offset); box-shadow: 0 0 0 var(--focus-ring-width) var(--focus-ring-color); }  .button:disabled { cursor: not-allowed; opacity: var(--opacity-disabled); pointer-events: none; text-decoration: none; transform: none; }  .button[aria-disabled='true'] { cursor: not-allowed; opacity: var(--opacity-disabled); text-decoration: none; transform: none; }  /* ---- Color variants ---- */  .button--primary { background-color: var(--color-primary); border-color: var(--color-primary); color: var(--color-primary-contrast); } .button--primary:where(:not(:disabled):not([aria-disabled='true'])):hover { background-color: var(--color-primary-hover); border-color: var(--color-primary-hover); }  .button--primary:where(:not(:disabled):not([aria-disabled='true'])):active { background-color: var(--color-primary-active); border-color: var(--color-primary-active); }  .button--secondary { background-color: var(--color-surface-muted); border-color: var(--color-border); color: var(--color-text); } .button--secondary:where(:not(:disabled):not([aria-disabled='true'])):hover { background-color: var(--color-border); }  .button--outline { background-color: transparent; border-color: var(--color-border); color: var(--color-text); } .button--outline:where(:not(:disabled):not([aria-disabled='true'])):hover { background-color: var(--color-surface-muted); }  .button--ghost { background-color: transparent; border-color: transparent; color: var(--color-text); } .button--ghost:where(:not(:disabled):not([aria-disabled='true'])):hover { background-color: var(--color-surface-muted); }  .button--success { background-color: var(--color-success); border-color: var(--color-success); color: var(--color-success-contrast); } .button--success:where(:not(:disabled):not([aria-disabled='true'])):hover { background-color: var(--color-success-hover); border-color: var(--color-success-hover); }  .button--danger { background-color: var(--color-danger); border-color: var(--color-danger); color: var(--color-danger-contrast); } .button--danger:where(:not(:disabled):not([aria-disabled='true'])):hover { background-color: var(--color-danger-hover); border-color: var(--color-danger-hover); }  /* ---- Size variants ---- */  .button--sm { font-size: var(--font-size-xs); min-height: var(--size-control-sm); padding-block: var(--space-1); padding-inline: var(--space-3); }  .button--md { font-size: var(--button-font-size); min-height: var(--size-control-md); padding-block: var(--space-2); padding-inline: var(--space-4); }  .button--lg { font-size: var(--font-size-md); min-height: var(--size-control-lg); padding-block: var(--space-3); padding-inline: var(--space-6); }  .button--full { width: var(--size-full); } } /* ======================================================= Card — core-css v1 Flexible content container. Header, body and footer are optional slots. Variants: elevated, outlined, compact, interactive. ======================================================= */  @layer components {  .card { background-color: var(--color-surface); border: var(--border-width-sm) solid var(--color-border); border-radius: var(--card-radius); color: var(--color-text); display: flex; flex-direction: column; gap: var(--space-4); padding: var(--card-padding); }  .card__header, .card__body { display: grid; gap: var(--space-2); }  .card__title { color: var(--color-text); font-size: var(--font-size-lg); font-weight: var(--font-weight-semibold); line-height: var(--line-height-tight); }  .card__description { color: var(--color-text-muted); font-size: var(--font-size-sm); }  .card__footer { align-items: center; display: flex; gap: var(--space-3); justify-content: flex-end; }  /* ---- Variants ---- */  .card--elevated { border-color: transparent; box-shadow: var(--shadow-md); }  .card--outlined { background-color: transparent; }  .card--compact { gap: var(--space-3); padding: var(--space-4); }  /* Interactive — hover lift for clickable cards */ .card--interactive { cursor: pointer; text-decoration: none; transition: box-shadow var(--motion-fast), transform var(--motion-fast); }  .card--interactive:hover { box-shadow: var(--shadow-md); transform: translateY(calc(var(--space-1) / -2)); }  .card--interactive:active { transform: translateY(0); } } /* ======================================================= Modal - core-css v1 Accessible modal shell for JS-driven dialog behavior. ======================================================= */  @layer components {  .modal { --modal-max-width: var(--size-modal-md); display: none; inset: 0; padding: var(--space-6); place-items: center; position: fixed; z-index: var(--z-modal); }  .modal.is-open, .modal--open { display: grid; }  .modal__backdrop { background-color: var(--color-backdrop); inset: 0; position: absolute; }  .modal__dialog { background-color: var(--color-surface); border: var(--border-width-sm) solid var(--color-border); border-radius: var(--radius-xl); box-shadow: var(--shadow-lg); color: var(--color-text); display: grid; gap: var(--space-6); grid-template-rows: auto minmax(0, 1fr) auto; min-height: 0; min-width: 0; max-height: calc(var(--size-viewport-height) - (var(--space-6) * 2)); max-width: var(--modal-max-width); overflow: hidden; padding: var(--space-6); position: relative; width: var(--size-full); z-index: 1; }  .modal__header { align-items: flex-start; display: flex; gap: var(--space-4); justify-content: space-between; }  .modal__body { display: grid; gap: var(--space-3); min-height: 0; overflow: auto; }  .modal__footer { align-items: center; display: flex; gap: var(--space-3); justify-content: flex-end; }  .modal__title { font-size: var(--font-size-xl); font-weight: var(--font-weight-semibold); line-height: var(--line-height-tight); }  .modal__close { align-items: center; background: transparent; border: var(--border-width-sm) solid transparent; border-radius: var(--radius-pill); color: var(--color-text-muted); cursor: pointer; display: inline-flex; flex-shrink: 0; justify-content: center; min-height: var(--size-control-sm); min-width: var(--size-control-sm); transition: background-color var(--motion-fast), color var(--motion-fast); }  .modal__close:hover { background-color: var(--color-surface-muted); color: var(--color-text); }  .modal :focus-visible { outline: var(--focus-ring-width) solid var(--focus-ring-color); outline-offset: var(--focus-ring-offset); box-shadow: 0 0 0 var(--focus-ring-width) var(--focus-ring-color); }  .modal--sm { --modal-max-width: var(--size-modal-sm); } .modal--md { --modal-max-width: var(--size-modal-md); } .modal--lg { --modal-max-width: var(--size-modal-lg); }  .modal--full { --modal-max-width: var(--size-full); padding: 0; }  .modal--full .modal__dialog { border-radius: 0; height: var(--size-full); max-height: var(--size-full); } } /* ======================================================= Form - core-css v1 Accessible field styling for native controls. Canonical field structure: .form__field + .form__control. ======================================================= */  @layer components {  .form { display: grid; gap: var(--space-6); }  .form--inline { align-items: end; grid-template-columns: repeat(auto-fit, minmax(var(--size-field-min), 1fr)); }  .form__field, .form__group { display: grid; gap: var(--space-1); }  .form__label { color: var(--color-text); font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); line-height: var(--line-height-tight); }  .form__control, .form__select, .form__textarea { width: var(--size-full); min-height: var(--size-control-md); border: var(--border-width-sm) solid var(--color-border); border-radius: var(--input-radius); background-color: var(--color-surface); color: var(--color-text); font: inherit; line-height: var(--line-height-normal); padding-block: var(--space-2); padding-inline: var(--space-3); transition: background-color var(--motion-fast), border-color var(--motion-fast), box-shadow var(--motion-fast), color var(--motion-fast); }  textarea.form__control, .form__textarea { min-height: calc(var(--size-control-lg) * 2); resize: vertical; }  .form__control::placeholder, .form__textarea::placeholder { color: var(--color-text-muted); }  .form__control:where(:not(:disabled):not([aria-disabled='true'])):hover, .form__select:where(:not(:disabled):not([aria-disabled='true'])):hover, .form__textarea:where(:not(:disabled):not([aria-disabled='true'])):hover { border-color: var(--color-text-muted); }  .form__control:focus, .form__select:focus, .form__textarea:focus { border-color: var(--color-primary); }  .form__control:focus-visible, .form__select:focus-visible, .form__textarea:focus-visible { outline: var(--focus-ring-width) solid var(--focus-ring-color); outline-offset: var(--focus-ring-offset); box-shadow: 0 0 0 var(--focus-ring-width) var(--focus-ring-color); }  .form__control:disabled, .form__select:disabled, .form__textarea:disabled { background-color: var(--color-surface-muted); color: var(--color-text-muted); cursor: not-allowed; opacity: var(--opacity-disabled); pointer-events: none; }  .form__control[aria-disabled='true'], .form__select[aria-disabled='true'], .form__textarea[aria-disabled='true'] { background-color: var(--color-surface-muted); color: var(--color-text-muted); cursor: not-allowed; opacity: var(--opacity-disabled); }  .form__control:invalid, .form__select:invalid, .form__textarea:invalid, .form__control[aria-invalid='true'], .form__select[aria-invalid='true'], .form__textarea[aria-invalid='true'], .form__control--error, .form__select--error, .form__textarea--error { border-color: var(--color-danger); }  .form__control--success, .form__select--success, .form__textarea--success { border-color: var(--color-success); }  .form__hint { color: var(--color-text-muted); font-size: var(--font-size-sm); line-height: var(--line-height-normal); }  .form__error { display: none; color: var(--color-danger); font-size: var(--font-size-sm); line-height: var(--line-height-normal); }  .form__error:not(:empty) { display: block; }  .form__option { align-items: center; color: var(--color-text); cursor: pointer; display: inline-flex; gap: var(--space-2); line-height: var(--line-height-normal); }  .form__option input[type='checkbox'], .form__option input[type='radio'] { margin: 0; }  .form__fieldset { border: var(--border-width-sm) solid var(--color-border); border-radius: var(--radius-md); display: grid; gap: var(--space-3); min-inline-size: 0; padding: var(--space-4); }  .form__legend { color: var(--color-text); font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); line-height: var(--line-height-tight); padding-inline: var(--space-1); }  .form__actions { display: flex; gap: var(--space-3); justify-content: flex-end; } } /* ======================================================= Table — core-css v1 Data display with header, rows and columns. Wrap in .table__wrapper for horizontal scroll. Variants: striped, compact, bordered, hover. ======================================================= */  @layer components {  .table__wrapper { overflow-x: auto; }  .table { background-color: var(--color-surface); border: var(--border-width-sm) solid var(--color-border); border-radius: var(--radius-lg); color: var(--color-text); overflow: hidden; width: var(--size-full); }  .table :where(th, td) { border-bottom: var(--border-width-sm) solid var(--color-border); padding: var(--space-3) var(--space-4); text-align: left; }  .table th { background-color: var(--color-surface-muted); color: var(--color-text); font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); }  .table td { color: var(--color-text-muted); font-size: var(--font-size-sm); }  .table tr:last-child td { border-bottom: none; }  /* ---- Variants ---- */  .table--striped tbody tr:nth-child(even) { background-color: var(--color-surface-muted); }  .table--compact :where(th, td) { padding: var(--space-2) var(--space-3); }  .table--bordered :where(th, td) { border-inline-end: var(--border-width-sm) solid var(--color-border); }  .table--bordered :where(th:last-child, td:last-child) { border-inline-end: none; }  .table--hover tbody tr { transition: background-color var(--motion-fast); }  .table--hover tbody tr:hover { background-color: var(--color-surface-muted); } } /* ======================================================= Badge — core-css v1 Inline status indicator for counts, labels and tags. Semantic color variants + outline + size. ======================================================= */  @layer components {  .badge { align-items: center; background-color: var(--color-surface-muted); border: var(--border-width-sm) solid transparent; border-radius: var(--badge-radius); color: var(--color-text); display: inline-flex; font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold); gap: var(--space-1); line-height: var(--line-height-tight); padding: var(--space-1) var(--space-2); white-space: nowrap; }  .badge--primary { background-color: var(--color-primary); color: var(--color-primary-contrast); }  .badge--success { background-color: var(--color-success); color: var(--color-success-contrast); }  .badge--warning { background-color: var(--color-warning); color: var(--color-warning-contrast); }  .badge--danger { background-color: var(--color-danger); color: var(--color-danger-contrast); }  .badge--outline { background-color: transparent; border-color: currentColor; }  .badge--lg { font-size: var(--font-size-sm); padding: var(--space-1) var(--space-3); } } /* ======================================================= Alert — core-css v1 Contextual feedback message. Semantic variants use subtle tinted backgrounds. Dismiss button optional. Use role="alert" on container for live region. ======================================================= */  @layer components {  .alert { background-color: var(--color-surface); border: var(--border-width-sm) solid var(--color-border); border-radius: var(--alert-radius); color: var(--color-text); display: flex; gap: var(--space-4); padding: var(--space-4) var(--space-4); }  .alert__content { display: grid; flex: 1; gap: var(--space-1); min-width: 0; }  .alert__title { font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); }  .alert__description { color: var(--color-text-muted); font-size: var(--font-size-sm); }  .alert__dismiss { align-self: flex-start; background: none; border: none; border-radius: var(--radius-sm); color: inherit; cursor: pointer; flex-shrink: 0; opacity: var(--opacity-muted); padding: var(--space-1); transition: opacity var(--motion-fast); }  .alert__dismiss:hover { opacity: 1; }  /* ---- Semantic variants ---- */  .alert--info { background-color: var(--color-primary-subtle); border-color: var(--color-primary); }  .alert--success { background-color: var(--color-success-subtle); border-color: var(--color-success); }  .alert--warning { background-color: var(--color-warning-subtle); border-color: var(--color-warning); }  .alert--danger { background-color: var(--color-danger-subtle); border-color: var(--color-danger); } } /* ======================================================= Dropdown - core-css v1 Accessible dropdown shell for JS-driven menu behavior. ======================================================= */  @layer components {  .dropdown { display: inline-block; position: relative; }  .dropdown__trigger { align-items: center; cursor: pointer; display: inline-flex; gap: var(--space-2); justify-content: center; }  .dropdown__trigger:focus-visible { outline: var(--focus-ring-width) solid var(--focus-ring-color); outline-offset: var(--focus-ring-offset); box-shadow: 0 0 0 var(--focus-ring-width) var(--focus-ring-color); position: relative; z-index: 2; }  .dropdown__menu { background-color: var(--color-surface); border: var(--border-width-sm) solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); display: none; left: 0; min-width: 0; min-inline-size: max(var(--size-field-min), 100%); padding: var(--space-1); position: absolute; top: calc(100% + var(--space-1)); z-index: var(--z-dropdown); }  .dropdown.is-open .dropdown__menu, .dropdown--open .dropdown__menu { display: block; }  .dropdown--right .dropdown__menu { left: auto; right: 0; }  .dropdown--top .dropdown__menu { bottom: 100%; margin-bottom: 0; top: auto; transform: translateY(calc(var(--space-1) * -1)); }  .dropdown__item { align-items: center; background: transparent; border: 0; border-radius: var(--radius-sm); color: var(--color-text); cursor: pointer; display: flex; font: inherit; gap: var(--space-2); min-height: var(--size-control-sm); padding: var(--space-2) var(--space-3); text-align: left; text-decoration: none; transition: background-color var(--motion-fast), color var(--motion-fast); width: var(--size-full); }  .dropdown__item:hover { background-color: var(--color-surface-muted); }  .dropdown__item:active { background-color: var(--color-border); }  .dropdown__item:focus-visible { background-color: var(--color-surface-muted); outline: var(--focus-ring-width) solid var(--focus-ring-color); outline-offset: calc(var(--focus-ring-offset) * -1); }  .dropdown__item:disabled { cursor: not-allowed; opacity: var(--opacity-disabled); }  .dropdown__item[aria-disabled='true'] { cursor: not-allowed; opacity: var(--opacity-disabled); }  .dropdown__divider { border: none; border-top: var(--border-width-sm) solid var(--color-border); margin-block: var(--space-1); }  .dropdown__label { color: var(--color-text-muted); display: block; font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold); letter-spacing: var(--letter-spacing-wide); padding: var(--space-2) var(--space-3); text-transform: uppercase; } }