/**
 * Hand of Fortuna — Mini Economy Design System v1.0.0
 *
 * Rules:
 * - rem / em / % only (no px)
 * - Container queries for responsive layout (no media queries)
 * - Semantic HTML; layout classes pair with <section>, <ul>, <article>, etc.
 * - All colours and spacing via CSS variables (--color-*, --space-*, etc.)
 */

:root {
  /* Colors — hex only here; use var(--color-*) everywhere else */
  --color-page: #0f1221;
  --color-panel: #171b2f;
  --color-card: #1f2440;
  --color-card-elevated: #282e4d;
  --color-input: #101426;
  --color-border: #343b61;
  --color-border-soft: #252b49;

  --color-text: #f7f8ff;
  --color-text-muted: #b8c0e0;
  --color-text-soft: #949ec7;

  --color-primary: #7b61ff;
  --color-primary-hover: #684fe0;
  --color-gold: #f5b942;
  --color-gold-hover: #ffd77a;
  --color-info: #35b7ff;
  --color-info-hover: #7dd2ff;
  --color-success: #35d07f;
  --color-warning: #ff9f43;
  --color-danger: #ff5c7a;

  --color-on-primary: #ffffff;
  --color-on-info: #071321;
  --color-on-gold: #1e1600;
  --color-on-light: #10122b;
  --color-on-dark: #ffffff;
  --color-on-success: #ffffff;

  --color-badge-active-bg: #153c2b;
  --color-badge-review-bg: #463317;
  --color-badge-error-bg: #4b1f2b;

  /* Typography */
  --font-family: Arial, "Segoe UI", system-ui, sans-serif;
  --font-size-base: 1rem;
  --font-size-sm: 0.875rem;
  --font-size-xs: 0.75rem;
  --font-size-2xs: 0.6875rem;
  --font-size-lg: 1.125rem;
  --font-size-xl: 1.25rem;
  --font-size-2xl: 1.375rem;
  --font-size-3xl: 1.5rem;
  --font-size-display: 3rem;
  --font-size-display-compact: 2.625rem;
  --font-size-h2: 2.125rem;
  --font-size-stat: 1.75rem;

  --line-height-base: 1.5;
  --line-height-tight: 1.1;
  --line-height-relaxed: 1.6;

  --letter-spacing-tight: -0.05em;
  --letter-spacing-heading: -0.03em;
  --letter-spacing-kicker: 0.12em;
  --letter-spacing-button: 0.04em;

  /* Spacing */
  --space-2xs: 0.25rem;
  --space-xs: 0.5rem;
  --space-sm: 0.75rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2.25rem;

  --page-padding-inline: 3.5rem;
  --page-padding-compact: 1.375rem;
  --lead-max-width: 56rem;
  --dialog-max-width: 27.5rem;

  /* Borders & radius */
  --border-width: 0.0625rem;
  --border-width-accent: 0.375rem;
  --radius-sm: 0.375rem;
  --radius-control: 0.625rem;
  --radius-card: 1rem;
  --radius-panel: 1.125rem;
  --radius-pill: 62.5rem;

  /* Control sizes */
  --toggle-width: 2.75rem;
  --toggle-height: 1.5rem;
  --toggle-knob: 1rem;
  --toggle-offset: 0.1875rem;
  --checkbox-size: 1.375rem;
}

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

body {
  margin: 0;
  container-type: inline-size;
  font-family: var(--font-family);
  font-size: var(--font-size-base);
  line-height: var(--line-height-base);
  color: var(--color-text);
  background: var(--color-page);
}

/* ── Typography ── */

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0 0 var(--space-sm);
  font-weight: 900;
  letter-spacing: var(--letter-spacing-heading);
  line-height: var(--line-height-tight);
}

h1 {
  font-size: var(--font-size-display);
  letter-spacing: var(--letter-spacing-tight);
}

h2 { font-size: var(--font-size-h2); }
h3 { font-size: var(--font-size-3xl); font-weight: 800; }

p {
  margin: 0 0 var(--space-md);
}

p:last-child {
  margin-bottom: 0;
}

small {
  font-size: var(--font-size-sm);
  color: var(--color-text-soft);
}

a {
  color: var(--color-info);
  font-weight: 700;
  text-decoration: underline;
}

a:hover {
  color: var(--color-info-hover);
}

ul,
ol {
  margin: 0 0 var(--space-md);
  padding-left: var(--space-lg);
}

ul:last-child,
ol:last-child {
  margin-bottom: 0;
}

strong {
  font-weight: 800;
}

code {
  font-family: inherit;
  font-size: 0.95em;
  color: var(--color-text-muted);
}

:focus-visible {
  outline: var(--border-width) solid var(--color-primary);
  outline-offset: var(--space-2xs);
}

/* ── Page layout ── */

.page-header {
  padding-block: 2.5rem 2.75rem;
  padding-inline: var(--page-padding-inline);
  border-bottom: var(--border-width) solid var(--color-border-soft);
}

.page-main {
  padding-block: var(--space-xl) 3.5rem;
  padding-inline: var(--page-padding-inline);
}

.section {
  margin-bottom: var(--space-xl);
}

.section-label {
  margin: 0 0 0.625rem;
  color: var(--color-text-soft);
  font-size: var(--font-size-sm);
}

.panel {
  background: var(--color-panel);
  border: var(--border-width) solid var(--color-border-soft);
  border-radius: var(--radius-panel);
  padding: var(--space-xl);
}

.layout-two-col {
  container-type: inline-size;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-xl);
}

@container (max-width: 45rem) {
  .layout-two-col {
    grid-template-columns: 1fr;
  }
}

@container (max-width: 43.75rem) {
  .page-header,
  .page-main {
    padding-inline: var(--page-padding-compact);
  }

  h1 {
    font-size: var(--font-size-display-compact);
  }

  .panel {
    padding: var(--page-padding-compact);
  }

  .spec-item,
  .color-spec,
  .component-spec {
    grid-template-columns: 1fr;
    gap: var(--space-sm);
  }
}

/* ── Screen pattern ── */

.screen {
  container-type: inline-size;
  container-name: screen;
  background: var(--color-page);
  border: var(--border-width) solid var(--color-border-soft);
  border-radius: var(--radius-panel);
  padding: 1.75rem;
}

.screen-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1.125rem;
  margin-bottom: var(--space-lg);
}

@container screen (max-width: 30rem) {
  .screen-header {
    flex-direction: column;
    align-items: flex-start;
  }
}

.screen-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.625rem;
  list-style: none;
  padding: 0;
  margin: 0;
}

/* ── Grids ── */

.stats-grid,
.card-grid {
  container-type: inline-size;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.125rem;
}

.stats-grid {
  gap: var(--font-size-sm);
  margin-bottom: 1.375rem;
  list-style: none;
  padding: 0;
}

@container (max-width: 28rem) {
  .stats-grid,
  .card-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@container (max-width: 18rem) {
  .stats-grid,
  .card-grid {
    grid-template-columns: 1fr;
  }
}

/* ── Typography helpers ── */

.kicker {
  margin: 0 0 var(--space-md);
  color: var(--color-gold);
  font-size: var(--font-size-sm);
  font-weight: 800;
  letter-spacing: var(--letter-spacing-kicker);
  text-transform: uppercase;
}

.lead {
  max-width: var(--lead-max-width);
  color: var(--color-text-muted);
  font-size: var(--font-size-lg);
  line-height: var(--line-height-relaxed);
}

.text-muted { color: var(--color-text-muted); }
.text-soft { color: var(--color-text-soft); }

.currency::before {
  content: "ð ";
}

/* ── Spec lists (showcase / docs) ── */

.spec-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

/* Showcase only — colour swatches in showcase.html */

.spec-item {
  display: grid;
  grid-template-columns: 9.375rem 10.625rem 1fr;
  gap: 1.75rem;
  align-items: center;
  padding-block: 1.375rem;
  min-height: 5.75rem;
  border-top: var(--border-width) solid var(--color-border-soft);
}

.spec-item:first-child {
  border-top: none;
}

.spec-name {
  color: var(--color-text-soft);
  font-size: var(--font-size-sm);
}

.spec-meta {
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
  line-height: var(--line-height-base);
}

.color-spec {
  display: grid;
  grid-template-columns: 8.125rem 9.375rem 1fr;
  gap: 1.75rem;
  align-items: center;
  padding-block: 1.125rem;
  min-height: 6rem;
  border-top: var(--border-width) solid var(--color-border-soft);
}

.color-spec:first-child {
  border-top: none;
}

.component-spec {
  display: grid;
  grid-template-columns: 9.375rem 1fr;
  gap: var(--space-lg);
  align-items: center;
  padding-block: 1.125rem;
  border-top: var(--border-width) solid var(--color-border-soft);
}

.component-spec:first-child {
  border-top: none;
}

/* ── Colour swatches (showcase) ── */

.color-chip {
  width: 7.1875rem;
  height: 3.75rem;
  border-radius: var(--radius-control);
  padding: 0.8125rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  font-size: var(--font-size-xs);
  font-weight: 800;
  border: var(--border-width) solid var(--color-border);
  margin: 0;
}

.color-chip small {
  font-size: 0.5625rem;
  font-weight: 700;
  color: inherit;
}

.color-chip--on-dark { color: var(--color-on-dark); }
.color-chip--on-light { color: var(--color-on-light); }

.color-chip--page { background: var(--color-page); }
.color-chip--panel { background: var(--color-panel); }
.color-chip--card { background: var(--color-card); }
.color-chip--card-elevated { background: var(--color-card-elevated); }
.color-chip--primary { background: var(--color-primary); }
.color-chip--gold { background: var(--color-gold); }
.color-chip--info { background: var(--color-info); }
.color-chip--success { background: var(--color-success); }
.color-chip--danger { background: var(--color-danger); }

.swatch-strip {
  display: flex;
  width: 7.1875rem;
  height: 0.625rem;
  margin-block: var(--space-xs) 0;
  padding: 0;
  list-style: none;
  border-radius: var(--radius-pill);
  overflow: hidden;
  border: var(--border-width) solid var(--color-border-soft);
}

.swatch-strip > li {
  flex: 1;
}

.swatch-strip--navy > li:nth-child(1) { background: var(--color-page); }
.swatch-strip--navy > li:nth-child(2) { background: var(--color-panel); }
.swatch-strip--navy > li:nth-child(3) { background: var(--color-card); }
.swatch-strip--navy > li:nth-child(4) { background: var(--color-card-elevated); }

.swatch-strip--purple > li:nth-child(1) { background: var(--color-primary); }
.swatch-strip--purple > li:nth-child(2) { background: #9c88ff; }
.swatch-strip--purple > li:nth-child(3) { background: #c2b8ff; }
.swatch-strip--purple > li:nth-child(4) { background: #28234b; }

.swatch-strip--gold > li:nth-child(1) { background: var(--color-gold); }
.swatch-strip--gold > li:nth-child(2) { background: var(--color-gold-hover); }
.swatch-strip--gold > li:nth-child(3) { background: #463317; }
.swatch-strip--gold > li:nth-child(4) { background: #241a0a; }

.swatch-strip--blue > li:nth-child(1) { background: var(--color-info); }
.swatch-strip--blue > li:nth-child(2) { background: var(--color-info-hover); }
.swatch-strip--blue > li:nth-child(3) { background: #12384d; }
.swatch-strip--blue > li:nth-child(4) { background: #0d2330; }

.swatch-strip--green > li:nth-child(1) { background: var(--color-success); }
.swatch-strip--green > li:nth-child(2) { background: #7de3ad; }
.swatch-strip--green > li:nth-child(3) { background: #153c2b; }
.swatch-strip--green > li:nth-child(4) { background: #0e251b; }

.swatch-strip--red > li:nth-child(1) { background: var(--color-danger); }
.swatch-strip--red > li:nth-child(2) { background: #ff91a6; }
.swatch-strip--red > li:nth-child(3) { background: #4b1f2b; }
.swatch-strip--red > li:nth-child(4) { background: #2e1119; }

/* ── Buttons ── */

button,
.button {
  border: 0;
  border-radius: var(--radius-control);
  background: var(--color-primary);
  color: var(--color-on-primary);
  padding: 0.6875rem var(--space-md);
  font-family: inherit;
  font-size: var(--font-size-2xs);
  font-weight: 800;
  letter-spacing: var(--letter-spacing-button);
  text-transform: uppercase;
  cursor: pointer;
}

button:hover,
.button:hover {
  background: var(--color-primary-hover);
}

button:disabled,
.button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.button--secondary {
  background: var(--color-card-elevated);
  color: var(--color-text);
  border: var(--border-width) solid var(--color-border);
}

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

.button--info {
  background: var(--color-info);
  color: var(--color-on-info);
}

.button--info:hover {
  background: var(--color-info-hover);
}

.button--gold {
  background: var(--color-gold);
  color: var(--color-on-gold);
}

.button--gold:hover {
  background: var(--color-gold-hover);
}

.button-group {
  display: flex;
  flex-wrap: wrap;
  gap: 0.625rem;
  list-style: none;
  padding: 0;
  margin: 0;
}

/* ── Forms ── */

label {
  display: block;
  margin-bottom: var(--space-xs);
  font-weight: 700;
  font-size: var(--font-size-sm);
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="url"],
input[type="search"],
textarea,
select,
.input {
  width: 100%;
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-control);
  padding: 0.6875rem var(--space-sm);
  font-family: inherit;
  font-size: var(--font-size-sm);
  color: var(--color-text);
  background: var(--color-input);
}

input::placeholder,
textarea::placeholder {
  color: var(--color-text-soft);
}

input:focus,
textarea:focus,
select:focus {
  outline: none;
  border-color: var(--color-primary);
}

fieldset {
  border: none;
  margin: 0;
  padding: 0;
}

legend {
  font-weight: 800;
  margin-bottom: 1.25rem;
}

.form-row {
  container-type: inline-size;
  display: flex;
  gap: var(--space-xs);
  margin-top: var(--font-size-sm);
}

@container (max-width: 25rem) {
  .form-row {
    flex-direction: column;
  }

  .form-row button {
    width: 100%;
  }
}

.toggle {
  appearance: none;
  width: var(--toggle-width);
  height: var(--toggle-height);
  border-radius: var(--radius-pill);
  background: var(--color-card-elevated);
  border: var(--border-width) solid var(--color-border);
  position: relative;
  cursor: pointer;
  vertical-align: middle;
}

.toggle::after {
  content: "";
  position: absolute;
  inset-block-start: var(--toggle-offset);
  inset-inline-start: var(--toggle-offset);
  width: var(--toggle-knob);
  height: var(--toggle-knob);
  border-radius: 50%;
  background: var(--color-text-muted);
  transition: transform 0.15s ease;
}

.toggle:checked {
  background: var(--color-success);
  border-color: var(--color-success);
}

.toggle:checked::after {
  transform: translateX(1.25rem);
  background: var(--color-on-success);
}

.checkbox {
  appearance: none;
  width: var(--checkbox-size);
  height: var(--checkbox-size);
  border-radius: var(--radius-sm);
  border: var(--border-width) solid var(--color-border);
  background: var(--color-input);
  cursor: pointer;
  vertical-align: middle;
}

.checkbox:checked {
  background-color: var(--color-success);
  border-color: var(--color-success);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 10'%3E%3Cpath fill='white' d='M1 5.2 4.2 8.4 11 1.6' stroke='white' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
}

/* ── Badges ── */

.badge {
  display: inline-block;
  border-radius: var(--radius-pill);
  padding: var(--space-2xs) 0.625rem;
  font-size: var(--font-size-xs);
  font-weight: 800;
}

.badge--active {
  background: var(--color-badge-active-bg);
  color: var(--color-success);
}

.badge--review {
  background: var(--color-badge-review-bg);
  color: var(--color-gold);
}

.badge--error {
  background: var(--color-badge-error-bg);
  color: var(--color-danger);
}

.badge--draft {
  background: var(--color-card-elevated);
  color: var(--color-text-muted);
}

/* ── Cards & stats ── */

.stat {
  background: var(--color-card);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-card);
  padding: 1.125rem;
  list-style: none;
}

.stat strong {
  display: block;
  font-size: var(--font-size-stat);
  margin-bottom: var(--space-2xs);
}

.stat span {
  color: var(--color-text-muted);
  font-size: var(--font-size-2xs);
}

.card {
  background: var(--color-card);
  border: var(--border-width) solid var(--color-border);
  border-block-start: var(--border-width-accent) solid var(--color-primary);
  border-radius: var(--radius-card);
  padding: 1.125rem;
}

.card h3 {
  margin-bottom: var(--space-2xs);
  font-size: var(--font-size-xl);
}

.card p {
  margin-bottom: var(--font-size-sm);
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
}

.card--gold { border-block-start-color: var(--color-gold); }
.card--info { border-block-start-color: var(--color-info); }
.card--success { border-block-start-color: var(--color-success); }
.card--warning { border-block-start-color: var(--color-warning); }
.card--danger { border-block-start-color: var(--color-danger); }

.member-list {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--space-sm);
}

.member-list > li {
  background: var(--color-card-elevated);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-pill);
  padding: 0.5625rem 0.8125rem;
  color: var(--color-text);
  font-size: var(--font-size-2xs);
  margin-bottom: var(--space-xs);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── Feedback ── */

.toast {
  display: inline-flex;
  align-items: center;
  background: var(--color-input);
  border: var(--border-width) solid var(--color-border);
  color: var(--color-text);
  padding: 0.625rem var(--font-size-sm);
  border-radius: var(--radius-control);
  font-size: var(--font-size-2xs);
}

.dialog {
  background: var(--color-card);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-card);
  padding: var(--space-lg);
  max-width: var(--dialog-max-width);
}

.dialog h3 {
  margin-bottom: var(--font-size-sm);
  font-size: var(--font-size-2xl);
}

.dialog p {
  margin-bottom: 1.375rem;
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-base);
}

.dialog-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.625rem;
  list-style: none;
  padding: 0;
  margin: 0;
}