/* DMS Design System 2.0 — "layered emboss" surface layer.
   Loaded right after dms/components (see Dms::ShellHelper::STYLESHEETS) and
   supersedes the 1.x surface rules for buttons, fields, cards, tabs, badges, kbd, and tables.
   Colour rule: charcoal = primary action, green (brand-*) = success action + status only.
   Token values only — no literals (enforced by test/lib/dms/design_system/style_guard_test.rb). */
@layer components {
  /* Buttons */
  .dms-button,
  .dms-btn {
    border: 0;
  }

  .dms-button--primary,
  .dms-btn--primary {
    background: linear-gradient(to bottom, var(--dms-action-primary-start), var(--dms-action-primary-end));
    box-shadow: var(--dms-shadow-emboss-button-primary);
    color: var(--dms-text-on-primary);
    font-weight: var(--dms-font-title-weight);
  }

  .dms-button--primary:hover,
  .dms-btn--primary:hover {
    background: linear-gradient(to bottom, var(--dms-action-primary-hover-start), var(--dms-action-primary-hover-end));
    box-shadow: var(--dms-shadow-emboss-button-primary-hover);
    filter: none;
  }

  /* Green lives here now: approve, publish, check-in, confirm. */
  .dms-button--success,
  .dms-btn--success {
    background: linear-gradient(to bottom, var(--dms-brand-start), var(--dms-brand-end));
    box-shadow: var(--dms-shadow-emboss-button-success);
    color: var(--dms-text-white);
    font-weight: var(--dms-font-title-weight);
  }

  .dms-button--success:hover,
  .dms-btn--success:hover {
    filter: brightness(0.96);
  }

  .dms-button--secondary,
  .dms-btn--secondary,
  .dms-btn--outline {
    border: 0;
    background: linear-gradient(to bottom, var(--dms-background-white), var(--dms-surface-layer));
    box-shadow: var(--dms-shadow-emboss-button);
  }

  .dms-button--secondary:hover,
  .dms-btn--secondary:hover,
  .dms-btn--outline:hover {
    background: var(--dms-surface-layer);
    box-shadow: var(--dms-shadow-emboss-button-hover);
  }

  .dms-button--danger,
  .dms-btn--danger {
    background: linear-gradient(to bottom, var(--dms-danger), var(--dms-danger-hover));
    box-shadow: var(--dms-shadow-emboss-button-danger);
  }

  .dms-button:active,
  .dms-btn:active {
    box-shadow: var(--dms-shadow-emboss-button-active);
  }

  /* Fields: ring instead of border, charcoal focus halo */
  .dms-input,
  .dms-select__trigger {
    border-color: transparent;
    box-shadow: var(--dms-shadow-emboss-field);
  }

  .dms-input:hover,
  .dms-select__trigger:hover {
    border-color: transparent;
  }

  .dms-input:focus-visible,
  .dms-select__trigger:focus-visible {
    border-color: transparent;
    box-shadow: var(--dms-shadow-emboss-field-focus);
    outline: none;
  }

  .dms-input[aria-invalid="true"] {
    box-shadow: 0 0 0 var(--dms-border-width) var(--dms-danger);
  }

  /* Cards: ring + soft drop, two-tone layers */
  .dms-card {
    border: 0;
    border-radius: var(--dms-radius-xl);
    box-shadow: var(--dms-shadow-emboss-card);
  }

  .dms-card--grouped > .dms-card__header,
  .dms-card--table > .dms-card__header {
    background: var(--dms-surface-layer);
    border-block-end-color: var(--dms-ring);
    box-shadow: var(--dms-shadow-highlight-top);
  }

  .dms-card__footer {
    padding: var(--dms-space-3);
    background: var(--dms-surface-layer);
    border-block-start: var(--dms-border-width) solid var(--dms-ring);
  }

  /* Floating glass surface (topbar, sidebars, popovers) */
  .dms-surface--glass {
    background: var(--dms-surface-glass);
    backdrop-filter: blur(var(--dms-glass-blur)) saturate(1.4);
    -webkit-backdrop-filter: blur(var(--dms-glass-blur)) saturate(1.4);
    border-radius: var(--dms-radius-lg);
    box-shadow: var(--dms-shadow-floating);
  }

  /* Hatched divider band */
  .dms-divider--hatch {
    height: var(--dms-space-3);
    border-block: var(--dms-border-width) solid var(--dms-ring);
    background: repeating-linear-gradient(135deg, transparent 0 calc(var(--dms-hatch-size) - 1px), var(--dms-divider-hatch) calc(var(--dms-hatch-size) - 1px) var(--dms-hatch-size));
  }

  /* Tabs: inset track with raised selected pill */
  .dms-tabs__list {
    display: inline-flex;
    max-width: 100%;
    gap: 0;
    padding: calc(var(--dms-space-1) - 1px);
    border: 0;
    border-radius: calc(var(--dms-radius-md) + var(--dms-border-width) * 2);
    background: var(--dms-surface-inset);
    box-shadow: var(--dms-shadow-inset-track);
  }

  .dms-tabs__tab {
    height: var(--dms-control-height-sm);
    border-radius: calc(var(--dms-radius-md) - 1px);
  }

  .dms-tabs__tab[aria-selected="true"] {
    background: var(--dms-background-white);
    box-shadow: var(--dms-shadow-raised-pill);
  }

  .dms-tabs__tab[aria-selected="true"]::after {
    content: none;
  }

  /* Badges: neutral chip; status variants keep their colours */
  .dms-badge {
    height: calc(var(--dms-space-5) + var(--dms-border-width) * 2);
    border: 0;
    background: var(--dms-surface-hover);
    box-shadow: inset 0 0 0 var(--dms-border-width) var(--dms-ring);
  }

  .dms-badge--success,
  .dms-badge--warning,
  .dms-badge--danger,
  .dms-badge--info {
    box-shadow: none;
  }

  .dms-kbd {
    border: 0;
    background: linear-gradient(to bottom, var(--dms-background-white), var(--dms-surface-inset));
    box-shadow: var(--dms-shadow-kbd);
    font-family: var(--dms-font-family-mono);
    font-size: var(--dms-font-eyebrow-size);
  }

  /* Tables: eyebrow headers, hairline rows */
  .dms-table th {
    color: var(--dms-text-muted);
    font-size: var(--dms-font-eyebrow-size);
    letter-spacing: var(--dms-font-eyebrow-tracking);
    text-transform: uppercase;
    background: transparent;
    border-block-end-color: var(--dms-ring);
  }

  .dms-table td {
    border-block-end-color: var(--dms-ring);
  }

  .dms-table tbody tr[data-dms-selected] {
    background: var(--dms-surface-layer);
  }

  .dms-page__title {
    font-size: var(--dms-font-display-size);
    line-height: var(--dms-font-display-line-height);
    letter-spacing: var(--dms-font-display-tracking);
  }
}