@layer reset, legacy, foundations, layout, components, patterns, context, pages, utilities;

@layer foundations {
  :root {
    --ui-space-1: 4px;
    --ui-space-2: 8px;
    --ui-space-3: 12px;
    --ui-space-4: 16px;
    --ui-space-5: 20px;
    --ui-space-6: 24px;
    --ui-space-8: 32px;

    --ui-font-sans: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --ui-font-size-sm: 0.875rem;
    --ui-font-size-md: 1rem;
    --ui-font-size-lg: 1.25rem;
    --ui-line-height-tight: 1.25;
    --ui-line-height-default: 1.5;

    --ui-color-canvas: #f4f6f8;
    --ui-color-surface: #fff;
    --ui-color-text: #1a2433;
    --ui-color-text-muted: #526173;
    --ui-color-border: #d3dae5;
    --ui-color-action: #2057d4;
    --ui-color-action-text: #fff;
    --ui-color-focus: #2057d4;
    --ui-color-danger: #b42318;
    --ui-color-success: #18794e;

    --ui-radius-control: 10px;
    --ui-radius-panel: 16px;
    --ui-radius-round: 999px;
    --ui-border-width: 1px;
    --ui-shadow-panel: 0 12px 32px rgba(15, 35, 67, 0.08);

    --ui-control-min-height: 44px;
    --ui-control-inline-padding: 14px;
    --ui-table-row-min-height: 52px;
    --ui-density-compact: 0.75;
    --ui-density-regular: 1;

    --ui-breakpoint-sm: 375px;
    --ui-breakpoint-md: 768px;
    --ui-breakpoint-lg: 1440px;
    --ui-z-dropdown: 30;
    --ui-z-drawer: 50;
    --ui-z-modal: 70;
  }

}

@layer components {
  .button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--ui-space-2);
    min-height: var(--ui-control-min-height);
    padding: 10px var(--ui-control-inline-padding);
    border: var(--ui-border-width) solid transparent;
    border-radius: var(--ui-radius-control);
    background: var(--ui-color-action);
    color: var(--ui-color-action-text);
    cursor: pointer;
    font: inherit;
    font-weight: 700;
    line-height: var(--ui-line-height-tight);
    text-align: center;
    text-decoration: none;
  }

  .button:hover {
    background: color-mix(in srgb, var(--ui-color-action) 86%, #000);
    color: var(--ui-color-action-text);
    text-decoration: none;
  }

  .button:focus-visible {
    outline: 3px solid var(--ui-color-focus);
    outline-offset: 2px;
  }

  .button:disabled,
  .button[aria-disabled="true"] {
    cursor: not-allowed;
    opacity: 0.62;
  }
}

@layer utilities {
  .sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
  }
}