/*
 * @araharah/theme — component layer (mockup-derived, D-11)
 * ------------------------------------------------------------------
 * Every Rams component the four mockup screens show: buttons,
 * inputs, telemetry cards, event chips, the maneuver banner,
 * checkbox, and the two-way toggle — plus the full typography
 * helper scale consuming the --type-* custom properties.
 *
 * Values are token references ONLY (D-03, D-07): colors via
 * var(--color-*), spacing via var(--spacing-*), type via
 * var(--type-*). The sole literals are the design doc's machined
 * border geometry (1px / 2px inset rules, 3px focus brackets)
 * and the exact 18x18 checkbox square — spec geometry, not theme
 * values. Absolute zero roundedness; zero blur, glow, or
 * transition anywhere.
 */

@layer components {

  /* ——— Buttons (design doc: Components › Buttons & Trigger Controls) ——— */

  .btn-primary,
  .btn-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-space-sm);
    font: var(--type-label-lg);
    letter-spacing: var(--type-label-lg-tracking);
    text-transform: uppercase;
    padding: var(--spacing-space-sm) var(--spacing-space-md);
    border: 2px solid var(--color-matte-black);
    border-radius: 0;
    cursor: pointer;
  }

  /* Primary action: signal-orange field, matte-black label.
     Hover/focus inverts — matte-black field, orange label. */
  .btn-primary {
    background: var(--color-signal-orange);
    color: var(--color-matte-black);
  }
  .btn-primary:hover {
    background: var(--color-matte-black);
    color: var(--color-signal-orange);
  }

  /* Secondary action: soft-beige substrate; hover/focus shifts
     to the chassis-subtle nested-surface tone. */
  .btn-secondary {
    background: var(--color-soft-beige);
    color: var(--color-matte-black);
  }
  .btn-secondary:hover {
    background: var(--color-chassis-subtle);
  }

  /* Focus brackets: the 2px frame thickens to a 3px
     signal-orange rule. No outline ring, no glow, no
     transition — a machined edge settling into its housing. */
  .btn-primary:focus-visible {
    background: var(--color-matte-black);
    color: var(--color-signal-orange);
    border: 3px solid var(--color-signal-orange);
    outline: none;
  }
  .btn-secondary:focus-visible {
    background: var(--color-chassis-subtle);
    border: 3px solid var(--color-signal-orange);
    outline: none;
  }

  /* ——— Inputs (design doc: Components › Input Fields & Search Bars) ——— */

  .input-field {
    font: var(--type-body-md);
    letter-spacing: var(--type-body-md-tracking);
    color: var(--color-matte-black);
    background: var(--color-soft-beige);
    border: 2px solid var(--color-matte-black);
    border-radius: 0;
    padding: var(--spacing-space-sm) var(--spacing-space-md);
    caret-color: var(--color-signal-orange);
  }
  .input-field::placeholder {
    color: var(--color-outline);
  }
  /* Focus: the frame thickens to a 3px signal-orange rule —
     zero glow, zero blur, zero animation. */
  .input-field:focus {
    border: 3px solid var(--color-signal-orange);
    outline: none;
  }

  /* ——— Telemetry cards (design doc: Components › Telemetry Cards & Module Panels) ——— */

  .card {
    background: var(--color-soft-beige);
    color: var(--color-matte-black);
    border: 1px solid var(--color-matte-black);
    border-radius: 0;
  }

  /* Header plate: separated from content by a horizontal 1px
     rule; label-sm uppercase category left, reference badge right. */
  .card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-space-sm);
    padding: var(--spacing-space-sm) var(--spacing-space-md);
    border-bottom: 1px solid var(--color-matte-black);
    color: var(--color-on-surface-variant);
  }

  /* Reference badge: inverted matte-black plate, label-sm. */
  .card-ref {
    font: var(--type-label-sm);
    letter-spacing: var(--type-label-sm-tracking);
    text-transform: uppercase;
    background: var(--color-matte-black);
    color: var(--color-pure-white);
    padding: var(--spacing-space-xs) var(--spacing-space-sm);
    border-radius: 0;
  }

  /* Content block: high-contrast data point in telemetry-num
     paired with an adjacent unit label. */
  .card-content {
    display: flex;
    align-items: baseline;
    gap: var(--spacing-space-xs);
    padding: var(--spacing-space-sm);
  }

  /* ——— Chips / event tags (design doc: Components › Chips & Event Tags) ——— */

  .chip-traffic,
  .chip-hazard,
  .chip-safe {
    display: inline-block;
    font: var(--type-label-sm);
    letter-spacing: var(--type-label-sm-tracking);
    text-transform: uppercase;
    padding: var(--spacing-space-xs) var(--spacing-space-sm);
    border-radius: 0;
  }

  /* Monolithic rectangular blocks, no rounding. */
  .chip-traffic {
    background: var(--color-signal-orange);
    color: var(--color-matte-black);
  }
  .chip-hazard {
    background: var(--color-functional-red);
    color: var(--color-pure-white);
  }
  .chip-safe {
    background: var(--color-olive-green);
    color: var(--color-pure-white);
  }

  /* ——— Maneuver banner (design doc: Components › Navigation HUD) ——— */

  .maneuver-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-space-md);
    background: var(--color-matte-black);
    color: var(--color-soft-beige);
    padding: var(--spacing-space-md) var(--spacing-margin);
    border-radius: 0;
  }

  /* Step register reads signal-orange inside the inverted chassis. */
  .maneuver-banner .text-label-sm {
    color: var(--color-signal-orange);
  }
  .maneuver-banner .text-telemetry-num {
    color: var(--color-pure-white);
  }

  /* Graphic vector: sharp directional turn arrow, 3px stroke,
     drawn on square linecaps (sized by the spacing scale). */
  .maneuver-arrow {
    width: var(--spacing-space-xl);
    height: var(--spacing-space-xl);
    color: var(--color-signal-orange);
    flex: none;
  }

  /* ——— Checkbox (design doc: Components › Checkboxes & Toggle Switches) ——— */

  .checkbox {
    appearance: none;
    display: grid;
    place-content: center;
    width: 18px; /* design-doc geometry: exact 18x18 square */
    height: 18px;
    margin: 0;
    border: 2px solid var(--color-matte-black);
    border-radius: 0;
    background: var(--color-pure-white);
    cursor: pointer;
  }

  /* Checked state: solid centered 8x8 square in signal-orange —
     pure geometric state, no checkmark glyph. */
  .checkbox:checked::before {
    content: "";
    width: var(--spacing-space-sm);
    height: var(--spacing-space-sm);
    background: var(--color-signal-orange);
  }
  .checkbox:focus-visible {
    border: 3px solid var(--color-signal-orange);
    outline: none;
  }

  /* ——— Two-way toggle: [ OFF | ON ] — active box inverts ——— */

  .toggle {
    display: inline-flex;
    gap: var(--spacing-space-xs);
    padding: var(--spacing-space-xs);
    background: var(--color-chassis-subtle);
    border: 1px solid var(--color-matte-black);
    border-radius: 0;
  }

  /* Inactive side: muted chassis-subtle field, matte-black label. */
  .toggle-option {
    font: var(--type-label-lg);
    letter-spacing: var(--type-label-lg-tracking);
    text-transform: uppercase;
    padding: var(--spacing-space-sm) var(--spacing-space-md);
    background: var(--color-chassis-subtle);
    color: var(--color-matte-black);
    border: 0;
    border-radius: 0;
    cursor: pointer;
  }

  /* Active side fills solidly matte-black with inverted
     signal-orange label. */
  .toggle-option[aria-pressed="true"] {
    background: var(--color-matte-black);
    color: var(--color-signal-orange);
  }
  .toggle-option:focus-visible {
    outline: 3px solid var(--color-signal-orange);
  }

  /* ——— Typography helpers: the full scale, token names verbatim ——— */

  .text-display-lg {
    font: var(--type-display-lg);
    letter-spacing: var(--type-display-lg-tracking);
  }
  .text-display-lg-mobile {
    font: var(--type-display-lg-mobile);
    letter-spacing: var(--type-display-lg-mobile-tracking);
  }
  .text-headline-lg {
    font: var(--type-headline-lg);
    letter-spacing: var(--type-headline-lg-tracking);
  }
  .text-headline-lg-mobile {
    font: var(--type-headline-lg-mobile);
    letter-spacing: var(--type-headline-lg-mobile-tracking);
  }
  .text-headline-md {
    font: var(--type-headline-md);
    letter-spacing: var(--type-headline-md-tracking);
  }
  .text-headline-sm {
    font: var(--type-headline-sm);
    letter-spacing: var(--type-headline-sm-tracking);
  }
  .text-body-lg {
    font: var(--type-body-lg);
    letter-spacing: var(--type-body-lg-tracking);
  }
  .text-body-md {
    font: var(--type-body-md);
    letter-spacing: var(--type-body-md-tracking);
  }
  .text-body-sm {
    font: var(--type-body-sm);
    letter-spacing: var(--type-body-sm-tracking);
  }
  .text-label-lg {
    font: var(--type-label-lg);
    letter-spacing: var(--type-label-lg-tracking);
  }
  .text-label-md {
    font: var(--type-label-md);
    letter-spacing: var(--type-label-md-tracking);
  }
  .text-label-sm {
    font: var(--type-label-sm);
    letter-spacing: var(--type-label-sm-tracking);
  }
  .text-telemetry-num {
    font: var(--type-telemetry-num);
    letter-spacing: var(--type-telemetry-num-tracking);
  }
}