/*
 * The lead style of draft V2 (owner, 2026-10-20): light grey lines, quiet grey
 * controls, black only for text and the primary button. Scoped to the prototype
 * brand "graphite", the default of the page.
 *
 * Component rules here are PROTOTYPES of what the system would need. Each says
 * which token or variant is missing. Nothing here may go below WCAG 2.2 AA:
 *   - field borders stay at 3 : 1 (graphit.css sets them, 1.4.11);
 *   - the lines that only separate - table rows, card edges, dividers - carry no
 *     information a person needs to operate anything, so they may be light;
 *   - a secondary button is told by its label, not by its border;
 *   - the quiet segmented control keeps its states apart by more than hue: the
 *     label goes from #66666e to #09090b (3.5 : 1), turns semibold and gets a raised
 *     surface with a shadow (1.4.1, 1.4.11; B-55 and B-67 chose an inverted state for
 *     exactly this reason).
 */
@layer sw.components {
  /* Missing: a token for separating lines apart from border.strong (fields' hover). */
  [data-sw-brand="graphite"] .sw-table th { border-block-end-color: var(--sw-color-border-subtle); }

  /* Missing: a quiet border for controls that a label already identifies. */
  [data-sw-brand="graphite"] .sw-button[data-variant="secondary"] { border-color: var(--e-quiet-line); }
  [data-sw-brand="graphite"] .sw-button[data-variant="secondary"][data-hovered] { border-color: var(--sw-color-border-default); }

  /* Missing: a "quiet" variant of the segmented ToggleButtonGroup. */
  [data-sw-brand="graphite"] .sw-toggle-group[data-segmented] {
    padding: 3px; gap: 2px;
    border-radius: calc(var(--sw-skin-radius-pill) + 3px);
    background: var(--e-quiet-track);
  }
  [data-sw-brand="graphite"] .sw-toggle-group[data-segmented] > .sw-button {
    margin: 0; border-color: transparent; background: transparent;
    border-radius: var(--sw-skin-radius-pill);
    color: var(--e-quiet-text); font-weight: var(--sw-font-weight-medium);
  }
  [data-sw-brand="graphite"] .sw-toggle-group[data-segmented] > .sw-button[data-hovered] { color: var(--sw-color-text-primary); }
  [data-sw-brand="graphite"] .sw-toggle-group[data-segmented] > .sw-button[data-selected] {
    background: var(--e-quiet-on); color: var(--sw-color-text-primary);
    font-weight: var(--sw-font-weight-semibold);
    box-shadow: 0 1px 2px rgb(0 0 0 / 0.08), 0 0 0 1px rgb(0 0 0 / 0.03);
  }
}

/* The quiet colours, per scheme. Other brands take the nearest steps of their ramp. */
:root, [data-sw-brand] {
  --e-quiet-track: var(--sw-color-surface-sunken);
  --e-quiet-on: var(--sw-color-surface-raised);
  --e-quiet-text: var(--sw-color-neutral-600);
  --e-quiet-line: var(--sw-color-border-subtle);
}
[data-sw-brand="graphite"] { --e-quiet-track: #ececee; --e-quiet-text: #66666e; --e-quiet-line: #dedee2; }
[data-sw-color-scheme="dark"] { --e-quiet-track: var(--sw-color-neutral-900); --e-quiet-on: var(--sw-color-neutral-800); --e-quiet-text: var(--sw-color-neutral-400); --e-quiet-line: var(--sw-color-neutral-800); }
[data-sw-brand="graphite"][data-sw-color-scheme="dark"] { --e-quiet-track: #1c1c1f; --e-quiet-on: #2c2c30; --e-quiet-text: #8a8a91; --e-quiet-line: #2c2c30; }
@media (prefers-color-scheme: dark) {
  [data-sw-color-scheme="system"] { --e-quiet-track: var(--sw-color-neutral-900); --e-quiet-on: var(--sw-color-neutral-800); --e-quiet-text: var(--sw-color-neutral-400); --e-quiet-line: var(--sw-color-neutral-800); }
  [data-sw-brand="graphite"][data-sw-color-scheme="system"] { --e-quiet-track: #1c1c1f; --e-quiet-on: #2c2c30; --e-quiet-text: #8a8a91; --e-quiet-line: #2c2c30; }
}