@casoon/dragonfly
Version:
Modular, lightweight CSS framework and design system for modern web projects. Optimized for Astro JS, LightningCSS and Container Queries with @layer-based architecture and comprehensive accessibility.
1 lines • 98.6 kB
CSS
@layer tokens{@property --transition-fast{inherits: true; initial-value: .15s; syntax: "<time>";}@property --transition-normal{inherits: true; initial-value: .25s; syntax: "<time>";}@property --transition-slow{inherits: true; initial-value: .4s; syntax: "<time>";}@property --transition-duration-fast{inherits: true; initial-value: .15s; syntax: "<time>";}@property --transition-duration-normal{inherits: true; initial-value: .25s; syntax: "<time>";}@property --transition-duration-slow{inherits: true; initial-value: .4s; syntax: "<time>";}@property --transition-ease-out{inherits: true; initial-value: cubic-bezier(0,0,.2,1); syntax: "<custom-ident> | ease | ease-in | ease-out | ease-in-out | linear | step-start | step-end";}@property --transition-ease-in{inherits: true; initial-value: cubic-bezier(.4,0,1,1); syntax: "<custom-ident> | ease | ease-in | ease-out | ease-in-out | linear | step-start | step-end";}@property --transition-ease-in-out{inherits: true; initial-value: cubic-bezier(.4,0,.2,1); syntax: "<custom-ident> | ease | ease-in | ease-out | ease-in-out | linear | step-start | step-end";}@property --transition-timing-ease{inherits: true; initial-value: cubic-bezier(.4,0,.2,1); syntax: "<custom-ident> | ease | ease-in | ease-out | ease-in-out | linear | step-start | step-end";}@property --transition-bg{inherits: true; initial-value: #fff; syntax: "<color>";}@property --transition-fg{inherits: true; initial-value: #1f2937; syntax: "<color>";}@property --transition-border{inherits: true; initial-value: #e5e7eb; syntax: "<color>";}@property --transition-surface{inherits: true; initial-value: #f9fafb; syntax: "<color>";}@property --transition-accent{inherits: true; initial-value: #3b82f6; syntax: "<color>";}@property --transition-shadow-opacity{inherits: true; initial-value: .1; syntax: "<number>";}@property --transition-colors{inherits: true; initial-value: background-color .25s var(--transition-ease-out),color .25s var(--transition-ease-out),border-color .25s var(--transition-ease-out); syntax: "*";}@property --transition-transform{inherits: true; initial-value: transform .2s var(--transition-ease-out); syntax: "*";}@property --transition-opacity{inherits: true; initial-value: opacity .2s var(--transition-ease-out); syntax: "*";}@property --transition-shadow{inherits: true; initial-value: box-shadow .2s var(--transition-ease-out); syntax: "*";}@property --transition-all{inherits: true; initial-value: all .25s var(--transition-ease-out); syntax: "*";}}@layer themes.aliases{:root{--btn-bg:var(--color-primary);--btn-bg-hover:var(--color-primary-600);--btn-bg-active:var(--color-primary-700);--btn-bg-disabled:var(--color-gray-300);--btn-text:var(--color-text-inverse);--btn-text-disabled:var(--color-text-muted);--btn-border:var(--color-primary);--btn-border-hover:var(--color-primary-600);--btn-radius:var(--radius-button);--btn-padding-x:var(--space-button-padding-x);--btn-padding-y:var(--space-button-padding-y);--btn-font-size:var(--font-size-base);--btn-font-weight:var(--font-weight-medium);--btn-secondary-bg:var(--color-secondary);--btn-secondary-bg-hover:var(--color-secondary-600);--btn-secondary-text:var(--color-text-inverse);--btn-secondary-border:var(--color-secondary);--btn-outline-bg:transparent;--btn-outline-bg-hover:var(--color-primary);--btn-outline-text:var(--color-primary);--btn-outline-text-hover:var(--color-text-inverse);--btn-outline-border:var(--color-primary);--card-bg:var(--color-surface-elevated);--card-bg-hover:var(--color-surface);--card-border:var(--color-border);--card-border-hover:var(--color-border-strong);--card-radius:var(--radius-card);--card-padding:var(--space-card-padding);--card-shadow:0 1px 3px 0 #000,0 1px 2px -1px #000;--card-shadow-hover:0 4px 6px -1px #000,0 2px 4px -2px #000;--form-bg:var(--color-surface-elevated);--form-border:var(--color-border);--form-border-focus:var(--color-primary);--form-border-error:var(--color-error);--form-text:var(--color-text);--form-text-placeholder:var(--color-text-muted);--form-radius:var(--radius-input);--form-padding-x:var(--space-sm);--form-padding-y:var(--space-sm);--form-gap:var(--space-form-gap);--form-font-size:var(--font-size-base);--form-error-color:var(--color-error);--form-error-bg:var(--color-error-50);--form-error-border:var(--color-error);--form-success-color:var(--color-success);--form-success-bg:var(--color-success-50);--form-success-border:var(--color-success);--nav-bg:var(--color-surface-elevated);--nav-border:var(--color-border);--nav-text:var(--color-text);--nav-text-hover:var(--color-primary);--nav-text-active:var(--color-primary);--nav-link-padding-x:var(--space-md);--nav-link-padding-y:var(--space-sm);--header-bg:var(--color-surface-elevated);--header-border:var(--color-border);--header-text:var(--color-text);--header-height:4rem;--header-padding:var(--space-md);--footer-bg:var(--color-surface);--footer-border:var(--color-border);--footer-text:var(--color-text-muted);--footer-text-hover:var(--color-text);--footer-padding:var(--space-xl);--modal-bg:var(--color-surface-elevated);--modal-overlay-bg:#000;--modal-border:var(--color-border);--modal-radius:var(--radius-modal);--modal-padding:var(--space-xl);--modal-shadow:0 20px 25px -5px #000,0 8px 10px -6px #000;--badge-bg:var(--color-gray-100);--badge-text:var(--color-gray-800);--badge-radius:var(--radius-badge);--badge-padding-x:var(--space-xs);--badge-padding-y:var(--space-0-5);--badge-font-size:var(--font-size-xs);--badge-font-weight:var(--font-weight-medium);--badge-primary-bg:var(--color-primary-100);--badge-primary-text:var(--color-primary-800);--badge-success-bg:var(--color-success-100);--badge-success-text:var(--color-success-800);--badge-warning-bg:var(--color-warning-100);--badge-warning-text:var(--color-warning-800);--badge-error-bg:var(--color-error-100);--badge-error-text:var(--color-error-800);--alert-info-bg:var(--color-primary-50);--alert-info-border:var(--color-primary-200);--alert-info-text:var(--color-primary-800);--alert-info-icon:var(--color-primary-600);--alert-success-bg:var(--color-success-50);--alert-success-border:var(--color-success-200);--alert-success-text:var(--color-success-800);--alert-success-icon:var(--color-success-600);--alert-warning-bg:var(--color-warning-50);--alert-warning-border:var(--color-warning-200);--alert-warning-text:var(--color-warning-800);--alert-warning-icon:var(--color-warning-600);--alert-error-bg:var(--color-error-50);--alert-error-border:var(--color-error-200);--alert-error-text:var(--color-error-800);--alert-error-icon:var(--color-error-600);--layout-container-max-width:120%0px;--layout-container-padding:var(--space-container-padding);--layout-section-gap:var(--space-section-gap);--layout-grid-gap:var(--space-grid-gap);--layout-flex-gap:var(--space-flex-gap);--text-heading-color:var(--color-text);--text-body-color:var(--color-text);--text-muted-color:var(--color-text-muted);--text-link-color:var(--color-primary);--text-link-hover-color:var(--color-primary-600);--focus-ring-color:var(--color-primary);--focus-ring-width:2px;--focus-ring-offset:2px;--focus-ring-style:solid;--transition-fast:.15s ease;--transition-normal:.25s ease;--transition-slow:.35s ease;--transition-colors:color .15s ease,background-color .15s ease,border-color .15s ease;--transition-transform:transform .15s ease;--transition-opacity:opacity .15s ease;--transition-shadow:box-shadow .15s ease}}@layer themes.mode{[data-theme=light]{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light;--color-background:#fff;--color-surface:#f9fafb;--color-surface-elevated:#fff;--color-text:#1f2937;--color-text-muted:#6b7280;--color-text-inverse:#fff;--color-border:#e5e7eb;--color-border-strong:#d1d5db;--color-primary:#06f;--color-primary-50:#e6f0ff;--color-primary-100:#cce0ff;--color-primary-500:#06f;--color-primary-600:#0052cc;--color-primary-900:#001433;--color-secondary:#5333ff;--color-secondary-50:#eeeaff;--color-secondary-500:#5333ff;--color-secondary-900:#110a33;--color-gray-50:#f9f9fa;--color-gray-100:#f3f3f5;--color-gray-500:#8f96a8;--color-gray-900:#1d1f24;--color-focus:#4f46e5;--color-focus-glow:#4f46e5}[data-theme=dark]{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;--color-background:#1d1f24;--color-surface:#262830;--color-surface-elevated:#30333c;--color-text:#f3f3f5;--color-text-muted:#8f96a8;--color-text-inverse:#1d1f24;--color-border:#4a4e5c;--color-border-strong:#6c7285;--color-primary:#4a90e2;--color-primary-50:#001433;--color-primary-100:#002966;--color-primary-500:#4a90e2;--color-primary-600:#66a3ff;--color-primary-900:#e6f0ff;--color-secondary:#8b7cf6;--color-secondary-50:#110a33;--color-secondary-500:#8b7cf6;--color-secondary-900:#eeeaff;--color-gray-50:#1d1f24;--color-gray-100:#262830;--color-gray-500:#8f96a8;--color-gray-900:#f9f9fa;--color-focus:#6366f1;--color-focus-glow:#6366f1}}@layer themes.transitions{@media (prefers-color-scheme:dark){[data-theme=auto]{--transition-shadow-opacity:.3}}@keyframes theme-switch{}@media (prefers-reduced-motion:reduce){.theme-transition,.theme-transition-fast,.theme-transition-slow,.card-transition,.button-transition,.input-transition{transition:none}.theme-switching{animation:none}}:root{--transition-bg:var(--color-background);--transition-fg:var(--color-text);--transition-border:var(--color-border);--transition-surface:var(--color-surface);--transition-accent:var(--color-primary);--transition-shadow-opacity:.1}[data-theme=dark]{--transition-bg:var(--color-background);--transition-fg:var(--color-text);--transition-border:var(--color-border);--transition-surface:var(--color-surface);--transition-accent:var(--color-primary);--transition-shadow-opacity:.3}@media (prefers-color-scheme:dark){[data-theme=auto]{--transition-shadow-opacity:.3}}.theme-transition{background-color:var(--transition-bg);border-color:var(--transition-border);color:var(--transition-fg);transition:var(--transition-colors)}.theme-transition-fast{background-color:var(--transition-bg);border-color:var(--transition-border);color:var(--transition-fg);transition:background-color var(--transition-fast)var(--transition-ease-out),color var(--transition-fast)var(--transition-ease-out),border-color var(--transition-fast)var(--transition-ease-out)}.theme-transition-slow{background-color:var(--transition-bg);border-color:var(--transition-border);color:var(--transition-fg);transition:background-color var(--transition-slow)var(--transition-ease-in-out),color var(--transition-slow)var(--transition-ease-in-out),border-color var(--transition-slow)var(--transition-ease-in-out)}.card-transition{background-color:var(--transition-surface);border-color:var(--transition-border);box-shadow:0 1px 3px 0 rgba(0,0,0,var(--transition-shadow-opacity)),0 1px 2px -1px rgba(0,0,0,var(--transition-shadow-opacity));transition:var(--transition-colors),var(--transition-shadow)}.button-transition{background-color:var(--transition-accent);border-color:var(--transition-accent);color:var(--transition-fg);transition:var(--transition-colors),var(--transition-transform)}.input-transition{background-color:var(--transition-surface);border-color:var(--transition-border);transition:var(--transition-colors),var(--transition-shadow)}.input-transition:focus{border-color:var(--transition-accent);box-shadow:0 0 0 2px rgb(from var(--transition-accent)r g b/2000%)}.theme-switching{animation:theme-switch var(--transition-normal)var(--transition-ease-out)}@media (prefers-reduced-motion:reduce){.theme-transition,.theme-transition-fast,.theme-transition-slow,.card-transition,.button-transition,.input-transition{transition:none}.theme-switching{animation:none}}}@layer tokens.properties{@property --color-white{inherits: true; initial-value: #fff; syntax: "<color>";}@property --color-black{inherits: true; initial-value: #000; syntax: "<color>";}@property --color-gray-very-dark{inherits: true; initial-value: #1a1a1a; syntax: "<color>";}@property --color-gray-medium{inherits: true; initial-value: #6b6b6b; syntax: "<color>";}@property --color-gray-very-light{inherits: true; initial-value: #f2f2f2; syntax: "<color>";}@property --color-overlay-dark{inherits: true; initial-value: rgba(0,0,0,.8); syntax: "<color>";}@property --color-overlay-medium{inherits: true; initial-value: rgba(0,0,0,.6); syntax: "<color>";}@property --color-primary{inherits: true; initial-value: #06f; syntax: "<color>";}@property --color-secondary{inherits: true; initial-value: #5333ff; syntax: "<color>";}@property --color-success{inherits: true; initial-value: #10b981; syntax: "<color>";}@property --color-warning{inherits: true; initial-value: #f59e0b; syntax: "<color>";}@property --color-error{inherits: true; initial-value: #ef4444; syntax: "<color>";}@property --color-info{inherits: true; initial-value: #06f; syntax: "<color>";}@property --color-neutral{inherits: true; initial-value: #6b7280; syntax: "<color>";}@property --color-text{inherits: true; initial-value: #1f2937; syntax: "<color>";}@property --color-text-muted{inherits: true; initial-value: #6b7280; syntax: "<color>";}@property --color-text-inverse{inherits: true; initial-value: #fff; syntax: "<color>";}@property --color-background{inherits: true; initial-value: #fff; syntax: "<color>";}@property --color-surface{inherits: true; initial-value: #f9fafb; syntax: "<color>";}@property --color-surface-elevated{inherits: true; initial-value: #fff; syntax: "<color>";}@property --color-border{inherits: true; initial-value: #e5e7eb; syntax: "<color>";}@property --color-border-strong{inherits: true; initial-value: #d1d5db; syntax: "<color>";}@property --color-transition-primary{inherits: true; initial-value: #06f; syntax: "<color>";}@property --color-transition-surface{inherits: true; initial-value: #fff; syntax: "<color>";}@property --color-transition-text{inherits: true; initial-value: #1f2937; syntax: "<color>";}@property --color-primary-50{inherits: true; initial-value: #eff6ff; syntax: "<color>";}@property --color-primary-100{inherits: true; initial-value: #dbeafe; syntax: "<color>";}@property --color-primary-200{inherits: true; initial-value: #bfdbfe; syntax: "<color>";}@property --color-primary-300{inherits: true; initial-value: #93c5fd; syntax: "<color>";}@property --color-primary-400{inherits: true; initial-value: #60a5fa; syntax: "<color>";}@property --color-primary-500{inherits: true; initial-value: #3b82f6; syntax: "<color>";}@property --color-primary-600{inherits: true; initial-value: #2563eb; syntax: "<color>";}@property --color-primary-700{inherits: true; initial-value: #1d4ed8; syntax: "<color>";}@property --color-primary-800{inherits: true; initial-value: #1e40af; syntax: "<color>";}@property --color-primary-900{inherits: true; initial-value: #1e3a8a; syntax: "<color>";}@property --color-secondary-50{inherits: true; initial-value: #f8fafc; syntax: "<color>";}@property --color-secondary-100{inherits: true; initial-value: #f1f5f9; syntax: "<color>";}@property --color-secondary-200{inherits: true; initial-value: #e2e8f0; syntax: "<color>";}@property --color-secondary-300{inherits: true; initial-value: #cbd5e1; syntax: "<color>";}@property --color-secondary-400{inherits: true; initial-value: #94a3b8; syntax: "<color>";}@property --color-secondary-500{inherits: true; initial-value: #64748b; syntax: "<color>";}@property --color-secondary-600{inherits: true; initial-value: #475569; syntax: "<color>";}@property --color-secondary-700{inherits: true; initial-value: #334155; syntax: "<color>";}@property --color-secondary-800{inherits: true; initial-value: #1e293b; syntax: "<color>";}@property --color-secondary-900{inherits: true; initial-value: #0f172a; syntax: "<color>";}@property --color-success-50{inherits: true; initial-value: #ecfdf5; syntax: "<color>";}@property --color-success-100{inherits: true; initial-value: #d1fae5; syntax: "<color>";}@property --color-success-200{inherits: true; initial-value: #a7f3d0; syntax: "<color>";}@property --color-success-300{inherits: true; initial-value: #6ee7b7; syntax: "<color>";}@property --color-success-400{inherits: true; initial-value: #34d399; syntax: "<color>";}@property --color-success-500{inherits: true; initial-value: #10b981; syntax: "<color>";}@property --color-success-600{inherits: true; initial-value: #059669; syntax: "<color>";}@property --color-success-700{inherits: true; initial-value: #047857; syntax: "<color>";}@property --color-success-800{inherits: true; initial-value: #065f46; syntax: "<color>";}@property --color-success-900{inherits: true; initial-value: #064e3b; syntax: "<color>";}@property --color-warning-50{inherits: true; initial-value: #fffbeb; syntax: "<color>";}@property --color-warning-100{inherits: true; initial-value: #fef3c7; syntax: "<color>";}@property --color-warning-200{inherits: true; initial-value: #fde68a; syntax: "<color>";}@property --color-warning-300{inherits: true; initial-value: #fcd34d; syntax: "<color>";}@property --color-warning-400{inherits: true; initial-value: #fbbf24; syntax: "<color>";}@property --color-warning-500{inherits: true; initial-value: #f59e0b; syntax: "<color>";}@property --color-warning-600{inherits: true; initial-value: #d97706; syntax: "<color>";}@property --color-warning-700{inherits: true; initial-value: #b45309; syntax: "<color>";}@property --color-warning-800{inherits: true; initial-value: #92400e; syntax: "<color>";}@property --color-warning-900{inherits: true; initial-value: #78350f; syntax: "<color>";}@property --color-error-50{inherits: true; initial-value: #fef2f2; syntax: "<color>";}@property --color-error-100{inherits: true; initial-value: #fee2e2; syntax: "<color>";}@property --color-error-200{inherits: true; initial-value: #fecaca; syntax: "<color>";}@property --color-error-300{inherits: true; initial-value: #fca5a5; syntax: "<color>";}@property --color-error-400{inherits: true; initial-value: #f87171; syntax: "<color>";}@property --color-error-500{inherits: true; initial-value: #ef4444; syntax: "<color>";}@property --color-error-600{inherits: true; initial-value: #dc2626; syntax: "<color>";}@property --color-error-700{inherits: true; initial-value: #b91c1c; syntax: "<color>";}@property --color-error-800{inherits: true; initial-value: #991b1b; syntax: "<color>";}@property --color-error-900{inherits: true; initial-value: #7f1d1d; syntax: "<color>";}@property --color-info-50{inherits: true; initial-value: #f0f9ff; syntax: "<color>";}@property --color-info-100{inherits: true; initial-value: #e0f2fe; syntax: "<color>";}@property --color-info-200{inherits: true; initial-value: #bae6fd; syntax: "<color>";}@property --color-info-300{inherits: true; initial-value: #7dd3fc; syntax: "<color>";}@property --color-info-400{inherits: true; initial-value: #38bdf8; syntax: "<color>";}@property --color-info-500{inherits: true; initial-value: #0ea5e9; syntax: "<color>";}@property --color-info-600{inherits: true; initial-value: #0284c7; syntax: "<color>";}@property --color-info-700{inherits: true; initial-value: #0369a1; syntax: "<color>";}@property --color-info-800{inherits: true; initial-value: #075985; syntax: "<color>";}@property --color-info-900{inherits: true; initial-value: #0c4a6e; syntax: "<color>";}@property --color-neutral-50{inherits: true; initial-value: #f9fafb; syntax: "<color>";}@property --color-neutral-100{inherits: true; initial-value: #f3f4f6; syntax: "<color>";}@property --color-neutral-200{inherits: true; initial-value: #e5e7eb; syntax: "<color>";}@property --color-neutral-300{inherits: true; initial-value: #d1d5db; syntax: "<color>";}@property --color-neutral-400{inherits: true; initial-value: #9ca3af; syntax: "<color>";}@property --color-neutral-500{inherits: true; initial-value: #6b7280; syntax: "<color>";}@property --color-neutral-600{inherits: true; initial-value: #4b5563; syntax: "<color>";}@property --color-neutral-700{inherits: true; initial-value: #374151; syntax: "<color>";}@property --color-neutral-800{inherits: true; initial-value: #1f2937; syntax: "<color>";}@property --color-neutral-900{inherits: true; initial-value: #111827; syntax: "<color>";}@property --color-gray-50{inherits: true; initial-value: #f9fafb; syntax: "<color>";}@property --color-gray-100{inherits: true; initial-value: #f3f4f6; syntax: "<color>";}@property --color-gray-200{inherits: true; initial-value: #e5e7eb; syntax: "<color>";}@property --color-gray-300{inherits: true; initial-value: #d1d5db; syntax: "<color>";}@property --color-gray-400{inherits: true; initial-value: #9ca3af; syntax: "<color>";}@property --color-gray-500{inherits: true; initial-value: #6b7280; syntax: "<color>";}@property --color-gray-600{inherits: true; initial-value: #4b5563; syntax: "<color>";}@property --color-gray-700{inherits: true; initial-value: #374151; syntax: "<color>";}@property --color-gray-800{inherits: true; initial-value: #1f2937; syntax: "<color>";}@property --color-gray-900{inherits: true; initial-value: #111827; syntax: "<color>";}@property --color-text-50{inherits: true; initial-value: #f9fafb; syntax: "<color>";}@property --color-text-100{inherits: true; initial-value: #f3f4f6; syntax: "<color>";}@property --color-text-200{inherits: true; initial-value: #e5e7eb; syntax: "<color>";}@property --color-text-300{inherits: true; initial-value: #d1d5db; syntax: "<color>";}@property --color-text-400{inherits: true; initial-value: #9ca3af; syntax: "<color>";}@property --color-text-500{inherits: true; initial-value: #6b7280; syntax: "<color>";}@property --color-text-600{inherits: true; initial-value: #4b5563; syntax: "<color>";}@property --color-text-700{inherits: true; initial-value: #374151; syntax: "<color>";}@property --color-text-800{inherits: true; initial-value: #1f2937; syntax: "<color>";}@property --color-text-900{inherits: true; initial-value: #111827; syntax: "<color>";}@property --color-surface-50{inherits: true; initial-value: #fafafa; syntax: "<color>";}@property --color-surface-100{inherits: true; initial-value: #f5f5f5; syntax: "<color>";}@property --color-surface-200{inherits: true; initial-value: #eee; syntax: "<color>";}@property --color-surface-300{inherits: true; initial-value: #e0e0e0; syntax: "<color>";}@property --color-border-50{inherits: true; initial-value: #fafafa; syntax: "<color>";}@property --color-border-100{inherits: true; initial-value: #f4f4f5; syntax: "<color>";}@property --color-border-200{inherits: true; initial-value: #e4e4e7; syntax: "<color>";}@property --color-border-300{inherits: true; initial-value: #d4d4d8; syntax: "<color>";}@property --space-0{inherits: true; initial-value: 0; syntax: "<length>";}@property --space-px{inherits: true; initial-value: 1px; syntax: "<length>";}@property --space-1{inherits: true; initial-value: .25rem; syntax: "<length>";}@property --space-2{inherits: true; initial-value: .5rem; syntax: "<length>";}@property --space-3{inherits: true; initial-value: .75rem; syntax: "<length>";}@property --space-4{inherits: true; initial-value: 1rem; syntax: "<length>";}@property --space-5{inherits: true; initial-value: 1.25rem; syntax: "<length>";}@property --space-6{inherits: true; initial-value: 1.5rem; syntax: "<length>";}@property --space-7{inherits: true; initial-value: 1.75rem; syntax: "<length>";}@property --space-8{inherits: true; initial-value: 2rem; syntax: "<length>";}@property --space-9{inherits: true; initial-value: 2.25rem; syntax: "<length>";}@property --space-10{inherits: true; initial-value: 2.5rem; syntax: "<length>";}@property --space-11{inherits: true; initial-value: 2.75rem; syntax: "<length>";}@property --space-12{inherits: true; initial-value: 3rem; syntax: "<length>";}@property --space-14{inherits: true; initial-value: 3.5rem; syntax: "<length>";}@property --space-16{inherits: true; initial-value: 4rem; syntax: "<length>";}@property --space-20{inherits: true; initial-value: 5rem; syntax: "<length>";}@property --space-24{inherits: true; initial-value: 6rem; syntax: "<length>";}@property --space-28{inherits: true; initial-value: 7rem; syntax: "<length>";}@property --space-32{inherits: true; initial-value: 8rem; syntax: "<length>";}@property --space-36{inherits: true; initial-value: 9rem; syntax: "<length>";}@property --space-40{inherits: true; initial-value: 10rem; syntax: "<length>";}@property --space-44{inherits: true; initial-value: 11rem; syntax: "<length>";}@property --space-48{inherits: true; initial-value: 12rem; syntax: "<length>";}@property --space-52{inherits: true; initial-value: 13rem; syntax: "<length>";}@property --space-56{inherits: true; initial-value: 14rem; syntax: "<length>";}@property --space-60{inherits: true; initial-value: 15rem; syntax: "<length>";}@property --space-64{inherits: true; initial-value: 16rem; syntax: "<length>";}@property --space-72{inherits: true; initial-value: 18rem; syntax: "<length>";}@property --space-80{inherits: true; initial-value: 20rem; syntax: "<length>";}@property --space-96{inherits: true; initial-value: 24rem; syntax: "<length>";}@property --space-large-200{inherits: true; initial-value: 200px; syntax: "<length>";}@property --space-large-30rem{inherits: true; initial-value: 30rem; syntax: "<length>";}@property --space-small-10px{inherits: true; initial-value: 10px; syntax: "<length>";}@property --space-xs{inherits: true; initial-value: .25rem; syntax: "<length>";}@property --space-sm{inherits: true; initial-value: .5rem; syntax: "<length>";}@property --space-md{inherits: true; initial-value: 1rem; syntax: "<length>";}@property --space-lg{inherits: true; initial-value: 1.5rem; syntax: "<length>";}@property --space-xl{inherits: true; initial-value: 2rem; syntax: "<length>";}@property --space-2xl{inherits: true; initial-value: 3rem; syntax: "<length>";}@property --space-3xl{inherits: true; initial-value: 4rem; syntax: "<length>";}@property --space-button-padding-x{inherits: true; initial-value: 1rem; syntax: "<length>";}@property --space-button-padding-y{inherits: true; initial-value: .5rem; syntax: "<length>";}@property --space-card-padding{inherits: true; initial-value: 1.5rem; syntax: "<length>";}@property --space-form-gap{inherits: true; initial-value: 1rem; syntax: "<length>";}@property --space-section-gap{inherits: true; initial-value: 3rem; syntax: "<length>";}@property --space-input-padding{inherits: true; initial-value: .75rem; syntax: "<length>";}@property --space-modal-padding{inherits: true; initial-value: 1.5rem; syntax: "<length>";}@property --space-gap-xs{inherits: true; initial-value: .25rem; syntax: "<length>";}@property --space-gap-sm{inherits: true; initial-value: .5rem; syntax: "<length>";}@property --space-gap-md{inherits: true; initial-value: 1rem; syntax: "<length>";}@property --space-gap-lg{inherits: true; initial-value: 1.5rem; syntax: "<length>";}@property --space-gap-xl{inherits: true; initial-value: 2rem; syntax: "<length>";}@property --space-container-padding{inherits: true; initial-value: 1rem; syntax: "<length>";}@property --space-grid-gap{inherits: true; initial-value: 1rem; syntax: "<length>";}@property --space-flex-gap{inherits: true; initial-value: 1rem; syntax: "<length>";}@property --space-transition-padding{inherits: true; initial-value: 1rem; syntax: "<length>";}@property --space-transition-margin{inherits: true; initial-value: 1rem; syntax: "<length>";}@property --space-transition-gap{inherits: true; initial-value: 1rem; syntax: "<length>";}:root{--space-0:0;--space-px:1px;--space-1:.25rem;--space-2:.5rem;--space-3:.75rem;--space-4:1rem;--space-5:1.25rem;--space-6:1.5rem;--space-7:1.75rem;--space-8:2rem;--space-9:2.25rem;--space-10:2.5rem;--space-11:2.75rem;--space-12:3rem;--space-14:3.5rem;--space-16:4rem;--space-20:5rem;--space-24:6rem;--space-28:7rem;--space-32:8rem;--space-36:9rem;--space-40:10rem;--space-44:11rem;--space-48:12rem;--space-52:13rem;--space-56:14rem;--space-60:15rem;--space-64:16rem;--space-72:18rem;--space-80:20rem;--space-96:24rem;--space-button-padding-x:var(--space-md);--space-button-padding-y:var(--space-sm);--space-card-padding:var(--space-lg);--space-form-gap:var(--space-md);--space-section-gap:var(--space-3xl);--space-container-padding:var(--space-md);--space-grid-gap:var(--space-md);--space-flex-gap:var(--space-md);--space-transition-padding:var(--space-md);--space-transition-margin:var(--space-md);--space-transition-gap:var(--space-md)}@property --font-size-xs{inherits: true; initial-value: .75rem; syntax: "<length>";}@property --font-size-sm{inherits: true; initial-value: .875rem; syntax: "<length>";}@property --font-size-base{inherits: true; initial-value: 1rem; syntax: "<length>";}@property --font-size-lg{inherits: true; initial-value: 1.125rem; syntax: "<length>";}@property --font-size-xl{inherits: true; initial-value: 1.25rem; syntax: "<length>";}@property --font-size-2xl{inherits: true; initial-value: 1.5rem; syntax: "<length>";}@property --font-size-3xl{inherits: true; initial-value: 1.875rem; syntax: "<length>";}@property --font-size-4xl{inherits: true; initial-value: 2.25rem; syntax: "<length>";}@property --font-size-5xl{inherits: true; initial-value: 3rem; syntax: "<length>";}@property --font-size-6xl{inherits: true; initial-value: 4rem; syntax: "<length>";}@property --text-xs{inherits: true; initial-value: .75rem; syntax: "<length>";}@property --text-sm{inherits: true; initial-value: .875rem; syntax: "<length>";}@property --text-base{inherits: true; initial-value: 1rem; syntax: "<length>";}@property --text-lg{inherits: true; initial-value: 1.125rem; syntax: "<length>";}@property --text-xl{inherits: true; initial-value: 1.25rem; syntax: "<length>";}@property --text-2xl{inherits: true; initial-value: 1.5rem; syntax: "<length>";}@property --line-height-tight{inherits: true; initial-value: 1.25; syntax: "<number>";}@property --line-height-snug{inherits: true; initial-value: 1.375; syntax: "<number>";}@property --line-height-normal{inherits: true; initial-value: 1.5; syntax: "<number>";}@property --line-height-relaxed{inherits: true; initial-value: 1.625; syntax: "<number>";}@property --line-height-loose{inherits: true; initial-value: 2; syntax: "<number>";}@property --font-weight-thin{inherits: true; initial-value: 100; syntax: "<number>";}@property --font-weight-extralight{inherits: true; initial-value: 200; syntax: "<number>";}@property --font-weight-light{inherits: true; initial-value: 300; syntax: "<number>";}@property --font-weight-normal{inherits: true; initial-value: 400; syntax: "<number>";}@property --font-weight-medium{inherits: true; initial-value: 500; syntax: "<number>";}@property --font-weight-semibold{inherits: true; initial-value: 600; syntax: "<number>";}@property --font-weight-bold{inherits: true; initial-value: 700; syntax: "<number>";}@property --font-weight-extrabold{inherits: true; initial-value: 800; syntax: "<number>";}@property --font-weight-black{inherits: true; initial-value: 900; syntax: "<number>";}@property --font-light{inherits: true; initial-value: 300; syntax: "<number>";}@property --font-normal{inherits: true; initial-value: 400; syntax: "<number>";}@property --font-medium{inherits: true; initial-value: 500; syntax: "<number>";}@property --font-semibold{inherits: true; initial-value: 600; syntax: "<number>";}@property --font-bold{inherits: true; initial-value: 700; syntax: "<number>";}@property --letter-spacing-tighter{inherits: true; initial-value: -.05em; syntax: "<length>";}@property --letter-spacing-tight{inherits: true; initial-value: -.025em; syntax: "<length>";}@property --letter-spacing-normal{inherits: true; initial-value: 0; syntax: "<length>";}@property --letter-spacing-wide{inherits: true; initial-value: .025em; syntax: "<length>";}@property --letter-spacing-wider{inherits: true; initial-value: .05em; syntax: "<length>";}@property --letter-spacing-widest{inherits: true; initial-value: .1em; syntax: "<length>";}@property --font-size-transition{inherits: true; initial-value: 1rem; syntax: "<length>";}@property --line-height-transition{inherits: true; initial-value: 1.5; syntax: "<number>";}@property --letter-spacing-transition{inherits: true; initial-value: 0; syntax: "<length>";}@property --radius-none{inherits: true; initial-value: 0; syntax: "<length>";}@property --radius-xs{inherits: true; initial-value: .125rem; syntax: "<length>";}@property --radius-sm{inherits: true; initial-value: .25rem; syntax: "<length>";}@property --radius-md{inherits: true; initial-value: .375rem; syntax: "<length>";}@property --radius-lg{inherits: true; initial-value: .5rem; syntax: "<length>";}@property --radius-xl{inherits: true; initial-value: .75rem; syntax: "<length>";}@property --radius-2xl{inherits: true; initial-value: 1rem; syntax: "<length>";}@property --radius-3xl{inherits: true; initial-value: 1.5rem; syntax: "<length>";}@property --radius-full{inherits: true; initial-value: 9999px; syntax: "<length-percentage>";}@property --radius-button{inherits: true; initial-value: .375rem; syntax: "<length>";}@property --radius-card{inherits: true; initial-value: .5rem; syntax: "<length>";}@property --radius-input{inherits: true; initial-value: .375rem; syntax: "<length>";}@property --radius-modal{inherits: true; initial-value: .75rem; syntax: "<length>";}@property --radius-badge{inherits: true; initial-value: .25rem; syntax: "<length>";}@property --radius-avatar{inherits: true; initial-value: 50; syntax: "<length-percentage>";}@property --radius-hover{inherits: true; initial-value: .5rem; syntax: "<length>";}@property --radius-focus{inherits: true; initial-value: .375rem; syntax: "<length>";}@property --radius-transition{inherits: true; initial-value: .375rem; syntax: "<length>";}@property --radius-transition-hover{inherits: true; initial-value: .5rem; syntax: "<length>";}:root{--radius-none:0;--radius-xs:.125rem;--radius-sm:.25rem;--radius-md:.375rem;--radius-lg:.5rem;--radius-xl:.75rem;--radius-2xl:1rem;--radius-3xl:1.5rem;--radius-full:9999px;--radius-button:var(--radius-md);--radius-card:var(--radius-lg);--radius-input:var(--radius-md);--radius-modal:var(--radius-xl);--radius-badge:var(--radius-sm);--radius-avatar:50;--radius-hover:var(--radius-lg);--radius-focus:var(--radius-md);--radius-transition:var(--radius-md);--radius-transition-hover:var(--radius-lg);--border-radius-none:var(--radius-none);--border-radius-sm:var(--radius-sm);--border-radius-md:var(--radius-md);--border-radius-lg:var(--radius-lg);--border-radius-xl:var(--radius-xl);--border-radius-full:var(--radius-full)}@property --shadow-none{inherits: false; initial-value: none;}@property --shadow-xs{inherits: false; initial-value: 0 1px 2px 0 rgba(0,0,0,.05);}@property --shadow-sm{inherits: false; initial-value: 0 1px 2px 0 rgba(0,0,0,.05);}@property --shadow-md{inherits: false; initial-value: 0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -2px rgba(0,0,0,.1);}@property --shadow-lg{inherits: false; initial-value: 0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -4px rgba(0,0,0,.1);}@property --shadow-xl{inherits: false; initial-value: 0 20px 25px -5px rgba(0,0,0,.1),0 8px 10px -6px rgba(0,0,0,.1);}@property --shadow-2xl{inherits: false; initial-value: 0 25px 50px -12px rgba(0,0,0,.25);}@property --shadow-inner{inherits: false; initial-value: inset 0 2px 4px 0 rgba(0,0,0,.05);}@property --shadow-card{inherits: false; initial-value: 0 1px 3px 0 rgba(0,0,0,.1),0 1px 2px -1px rgba(0,0,0,.1);}@property --shadow-modal{inherits: false; initial-value: 0 20px 25px -5px rgba(0,0,0,.1),0 8px 10px -6px rgba(0,0,0,.1);}@property --shadow-dropdown{inherits: false; initial-value: 0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -4px rgba(0,0,0,.1);}@property --shadow-tooltip{inherits: false; initial-value: 0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -2px rgba(0,0,0,.1);}@property --shadow-button{inherits: false; initial-value: 0 1px 2px 0 rgba(0,0,0,.05);}@property --shadow-button-hover{inherits: false; initial-value: 0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -2px rgba(0,0,0,.1);}:root{--container-sm:640px;--container-md:768px}@property --shadow-color{inherits: true; initial-value: #000; syntax: "<color>";}@property --shadow-opacity-sm{inherits: true; initial-value: .05; syntax: "<number>";}@property --shadow-opacity-md{inherits: true; initial-value: .1; syntax: "<number>";}@property --shadow-opacity-lg{inherits: true; initial-value: .15; syntax: "<number>";}@property --shadow-opacity-xl{inherits: true; initial-value: .25; syntax: "<number>";}@property --transition-duration-fast{inherits: true; initial-value: .15s; syntax: "<time>";}@property --transition-duration-normal{inherits: true; initial-value: .3s; syntax: "<time>";}@property --transition-duration-slow{inherits: true; initial-value: .5s; syntax: "<time>";}@property --opacity-disabled{inherits: true; initial-value: .5; syntax: "<number>";}@property --opacity-hover{inherits: true; initial-value: .8; syntax: "<number>";}@property --opacity-overlay{inherits: true; initial-value: .5; syntax: "<number>";}@property --color-backdrop{inherits: true; initial-value: #000; syntax: "<color>";}@property --color-tooltip-background{inherits: true; initial-value: #000; syntax: "<color>";}@property --color-tooltip-text{inherits: true; initial-value: #fff; syntax: "<color>";}@property --color-focus{inherits: true; initial-value: #4f46e5; syntax: "<color>";}@property --color-focus-glow{inherits: true; initial-value: #4f46e5; syntax: "<color>";}@property --color-gradient-start{inherits: true; initial-value: #4f46e5; syntax: "<color>";}@property --color-gradient-end{inherits: true; initial-value: #3b82f6; syntax: "<color>";}@property --color-background-subtle{inherits: true; initial-value: rgba(84,53,53,.02); syntax: "<color>";}@property --color-background-muted{inherits: true; initial-value: rgba(0,0,0,.05); syntax: "<color>";}@property --color-status{inherits: true; initial-value: #4f46e5; syntax: "<color>";}@property --alert-padding{inherits: true; initial-value: 1rem; syntax: "<length>";}@property --alert-padding-sm{inherits: true; initial-value: .5rem; syntax: "<length>";}@property --alert-padding-lg{inherits: true; initial-value: 1.25rem; syntax: "<length>";}@property --alert-gap{inherits: true; initial-value: .75rem; syntax: "<length>";}@property --alert-border-radius{inherits: true; initial-value: .5rem; syntax: "<length>";}@property --badge-padding-xs{inherits: true; initial-value: .15rem .35rem; syntax: "*";}@property --badge-padding-sm{inherits: true; initial-value: .2rem .4rem; syntax: "*";}@property --badge-padding-md{inherits: true; initial-value: .25rem .5rem; syntax: "*";}@property --badge-padding-lg{inherits: true; initial-value: .3rem .6rem; syntax: "*";}@property --badge-min-width-xs{inherits: true; initial-value: 1.2rem; syntax: "<length>";}@property --badge-min-width-sm{inherits: true; initial-value: 1.5rem; syntax: "<length>";}@property --badge-min-width-md{inherits: true; initial-value: 1.75rem; syntax: "<length>";}@property --badge-min-width-lg{inherits: true; initial-value: 2rem; syntax: "<length>";}@property --card-padding{inherits: true; initial-value: 1rem; syntax: "<length>";}@property --card-padding-fluid{inherits: true; initial-value: 1.25rem; syntax: "<length>";}@property --card-gap{inherits: true; initial-value: .75rem; syntax: "<length>";}@property --card-grid-gap{inherits: true; initial-value: 1rem; syntax: "<length>";}@property --card-grid-min-width{inherits: true; initial-value: 250px; syntax: "<length>";}@property --button-padding-sm{inherits: true; initial-value: .5rem .75rem; syntax: "*";}@property --button-padding-md{inherits: true; initial-value: .75rem 1rem; syntax: "*";}@property --button-padding-lg{inherits: true; initial-value: 1rem 1.5rem; syntax: "*";}@property --button-height-sm{inherits: true; initial-value: 2rem; syntax: "<length>";}@property --button-height-md{inherits: true; initial-value: 2.5rem; syntax: "<length>";}@property --button-height-lg{inherits: true; initial-value: 3rem; syntax: "<length>";}@property --input-padding{inherits: true; initial-value: .75rem; syntax: "<length>";}@property --input-height{inherits: true; initial-value: 2.5rem; syntax: "<length>";}@property --input-border-width{inherits: true; initial-value: 1px; syntax: "<length>";}@property --modal-padding{inherits: true; initial-value: 1.5rem; syntax: "<length>";}@property --modal-header-padding{inherits: true; initial-value: 1.5rem 1.5rem 1rem; syntax: "*";}@property --modal-footer-padding{inherits: true; initial-value: 1rem 1.5rem 1.5rem; syntax: "*";}@property --modal-max-width{inherits: true; initial-value: 32rem; syntax: "<length>";}@property --table-cell-padding{inherits: true; initial-value: .75rem; syntax: "<length>";}@property --table-header-padding{inherits: true; initial-value: 1rem .75rem; syntax: "*";}@property --avatar-size-xs{inherits: true; initial-value: 1.5rem; syntax: "<length>";}@property --avatar-size-sm{inherits: true; initial-value: 2rem; syntax: "<length>";}@property --avatar-size-md{inherits: true; initial-value: 2.5rem; syntax: "<length>";}@property --avatar-size-lg{inherits: true; initial-value: 3rem; syntax: "<length>";}@property --avatar-size-xl{inherits: true; initial-value: 4rem; syntax: "<length>";}@property --tooltip-padding{inherits: true; initial-value: .5rem .75rem; syntax: "*";}@property --tooltip-max-width{inherits: true; initial-value: 200px; syntax: "<length>";}@property --tooltip-arrow-size{inherits: true; initial-value: 4px; syntax: "<length>";}@property --progress-height{inherits: true; initial-value: .5rem; syntax: "<length>";}@property --progress-height-sm{inherits: true; initial-value: .25rem; syntax: "<length>";}@property --progress-height-lg{inherits: true; initial-value: .75rem; syntax: "<length>";}@property --spinner-size-sm{inherits: true; initial-value: 1rem; syntax: "<length>";}@property --spinner-size-md{inherits: true; initial-value: 1.5rem; syntax: "<length>";}@property --spinner-size-lg{inherits: true; initial-value: 2rem; syntax: "<length>";}@property --spinner-border-width{inherits: true; initial-value: 2px; syntax: "<length>";}@property --breadcrumb-separator-spacing{inherits: true; initial-value: .5rem; syntax: "<length>";}@property --breadcrumb-item-padding{inherits: true; initial-value: .25rem .5rem; syntax: "*";}@property --tab-padding{inherits: true; initial-value: .75rem 1rem; syntax: "*";}@property --tab-border-width{inherits: true; initial-value: 2px; syntax: "<length>";}@property --drawer-width{inherits: true; initial-value: 20rem; syntax: "<length>";}@property --drawer-padding{inherits: true; initial-value: 1.5rem; syntax: "<length>";}@property --pagination-item-size{inherits: true; initial-value: 2.5rem; syntax: "<length>";}@property --pagination-gap{inherits: true; initial-value: .25rem; syntax: "<length>";}@property --nav-padding{inherits: true; initial-value: 1rem; syntax: "<length>";}@property --nav-padding-compact{inherits: true; initial-value: .75rem; syntax: "<length>";}@property --nav-gap{inherits: true; initial-value: 1rem; syntax: "<length>";}@property --nav-gap-compact{inherits: true; initial-value: .5rem; syntax: "<length>";}@property --nav-item-padding{inherits: true; initial-value: .5rem .75rem; syntax: "*";}@property --nav-section-gap{inherits: true; initial-value: 1.5rem; syntax: "<length>";}@property --topbar-min-height{inherits: true; initial-value: 3.5rem; syntax: "<length>";}@property --topbar-z-index{inherits: true; initial-value: 100; syntax: "<integer>";}@property --topbar-line-height{inherits: true; initial-value: 1.5; syntax: "<number>";}@property --topbar-transition{inherits: true; initial-value: all .2s ease; syntax: "*";}@property --sidebar-width{inherits: true; initial-value: 16rem; syntax: "<length>";}@property --sidebar-width-narrow{inherits: true; initial-value: 12rem; syntax: "<length>";}@property --sidebar-width-wide{inherits: true; initial-value: 20rem; syntax: "<length>";}@property --sidebar-width-collapsed{inherits: true; initial-value: 4rem; syntax: "<length>";}@property --sidebar-z-index{inherits: true; initial-value: 200; syntax: "<integer>";}@property --sidebar-line-height{inherits: true; initial-value: 1.5; syntax: "<number>";}@property --sidebar-shadow{inherits: true; initial-value: 0 1px 3px 0 #000; syntax: "*";}@property --sidebar-transition{inherits: true; initial-value: width .3s ease; syntax: "*";}@property --mobile-nav-width{inherits: true; initial-value: 20rem; syntax: "<length>";}@property --mobile-nav-width-narrow{inherits: true; initial-value: 16rem; syntax: "<length>";}@property --mobile-nav-width-wide{inherits: true; initial-value: 24rem; syntax: "<length>";}@property --mobile-nav-height{inherits: true; initial-value: 100; syntax: "<length>";}@property --mobile-nav-max-height{inherits: true; initial-value: 100; syntax: "<length>";}@property --mobile-nav-z-index{inherits: true; initial-value: 1000; syntax: "<integer>";}@property --mobile-nav-line-height{inherits: true; initial-value: 1.5; syntax: "<number>";}@property --mobile-nav-transition{inherits: true; initial-value: transform .3s ease; syntax: "*";}@property --off-canvas-width{inherits: true; initial-value: 20rem; syntax: "<length>";}@property --off-canvas-width-narrow{inherits: true; initial-value: 16rem; syntax: "<length>";}@property --off-canvas-width-wide{inherits: true; initial-value: 24rem; syntax: "<length>";}@property --off-canvas-height{inherits: true; initial-value: 100; syntax: "<length>";}@property --off-canvas-max-height{inherits: true; initial-value: 100; syntax: "<length>";}@property --off-canvas-z-index{inherits: true; initial-value: 1000; syntax: "<integer>";}@property --off-canvas-line-height{inherits: true; initial-value: 1.5; syntax: "<number>";}@property --off-canvas-transition{inherits: true; initial-value: transform .3s ease; syntax: "*";}@property --off-canvas-backdrop{inherits: true; initial-value: #000; syntax: "<color>";}@property --breadcrumb-line-height{inherits: true; initial-value: 1.5; syntax: "<number>";}@property --container-7xl{inherits: true; initial-value: 80rem; syntax: "<length>";}@property --header-max-width{inherits: true; initial-value: 80rem; syntax: "<length>";}@property --header-transition{inherits: true; initial-value: all .2s ease; syntax: "*";}@property --blog-max-width{inherits: true; initial-value: 65ch; syntax: "<length>";}@property --blog-content-spacing{inherits: true; initial-value: 1.5rem; syntax: "<length>";}@property --blog-card-hover-transform{inherits: true; initial-value: translateY(-4px); syntax: "*";}@property --tag-padding-sm{inherits: true; initial-value: .25rem .5rem; syntax: "*";}@property --tag-padding-md{inherits: true; initial-value: .375rem .75rem; syntax: "*";}@property --tag-padding-lg{inherits: true; initial-value: .5rem 1rem; syntax: "*";}@property --tag-border-radius{inherits: true; initial-value: 9999px; syntax: "<length>";}@property --tag-transition{inherits: true; initial-value: background-color .15s ease-in-out; syntax: "*";}@property --code-padding{inherits: true; initial-value: 1rem; syntax: "<length>";}@property --code-inline-padding{inherits: true; initial-value: .25rem .5rem; syntax: "*";}@property --code-line-height{inherits: true; initial-value: 1.4; syntax: "<number>";}@property --widget-header-padding{inherits: true; initial-value: .75rem 1rem; syntax: "*";}@property --widget-body-padding{inherits: true; initial-value: 1rem; syntax: "<length>";}@property --widget-footer-padding{inherits: true; initial-value: .75rem 1rem; syntax: "*";}@property --widget-action-padding{inherits: true; initial-value: .25rem .5rem; syntax: "*";}@property --skeleton-height-sm{inherits: true; initial-value: .75rem; syntax: "<length>";}@property --skeleton-height-md{inherits: true; initial-value: 1rem; syntax: "<length>";}@property --skeleton-height-lg{inherits: true; initial-value: 1.5rem; syntax: "<length>";}@property --skeleton-animation-duration{inherits: true; initial-value: 1.5s; syntax: "<time>";}@property --color-twitter{inherits: true; initial-value: #1da1f2; syntax: "<color>";}@property --color-facebook{inherits: true; initial-value: #4267b2; syntax: "<color>";}@property --color-linkedin{inherits: true; initial-value: #0077b5; syntax: "<color>";}@property --header-height-sm{inherits: true; initial-value: 48px; syntax: "<length>";}@property --header-height-md{inherits: true; initial-value: 64px; syntax: "<length>";}@property --header-height-lg{inherits: true; initial-value: 80px; syntax: "<length>";}@property --header-z-index{inherits: true; initial-value: 1000; syntax: "<integer>";}@property --header-line-height{inherits: true; initial-value: 1.5; syntax: "<number>";}@property --header-logo-max-height{inherits: true; initial-value: 40px; syntax: "<length>";}@property --header-hamburger-size{inherits: true; initial-value: 24px; syntax: "<length>";}@property --header-mobile-breakpoint{inherits: true; initial-value: 768px; syntax: "<length>";}@property --footer-columns{inherits: true; initial-value: 4; syntax: "<integer>";}@property --footer-column-gap{inherits: true; initial-value: 2rem; syntax: "<length>";}@property --footer-line-height{inherits: true; initial-value: 1.6; syntax: "<number>";}@property --main-max-width{inherits: true; initial-value: 1200px; syntax: "<length>";}@property --main-max-width-narrow{inherits: true; initial-value: 800px; syntax: "<length>";}@property --main-max-width-wide{inherits: true; initial-value: 1400px; syntax: "<length>";}@property --main-line-height{inherits: true; initial-value: 1.6; syntax: "<number>";}@property --main-mobile-breakpoint{inherits: true; initial-value: 768px; syntax: "<length>";}@property --main-tablet-breakpoint{inherits: true; initial-value: 1024px; syntax: "<length>";}@property --sidebar-grid-columns{inherits: true; initial-value: 3; syntax: "<integer>";}}:root{--color-primary-50:#eff6ff;--color-primary-100:#dbeafe;--color-primary-200:#bfdbfe;--color-primary-300:#93c5fd;--color-primary-400:#60a5fa;--color-primary-500:#3b82f6;--color-primary-600:#2563eb;--color-primary-700:#1d4ed8;--color-primary-800:#1e40af;--color-primary-900:#1e3a8a;--color-secondary-50:#f8fafc;--color-secondary-100:#f1f5f9;--color-secondary-200:#e2e8f0;--color-secondary-300:#cbd5e1;--color-sec