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

/* Base */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--color-surface);
  color: var(--color-on-surface);
  font: var(--type-body-large);
  text-rendering: optimizeLegibility;
}

a {
  color: inherit;
  text-underline-offset: var(--space-1);
}

:focus-visible {
  border-radius: var(--shape-extra-small);
  box-shadow: var(--focus-ring);
  outline: 0;
}

/* Surface state. Keep the surface and its readable foreground together so a
   contextual container cannot accidentally inherit the wrong text role. The
   light-only palette keeps this state tonal, never a dark-mode escape hatch. */
.surface-inverse {
  /* Inverse controls inherit the surface contract. This keeps a dynamically
     inserted outline button readable even when the caller only supplies the
     shared surface class and cannot add a second modifier. */
  --button-outline-background: var(--button-outline-inverse-background);
  --button-outline-border: var(--button-outline-inverse-border);
  --button-outline-foreground: var(--button-outline-inverse-foreground);
  --button-outline-hover-background: var(--button-outline-inverse-hover-background);
  background: var(--color-surface-inverse);
  color: var(--color-on-surface-inverse);
}

/* Button */
.button {
  align-items: center;
  border: var(--border-width-strong) solid transparent;
  border-radius: var(--button-radius);
  cursor: pointer;
  display: inline-flex;
  font: var(--type-label-large);
  gap: var(--space-3);
  justify-content: center;
  min-height: var(--button-height);
  padding-inline: var(--space-5);
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  text-decoration: none;
  transition: background-color var(--motion-short-2) var(--ease-standard),
    border-color var(--motion-short-2) var(--ease-standard),
    color var(--motion-short-2) var(--ease-standard),
    transform var(--motion-short-1) var(--ease-standard);
}

.button:active:not(:disabled) {
  transform: scale(var(--state-pressed-scale));
}

.button:disabled,
.button[aria-disabled="true"] {
  cursor: not-allowed;
  opacity: var(--state-disabled-opacity);
}

.button--primary {
  background: var(--button-primary-background);
  border-color: var(--button-primary-border);
  color: var(--button-primary-foreground);
}

.button--secondary {
  background: var(--button-secondary-background);
  color: var(--button-secondary-foreground);
}

.button--outline {
  background: var(--button-outline-background);
  border-color: var(--button-outline-border);
  color: var(--button-outline-foreground);
}

/* Explicit modifier for contextual surfaces. Keep the parent selector as a
   compatibility fallback for existing markup, but prefer the modifier when
   controls are created or moved dynamically. */
.button--outline-on-inverse,
.surface-inverse .button--outline,
.surface-inverse.button--outline {
  background: var(--button-outline-inverse-background);
  border-color: var(--button-outline-inverse-border);
  color: var(--button-outline-inverse-foreground);
}

.button--primary:focus-visible,
.button--outline:focus-visible {
  box-shadow: var(--focus-ring), var(--elevation-2);
}

@media (hover: hover) and (pointer: fine) {
  .button--primary:hover { background: var(--button-primary-hover-background); }
  .button--secondary:hover { background: var(--color-surface-container-high); }
  .button--outline:hover { background: var(--button-outline-hover-background); }
  .button--outline-on-inverse:hover,
  .surface-inverse .button--outline:hover,
  .surface-inverse.button--outline:hover {
    background: var(--button-outline-inverse-hover-background);
    color: var(--button-outline-inverse-hover-foreground);
  }
}

/* Form controls */
.field-group {
  display: grid;
  gap: var(--space-2);
}

.field-label {
  color: var(--color-on-surface);
  font: var(--type-label-large);
}

.field-optional,
.field-hint,
.field-error {
  font: var(--type-body-medium);
}

.field-optional,
.field-hint {
  color: var(--color-on-surface-variant);
}

.field-error {
  color: var(--color-error);
}

.field {
  background: var(--color-surface);
  border: var(--border-width) solid var(--field-outline);
  border-radius: var(--field-radius);
  color: var(--color-on-surface);
  font: var(--type-body-large);
  min-height: var(--field-height);
  padding-inline: var(--space-4);
  transition: border-color var(--motion-short-2) var(--ease-standard),
    box-shadow var(--motion-short-2) var(--ease-standard);
  width: 100%;
}

.field:hover { border-color: var(--color-on-surface); }
.field[aria-invalid="true"] { border-color: var(--field-error-outline); }

.consent-field {
  align-items: start;
  display: grid;
  gap: var(--space-3);
  grid-template-columns: var(--space-5) 1fr;
  min-height: var(--button-height);
}

.consent-field input {
  accent-color: var(--color-primary);
  block-size: var(--space-5);
  inline-size: var(--space-5);
  margin: var(--space-1) 0 0;
}

.consent-field__copy {
  color: var(--color-on-surface);
  font: var(--type-body-medium);
}

/* Content / feedback */
.card {
  background: var(--card-background);
  border: var(--border-width-strong) solid var(--card-outline);
  border-radius: var(--card-radius);
  color: var(--card-foreground);
}

.notice {
  border-radius: var(--shape-small);
  font: var(--type-body-medium);
  padding: var(--space-4);
}

.notice--success { background: var(--notice-success-background); color: var(--notice-success-foreground); }
.notice--error { background: var(--notice-error-background); color: var(--notice-error-foreground); }

.status-chip {
  align-items: center;
  background: var(--status-pending-background);
  border-radius: var(--shape-extra-small);
  color: var(--status-pending-foreground);
  display: inline-flex;
  font: var(--type-label-medium);
  min-height: var(--space-7);
  padding-inline: var(--space-2);
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}