/*
 * Decibell LeadOS design foundations
 * Adapted from the supplied Intercom and Steep reference tokens.
 * The source systems are namespaced so their light themes cannot overwrite
 * Decibell's dark graphite/lilac identity.
 */
:root {
  --deci-ink: #f8f6fb;
  --deci-ink-soft: #c9c3ce;
  --deci-muted: #8f8995;
  --deci-canvas: #0b0a0f;
  --deci-panel: #15131a;
  --deci-panel-raised: #1b1821;
  --deci-panel-soft: #211c29;
  --deci-hairline: rgba(255, 255, 255, 0.1);
  --deci-hairline-strong: rgba(207, 177, 248, 0.26);
  --deci-accent: #c8a6ff;
  --deci-accent-soft: #eadcff;
  --deci-accent-ink: #24162f;
  --deci-success: #78deb5;
  --deci-warning: #ffc47a;
  --deci-font-ui: Inter, "Sohne", "Saans", ui-sans-serif, system-ui,
    -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --deci-font-editorial: "Signifier", "Serrif", Georgia, "Times New Roman",
    serif;
  --deci-font-mono: "SaansMono", "SFMono-Regular", Consolas,
    "Liberation Mono", monospace;
  --deci-display-xl: clamp(3.5rem, 7.2vw, 5.625rem);
  --deci-display-lg: clamp(2.75rem, 5vw, 4rem);
  --deci-heading: clamp(2rem, 3.6vw, 2.75rem);
  --deci-body: 1rem;
  --deci-caption: 0.75rem;
  --deci-radius-control: 12px;
  --deci-radius-input: 16px;
  --deci-radius-card: 22px;
  --deci-radius-artifact: 20px;
  --deci-radius-pill: 999px;
  --deci-shadow-artifact: 0 0 0 1px rgba(255, 255, 255, 0.045),
    0 22px 54px rgba(0, 0, 0, 0.28);
  --deci-shadow-popover: 0 26px 80px rgba(0, 0, 0, 0.48);
  --deci-ease-out: cubic-bezier(0.2, 0.75, 0.2, 1);
  --deci-section-gap: clamp(64px, 8vw, 96px);
}

html {
  font-family: var(--deci-font-ui);
  font-feature-settings: "ss01" 1, "tnum" 1;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

body {
  font-family: var(--deci-font-ui);
}

/* Intercom's editorial hierarchy, retained in Decibell's darker voice. */
body :where(.hero, .intro, .support-hero, .sales-hero, .lead-base-hero) h1,
body :where(.legal-page, .legal-shell) h1 {
  font-weight: 400;
  letter-spacing: -0.055em;
  text-wrap: balance;
}

:where(.hero, .intro, .support-hero) h1 em,
:where(.hero, .intro, .support-hero) h1 i {
  font-family: var(--deci-font-editorial);
  font-weight: 400;
}

:where(.eyebrow, .label, .nav-label, .plan-index, .topic-number,
  .request-label, .panel-head, .inbox-list-labels, .conversation-status-pill) {
  font-family: var(--deci-font-mono);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* Steep-inspired product artifacts: quiet depth, never generic glass. */
body :where(.contact-panel, .request-card, .plans article, .token-grid article,
  .support-grid article, .billing-card, .sales-command-card,
  .overview-actions > *, .conversation-shell, .lead-base-metrics > *,
  .settings-section, .auth-card) {
  border-color: var(--deci-hairline);
  box-shadow: var(--deci-shadow-artifact);
}

body :where(.contact-panel, .request-card, .billing-card, .sales-command-card,
  .conversation-shell, .settings-section, .auth-card) {
  border-radius: var(--deci-radius-card);
}

body :where(.plans article, .token-grid article, .support-grid article,
  .overview-actions > *, .lead-base-metrics > *) {
  border-radius: var(--deci-radius-artifact);
}

/* Marketing actions use Steep's paired pill language; workspace controls stay compact. */
body :where(.nav-cta, .cabinet-link, .request-action, .intro button,
  .plans button, .token-grid button, .hero .primary, .support-widget-actions a) {
  min-height: 44px;
  border-radius: var(--deci-radius-pill);
  padding-inline: 20px;
}

body .hero .actions .primary,
body .intro button,
body .plans button,
body .token-grid button,
body .topbar .cabinet-link,
body .request-card .request-action {
  border-radius: var(--deci-radius-pill);
}

:where(.agency-app, .legacy-app) :where(button, input, select, textarea) {
  font-family: var(--deci-font-ui);
}

:where(.agency-app, .legacy-app) :where(input, select, textarea) {
  border-radius: var(--deci-radius-control);
}

:where(.agency-app, .legacy-app) textarea,
:where(.agency-app, .legacy-app) .reply-form {
  border-radius: var(--deci-radius-input);
}

/* Thin, product-led state separators from the supplied table reference. */
:where(.conversation-item, .billing-ledger > *, .connection-list > *,
  .threads-results > *, .bases-list > *) {
  border-color: var(--deci-hairline);
}

:where(.conversation-item, .support-grid article, .plans article,
  .token-grid article, .overview-actions > *) {
  transition:
    transform 220ms var(--deci-ease-out),
    border-color 220ms ease,
    background-color 220ms ease,
    box-shadow 220ms ease;
}

@media (hover: hover) and (pointer: fine) {
  :where(.support-grid article, .plans article, .token-grid article,
    .overview-actions > *):hover {
    transform: translateY(-4px);
    border-color: var(--deci-hairline-strong);
  }
}

@media (max-width: 720px) {
  :root {
    --deci-radius-card: 18px;
    --deci-radius-artifact: 17px;
    --deci-section-gap: 56px;
  }
}

@media (prefers-reduced-motion: reduce) {
  :where(.conversation-item, .support-grid article, .plans article,
    .token-grid article, .overview-actions > *) {
    transition-duration: 0.01ms;
  }
}