@import url("./tokens.css");

@layer contega.base, contega.layout, contega.components, contega.utilities;

@layer contega.base {
  :where(.ct-app, .ct-app *, .ct-app *::before, .ct-app *::after) {
    box-sizing: border-box;
    letter-spacing: 0;
  }
  .ct-app {
    margin: 0;
    color: var(--ct-color-ink);
    background: var(--ct-color-canvas);
    font: var(--ct-weight-normal) var(--ct-text-sm)/var(--ct-leading-body)
      var(--ct-font-body);
    color-scheme: light;
  }
  .ct-app :where(h1, h2, h3, p, ul, ol, dl) {
    margin-block: 0;
  }
  .ct-app :where(h1, h2, h3) {
    font-family: var(--ct-font-heading);
    line-height: var(--ct-leading-heading);
    font-weight: var(--ct-weight-bold);
    overflow-wrap: anywhere;
  }
  .ct-app :where(h1) {
    font-size: var(--ct-text-2xl);
  }
  .ct-app :where(h2) {
    font-size: var(--ct-text-xl);
  }
  .ct-app :where(h3) {
    font-size: var(--ct-text-md);
  }
  .ct-app :where(button, input, select, textarea) {
    font: inherit;
  }
  .ct-app :where(button, a, input, select, textarea, summary) {
    -webkit-tap-highlight-color: transparent;
  }
  .ct-app :where(button, a) {
    touch-action: manipulation;
  }
  .ct-app :where(button:not(:disabled), summary) {
    cursor: pointer;
  }
  .ct-app :where(a) {
    color: var(--ct-color-primary);
    text-underline-offset: 3px;
  }
  .ct-app :where(svg) {
    flex-shrink: 0;
  }
  .ct-app
    :where(
      button,
      a,
      input,
      select,
      textarea,
      summary,
      [tabindex]
    ):focus-visible {
    outline: 2px solid var(--ct-color-focus);
    outline-offset: 3px;
  }
  .ct-app :where(:disabled) {
    cursor: not-allowed;
    opacity: 0.55;
  }
  .ct-app :where(code) {
    font-family: var(--ct-font-mono);
    overflow-wrap: anywhere;
  }
}

@layer contega.layout {
  .ct-container {
    width: 100%;
    max-width: var(--ct-content-width);
    margin-inline: auto;
    padding: var(--ct-space-8);
  }
  .ct-shell {
    display: grid;
    grid-template-columns: var(--ct-sidebar-width) minmax(0, 1fr);
    min-height: 100dvh;
  }
  .ct-sidebar {
    position: sticky;
    top: 0;
    height: 100dvh;
    overflow-y: auto;
    background: var(--ct-color-surface);
    border-right: 1px solid var(--ct-color-border);
    padding: var(--ct-space-6);
  }
  .ct-shell > main {
    min-width: 0;
  }
  .ct-topbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--ct-space-4);
    min-height: 4.5rem;
    padding: var(--ct-space-4) var(--ct-space-8);
    background: var(--ct-color-surface);
    border-bottom: 1px solid var(--ct-color-border);
  }
  .ct-stack {
    display: flex;
    flex-direction: column;
    gap: var(--ct-gap, var(--ct-space-4));
    min-width: 0;
  }
  .ct-cluster {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--ct-gap, var(--ct-space-3));
    min-width: 0;
  }
  .ct-split {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--ct-space-4);
  }
  .ct-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
    gap: var(--ct-gap, var(--ct-space-6));
  }
  .ct-with-aside {
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--ct-aside-width);
    gap: var(--ct-space-8);
    align-items: start;
  }
  .ct-section {
    padding-block: var(--ct-space-8);
    border-top: 1px solid var(--ct-color-border);
    min-width: 0;
  }
  .ct-section > header {
    margin-bottom: var(--ct-space-6);
  }
  @media (max-width: 64rem) {
    .ct-with-aside {
      grid-template-columns: minmax(0, 1fr);
    }
  }
  @media (max-width: 48rem) {
    .ct-shell {
      grid-template-columns: minmax(0, 1fr);
    }
    .ct-sidebar {
      position: static;
      height: auto;
      border-right: 0;
      border-bottom: 1px solid var(--ct-color-border);
    }
    .ct-container,
    .ct-topbar {
      padding: var(--ct-space-5);
    }
  }
}

@layer contega.components {
  .ct-wordmark {
    font: var(--ct-weight-bold) var(--ct-text-2xl)/1 var(--ct-font-heading);
    color: var(--ct-color-ink);
    text-decoration: none;
  }
  .ct-wordmark span {
    color: var(--ct-color-accent);
  }
  .ct-eyebrow {
    font-size: var(--ct-text-xs);
    font-weight: var(--ct-weight-semibold);
    color: var(--ct-color-muted);
  }
  .ct-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--ct-space-2);
    min-height: var(--ct-control-height);
    max-width: 100%;
    padding: var(--ct-space-2) var(--ct-space-4);
    border: 1px solid var(--ct-color-control-border);
    border-radius: var(--ct-radius-md);
    color: var(--ct-color-ink);
    background: var(--ct-color-surface);
    font-weight: var(--ct-weight-medium);
    text-decoration: none;
    text-align: center;
    overflow-wrap: anywhere;
    transition: background var(--ct-duration-fast) var(--ct-ease);
  }
  .ct-button:not(:disabled):hover {
    background: var(--ct-color-surface-hover);
  }
  .ct-button--primary {
    background: var(--ct-color-primary);
    color: var(--ct-color-on-primary);
    border-color: var(--ct-color-primary);
  }
  .ct-button--primary:not(:disabled):hover {
    background: var(--ct-color-primary-hover);
  }
  .ct-button--quiet {
    background: transparent;
    border-color: transparent;
    color: var(--ct-color-primary);
  }
  .ct-button--danger {
    background: var(--ct-color-danger);
    color: var(--ct-color-on-primary);
    border-color: var(--ct-color-danger);
  }
  .ct-button--danger:not(:disabled):hover {
    background: var(--ct-color-danger-soft);
    color: var(--ct-color-danger);
  }
  .ct-button--compact {
    min-height: var(--ct-control-compact-height);
    font-size: var(--ct-text-xs);
    padding: var(--ct-space-1) var(--ct-space-3);
  }
  .ct-button--icon {
    width: var(--ct-control-height);
    height: var(--ct-control-height);
    flex: 0 0 var(--ct-control-height);
    padding: 0;
  }
  .ct-button--icon svg {
    width: 1.125rem;
    height: 1.125rem;
  }
  .ct-field {
    display: grid;
    align-content: start;
    gap: var(--ct-space-2);
    min-width: 0;
  }
  .ct-label {
    font-weight: var(--ct-weight-medium);
  }
  .ct-hint {
    font-size: var(--ct-text-xs);
    color: var(--ct-color-muted);
  }
  .ct-error {
    font-size: var(--ct-text-xs);
    color: var(--ct-color-danger);
  }
  .ct-input {
    width: 100%;
    min-width: 0;
    min-height: var(--ct-control-height);
    padding: var(--ct-space-2) var(--ct-space-3);
    border: 1px solid var(--ct-color-control-border);
    border-radius: var(--ct-radius-md);
    color: var(--ct-color-ink);
    background: var(--ct-color-surface);
  }
  .ct-input::placeholder {
    color: var(--ct-color-muted);
    opacity: 1;
  }
  textarea.ct-input {
    resize: vertical;
    min-height: 7rem;
  }
  .ct-input[readonly] {
    background: var(--ct-color-canvas);
  }
  .ct-input[aria-invalid="true"] {
    border-color: var(--ct-color-danger);
  }
  .ct-input-group {
    display: flex;
    align-items: center;
    min-width: 0;
    border: 1px solid var(--ct-color-control-border);
    border-radius: var(--ct-radius-md);
    background: var(--ct-color-surface);
  }
  .ct-input-group > span {
    padding-inline: var(--ct-space-3);
    font-size: var(--ct-text-xs);
    color: var(--ct-color-muted);
  }
  .ct-input-group .ct-input {
    border: 0;
    background: transparent;
    text-align: end;
  }
  .ct-input-group:has([aria-invalid="true"]) {
    border-color: var(--ct-color-danger);
  }
  .ct-check {
    display: flex;
    align-items: flex-start;
    gap: var(--ct-space-3);
    cursor: pointer;
  }
  .ct-check input {
    flex: 0 0 auto;
    width: 1.125rem;
    height: 1.125rem;
    margin: 0.15rem 0 0;
    accent-color: var(--ct-color-primary);
  }
  .ct-switch {
    appearance: none;
    position: relative;
    flex: 0 0 2.5rem !important;
    width: 2.5rem !important;
    height: 1.5rem !important;
    border: 1px solid var(--ct-color-control-border);
    border-radius: 2rem;
    background: var(--ct-color-muted);
  }
  .ct-switch::after {
    content: "";
    position: absolute;
    width: 1rem;
    height: 1rem;
    top: 3px;
    left: 3px;
    border-radius: 50%;
    background: var(--ct-color-surface);
    transition: transform var(--ct-duration-fast) var(--ct-ease);
  }
  .ct-switch:checked {
    background: var(--ct-color-primary);
    border-color: var(--ct-color-primary);
  }
  .ct-switch:checked::after {
    transform: translateX(1rem);
  }
  .ct-range {
    width: 100%;
    min-height: var(--ct-control-height);
    accent-color: var(--ct-color-primary);
  }
  .ct-segmented {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ct-space-1);
    padding: var(--ct-space-1);
    background: var(--ct-color-primary-soft);
    border-radius: var(--ct-radius-md);
    width: fit-content;
    max-width: 100%;
  }
  .ct-segmented label {
    position: relative;
    cursor: pointer;
  }
  .ct-segmented > button {
    min-height: var(--ct-control-height);
    padding: var(--ct-space-2) var(--ct-space-4);
    border: 0;
    border-radius: var(--ct-radius-sm);
    background: transparent;
    color: var(--ct-color-muted);
  }
  .ct-segmented > button[aria-pressed="true"] {
    background: var(--ct-color-surface);
    color: var(--ct-color-primary);
    box-shadow: var(--ct-shadow-raised);
  }
  .ct-segmented input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
  }
  .ct-segmented span {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 2.5rem;
    padding: var(--ct-space-2) var(--ct-space-4);
    border-radius: var(--ct-radius-sm);
    color: var(--ct-color-muted);
  }
  .ct-segmented input:checked + span {
    background: var(--ct-color-surface);
    color: var(--ct-color-primary);
    box-shadow: var(--ct-shadow-raised);
  }
  .ct-segmented input:focus-visible + span {
    outline: 2px solid var(--ct-color-focus);
    outline-offset: 1px;
  }
  .ct-segmented input:disabled + span {
    opacity: 0.55;
    cursor: not-allowed;
  }
  .ct-nav {
    display: grid;
    gap: var(--ct-space-1);
  }
  .ct-nav button {
    border: 0;
    background: transparent;
    text-align: start;
    width: 100%;
  }
  .ct-nav :is(a, button) {
    display: flex;
    align-items: center;
    gap: var(--ct-space-3);
    min-height: var(--ct-control-height);
    padding: var(--ct-space-2) var(--ct-space-3);
    text-decoration: none;
    border-radius: var(--ct-radius-md);
    color: var(--ct-color-muted);
  }
  .ct-nav :is(a, button):hover,
  .ct-nav :is(a, button)[aria-current] {
    background: var(--ct-color-primary-soft);
    color: var(--ct-color-primary);
  }
  .ct-tabs {
    display: flex;
    gap: var(--ct-space-5);
    overflow-x: auto;
    border-bottom: 1px solid var(--ct-color-border);
  }
  .ct-tabs > :is(a, button) {
    flex-shrink: 0;
    min-height: var(--ct-control-height);
    padding: var(--ct-space-2) var(--ct-space-1);
    background: transparent;
    border: 0;
    border-bottom: 2px solid transparent;
    color: var(--ct-color-muted);
    text-decoration: none;
  }
  .ct-tabs > [aria-selected="true"],
  .ct-tabs > [aria-current] {
    color: var(--ct-color-primary);
    border-bottom-color: var(--ct-color-primary);
  }
  .ct-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--ct-space-1);
    padding: var(--ct-space-1) var(--ct-space-2);
    border-radius: var(--ct-radius-sm);
    font-size: var(--ct-text-xs);
    font-weight: var(--ct-weight-medium);
    color: var(--ct-color-primary);
    background: var(--ct-color-primary-soft);
  }
  .ct-notice {
    padding: var(--ct-space-4);
    border-left: 3px solid currentColor;
    color: var(--ct-color-info);
    background: var(--ct-color-info-soft);
  }
  .ct-notice--success,
  .ct-badge--success {
    color: var(--ct-color-success);
    background: var(--ct-color-success-soft);
  }
  .ct-notice--warning,
  .ct-badge--warning {
    color: var(--ct-color-warning);
    background: var(--ct-color-warning-soft);
  }
  .ct-notice--danger,
  .ct-badge--danger {
    color: var(--ct-color-danger);
    background: var(--ct-color-danger-soft);
  }
  .ct-table-wrap {
    max-width: 100%;
    overflow-x: auto;
  }
  .ct-table {
    width: 100%;
    border-collapse: collapse;
    text-align: start;
  }
  .ct-table :is(th, td) {
    padding: var(--ct-space-3) var(--ct-space-4);
    border-bottom: 1px solid var(--ct-color-border);
  }
  .ct-table th {
    text-align: start;
    color: var(--ct-color-muted);
    font-size: var(--ct-text-xs);
    font-weight: var(--ct-weight-medium);
    background: var(--ct-color-surface);
  }
  .ct-table caption {
    text-align: start;
    font-weight: var(--ct-weight-semibold);
    margin-bottom: var(--ct-space-3);
  }
  .ct-table tbody tr:hover {
    background: var(--ct-color-surface-hover);
  }
  .ct-summary {
    padding: var(--ct-space-6);
    background: var(--ct-color-primary);
    color: var(--ct-color-on-primary);
    border-radius: var(--ct-radius-md);
    min-width: 0;
  }
  .ct-summary-value {
    display: block;
    font: var(--ct-weight-semibold) var(--ct-text-2xl)/var(--ct-leading-heading)
      var(--ct-font-heading);
    margin-block: var(--ct-space-2);
    overflow-wrap: anywhere;
    font-variant-numeric: tabular-nums;
  }
  .ct-definition-list {
    margin: 0;
  }
  .ct-definition-list > div {
    display: flex;
    justify-content: space-between;
    gap: var(--ct-space-4);
    padding-block: var(--ct-space-3);
    border-bottom: 1px solid var(--ct-color-border);
  }
  .ct-definition-list dt {
    color: var(--ct-color-muted);
  }
  .ct-definition-list dd {
    margin: 0;
    font-weight: var(--ct-weight-medium);
    text-align: end;
    overflow-wrap: anywhere;
  }
  .ct-disclosure {
    border-block: 1px solid var(--ct-color-border);
    padding-block: var(--ct-space-4);
  }
  .ct-disclosure summary {
    font-weight: var(--ct-weight-medium);
  }
  .ct-disclosure > :not(summary) {
    margin-top: var(--ct-space-4);
  }
  .ct-card {
    background: var(--ct-color-surface);
    border: 1px solid var(--ct-color-border);
    border-radius: var(--ct-radius-lg);
    padding: var(--ct-space-5);
    min-width: 0;
  }
  .ct-empty {
    padding: var(--ct-space-12) var(--ct-space-5);
    text-align: center;
  }
  .ct-dialog {
    width: 32rem;
    max-width: calc(100% - 2rem);
    max-height: calc(100dvh - 2rem);
    overflow: auto;
    padding: var(--ct-space-6);
    border: 1px solid var(--ct-color-border);
    border-radius: var(--ct-radius-lg);
    background: var(--ct-color-surface);
    color: var(--ct-color-ink);
    box-shadow: var(--ct-shadow-dialog);
  }
  .ct-dialog::backdrop {
    background: #233b3566;
  }
  .ct-tooltip-wrap {
    position: relative;
    display: inline-flex;
  }
  .ct-tooltip {
    position: absolute;
    z-index: var(--ct-z-sticky);
    bottom: calc(100% + 0.5rem);
    left: 0;
    width: max-content;
    max-width: 12rem;
    padding: var(--ct-space-2) var(--ct-space-3);
    color: var(--ct-color-on-primary);
    background: var(--ct-color-ink);
    border-radius: var(--ct-radius-sm);
    font-size: var(--ct-text-xs);
    opacity: 0;
    pointer-events: none;
  }
  .ct-tooltip-wrap:hover .ct-tooltip,
  .ct-tooltip-wrap:focus-within .ct-tooltip {
    opacity: 1;
    pointer-events: auto;
  }
  .ct-progress {
    width: 100%;
    height: 0.5rem;
    accent-color: var(--ct-color-primary);
  }
  .ct-spinner {
    display: inline-block;
    width: 1rem;
    height: 1rem;
    flex-shrink: 0;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: ct-spin 700ms linear infinite;
  }
  @keyframes ct-spin {
    to {
      transform: rotate(360deg);
    }
  }
}

@layer contega.utilities {
  .ct-muted {
    color: var(--ct-color-muted);
  }
  .ct-number {
    font-variant-numeric: tabular-nums;
    text-align: end;
  }
  .ct-full {
    width: 100%;
  }
  .ct-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }
  @media (prefers-reduced-motion: reduce) {
    .ct-app *,
    .ct-app *::before,
    .ct-app *::after {
      animation: none !important;
      transition: none !important;
      scroll-behavior: auto !important;
    }
  }
  @media (forced-colors: active) {
    .ct-button,
    .ct-input,
    .ct-switch {
      border: 1px solid ButtonText;
    }
    .ct-switch:checked {
      background: Highlight;
    }
    .ct-switch::after {
      background: ButtonText;
    }
    .ct-segmented input:checked + span {
      outline: 2px solid Highlight;
    }
  }
}