/* =============================================================================
   ACP design tokens — the whole visual identity, in one file.

   Every console and widget reads ONLY from these variables. Re-skinning for a
   white-label tenant is therefore a token override, never a CSS rewrite:

       :root[data-brand="acme"] { --acp-indigo: #0F766E; --acp-tint: #ECFDF5; }

   Two standing rules from the brief are encoded here rather than left to
   discipline:

   1. FRAMELESS. There are no card, border-box or shadow tokens, because the
      design language does not use them. Structure comes from hairline rules,
      tinted bands, big numerals and plain lists. A boxed layout reads as
      machine-generated, and the absence of the tokens is what keeps it out.
   2. Light and dark are both first-class. Every colour is defined on bare
      :root, and only redefined inside the dark blocks — so a token can never
      exist in one theme and not the other.
   ============================================================================= */

:root {
  /* --- brand ------------------------------------------------------------- */
  --acp-indigo:      #3D52A0;   /* primary */
  --acp-deep:        #2A3B7D;   /* primary, pressed/heading */
  --acp-tint:        #EEF1FB;   /* tinted band */

  /* --- ink & structure --------------------------------------------------- */
  --acp-ink:         #1F2438;   /* body text, headings */
  --acp-slate:       #6B7597;   /* secondary text, labels */
  --acp-line:        #E1E6F2;   /* hairline rules — the ONLY divider */
  --acp-paper:       #FFFFFF;   /* page ground */
  --acp-paper-2:     #F7F9FD;   /* alternate band */

  /* --- semantic ---------------------------------------------------------- */
  --acp-green:       #4E8F35;   /* healthy, approved, published */
  --acp-gold:        #B8862B;   /* attention, pending, degraded */
  --acp-coral:       #9A3B2C;   /* error, refused, broken */

  /* --- type -------------------------------------------------------------- */
  --acp-font-display: "Manrope", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --acp-font-body:    "Inter", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --acp-font-mono:    ui-monospace, "SF Mono", Menlo, monospace;

  --acp-size-hero:   clamp(2rem, 1.2rem + 2.6vw, 3.25rem);
  --acp-size-h1:     clamp(1.5rem, 1.1rem + 1.4vw, 2.125rem);
  --acp-size-h2:     1.25rem;
  --acp-size-body:   0.9375rem;
  --acp-size-small:  0.8125rem;
  --acp-size-micro:  0.6875rem;

  --acp-weight-regular: 400;
  --acp-weight-medium:  500;
  --acp-weight-bold:    700;
  --acp-weight-black:   800;

  /* --- rhythm ------------------------------------------------------------ */
  --acp-space-1: 0.25rem;  --acp-space-2: 0.5rem;   --acp-space-3: 0.75rem;
  --acp-space-4: 1rem;     --acp-space-5: 1.5rem;   --acp-space-6: 2rem;
  --acp-space-7: 3rem;     --acp-space-8: 4rem;

  --acp-rule:        1px solid var(--acp-line);
  --acp-rule-strong: 2px solid var(--acp-ink);
  --acp-radius:      3px;    /* inputs and controls only — never panels */
  --acp-max-width:   min(1400px, 96vw);
  --acp-transition:  140ms ease;
}

/* Dark theme: system preference, unless a choice is stamped on the root. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --acp-indigo:  #93A4E8;
    --acp-deep:    #B9C4F0;
    --acp-tint:    #1B2136;
    --acp-ink:     #EDF0F9;
    --acp-slate:   #A2ABC8;
    --acp-line:    #2C3350;
    --acp-paper:   #12162A;
    --acp-paper-2: #171C33;
    --acp-green:   #7CC45C;
    --acp-gold:    #E0AC4E;
    --acp-coral:   #E08471;
  }
}

/* Explicit choice wins in both directions. */
:root[data-theme="dark"] {
  --acp-indigo:  #93A4E8;
  --acp-deep:    #B9C4F0;
  --acp-tint:    #1B2136;
  --acp-ink:     #EDF0F9;
  --acp-slate:   #A2ABC8;
  --acp-line:    #2C3350;
  --acp-paper:   #12162A;
  --acp-paper-2: #171C33;
  --acp-green:   #7CC45C;
  --acp-gold:    #E0AC4E;
  --acp-coral:   #E08471;
}

/* =============================================================================
   Primitives. Frameless by construction: hairline rules and tinted bands only.
   ============================================================================= */

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

body {
  margin: 0;
  background: var(--acp-paper);
  color: var(--acp-ink);
  font-family: var(--acp-font-body);
  font-size: var(--acp-size-body);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, .acp-display {
  font-family: var(--acp-font-display);
  font-weight: var(--acp-weight-bold);
  color: var(--acp-ink);
  letter-spacing: -0.015em;
  margin: 0;
}
h1 { font-size: var(--acp-size-h1); }
h2 { font-size: var(--acp-size-h2); }

a { color: var(--acp-indigo); text-decoration: none; }
a:hover { text-decoration: underline; }

/* The eyebrow: a small uppercase label above a section. */
.acp-eyebrow {
  font-size: var(--acp-size-micro);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--acp-slate);
  font-weight: var(--acp-weight-bold);
}

/* A section is separated by a RULE, never enclosed by a border. */
.acp-section { padding: var(--acp-space-6) 0; border-top: var(--acp-rule); }
.acp-section:first-of-type { border-top: 0; }

/* A tinted band groups content without boxing it. */
.acp-band { background: var(--acp-tint); padding: var(--acp-space-5); }

/* Big numerals carry weight instead of a card. */
.acp-metric {
  font-family: var(--acp-font-display);
  font-weight: var(--acp-weight-black);
  font-size: var(--acp-size-hero);
  line-height: 1;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}
.acp-metric-label {
  font-size: var(--acp-size-small);
  color: var(--acp-slate);
  margin-top: var(--acp-space-1);
}

/* Plain hairline-separated lists — the workhorse layout. */
.acp-list { list-style: none; margin: 0; padding: 0; }
.acp-list > li {
  padding: var(--acp-space-3) 0;
  border-top: var(--acp-rule);
  display: flex; gap: var(--acp-space-4);
  align-items: baseline; justify-content: space-between;
}
.acp-list > li:first-child { border-top: 0; }

/* Columns with a hairline top rule express structure without a frame. */
.acp-cols { display: grid; gap: var(--acp-space-5); }
.acp-cols > .acp-col { border-top: var(--acp-rule-strong); padding-top: var(--acp-space-3); }
@media (min-width: 720px) {
  .acp-cols-2 { grid-template-columns: repeat(2, 1fr); }
  .acp-cols-3 { grid-template-columns: repeat(3, 1fr); }
  .acp-cols-4 { grid-template-columns: repeat(4, 1fr); }
}

/* Tables: rules only, no cell borders. Wide tables scroll inside themselves. */
.acp-table-wrap { overflow-x: auto; }
.acp-table { width: 100%; border-collapse: collapse; font-size: var(--acp-size-small); }
.acp-table th {
  text-align: left; font-size: var(--acp-size-micro); text-transform: uppercase;
  letter-spacing: 0.1em; color: var(--acp-slate); font-weight: var(--acp-weight-bold);
  padding: var(--acp-space-2) var(--acp-space-3) var(--acp-space-2) 0;
  border-bottom: var(--acp-rule-strong); white-space: nowrap;
}
.acp-table td {
  padding: var(--acp-space-3) var(--acp-space-3) var(--acp-space-3) 0;
  border-bottom: var(--acp-rule); vertical-align: top;
}
.acp-table tr:hover td { background: var(--acp-paper-2); }

/* Status: a coloured dot and a word. No pill, no badge, no box. */
.acp-status { display: inline-flex; align-items: center; gap: var(--acp-space-2);
              font-size: var(--acp-size-small); white-space: nowrap; }
.acp-status::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: var(--acp-slate); flex: none;
}
.acp-status[data-state="green"]::before,
.acp-status[data-state="published"]::before,
.acp-status[data-state="verified"]::before { background: var(--acp-green); }
.acp-status[data-state="amber"]::before,
.acp-status[data-state="draft"]::before,
.acp-status[data-state="pending"]::before { background: var(--acp-gold); }
.acp-status[data-state="red"]::before,
.acp-status[data-state="retired"]::before { background: var(--acp-coral); }

/* Controls. The only place a radius appears. */
.acp-btn {
  font: inherit; font-weight: var(--acp-weight-medium);
  padding: var(--acp-space-2) var(--acp-space-4);
  border: 1px solid var(--acp-indigo); border-radius: var(--acp-radius);
  background: var(--acp-indigo); color: var(--acp-paper);
  cursor: pointer; transition: var(--acp-transition);
}
.acp-btn:hover { background: var(--acp-deep); border-color: var(--acp-deep); }
.acp-btn:disabled { opacity: 0.45; cursor: not-allowed; }
.acp-btn-quiet { background: transparent; color: var(--acp-indigo); }
.acp-btn-quiet:hover { background: var(--acp-tint); color: var(--acp-deep); }
.acp-btn-danger { background: transparent; color: var(--acp-coral); border-color: var(--acp-coral); }
.acp-btn-danger:hover { background: var(--acp-coral); color: var(--acp-paper); }

.acp-input, .acp-select, .acp-textarea {
  font: inherit; width: 100%; color: var(--acp-ink);
  background: var(--acp-paper);
  padding: var(--acp-space-2) var(--acp-space-3);
  border: var(--acp-rule); border-radius: var(--acp-radius);
}
.acp-input:focus, .acp-select:focus, .acp-textarea:focus {
  outline: 2px solid var(--acp-indigo); outline-offset: 1px; border-color: var(--acp-indigo);
}
.acp-textarea { min-height: 9rem; resize: vertical; font-family: var(--acp-font-mono);
                font-size: var(--acp-size-small); line-height: 1.6; }
.acp-label { display: block; font-size: var(--acp-size-small);
             color: var(--acp-slate); margin-bottom: var(--acp-space-1); }

/* Layout chrome. */
.acp-shell { max-width: var(--acp-max-width); margin: 0 auto; padding: 0 var(--acp-space-5); }
.acp-topbar {
  display: flex; align-items: center; gap: var(--acp-space-5);
  padding: var(--acp-space-4) 0; border-bottom: var(--acp-rule-strong);
  flex-wrap: wrap;
}
.acp-brand { font-family: var(--acp-font-display); font-weight: var(--acp-weight-black);
             letter-spacing: -0.02em; font-size: 1.0625rem; }
.acp-brand span { color: var(--acp-slate); font-weight: var(--acp-weight-medium); }
.acp-nav { display: flex; gap: var(--acp-space-4); margin-left: auto; flex-wrap: wrap; }
.acp-nav a { color: var(--acp-slate); font-size: var(--acp-size-small);
             padding-bottom: 2px; border-bottom: 2px solid transparent; }
.acp-nav a:hover { color: var(--acp-ink); text-decoration: none; }
.acp-nav a[aria-current="page"] { color: var(--acp-ink); border-bottom-color: var(--acp-indigo); }

.acp-muted { color: var(--acp-slate); }
.acp-mono { font-family: var(--acp-font-mono); font-size: var(--acp-size-small); }
.acp-right { text-align: right; }
.acp-stack > * + * { margin-top: var(--acp-space-4); }
.acp-row { display: flex; gap: var(--acp-space-3); align-items: center; flex-wrap: wrap; }

/* Empty states carry meaning, so they are text and not an icon. */
.acp-empty { padding: var(--acp-space-6) 0; color: var(--acp-slate);
             text-align: center; font-size: var(--acp-size-small); }

/* Bilingual: exactly one language is visible, driven by the root attribute. */
[data-lang="de"] .l-en, [data-lang="en"] .l-de { display: none; }

.acp-toggle {
  display: inline-flex; border: var(--acp-rule); border-radius: var(--acp-radius);
  overflow: hidden;
}
.acp-toggle button {
  font: inherit; font-size: var(--acp-size-micro); letter-spacing: 0.08em;
  padding: 3px var(--acp-space-2); border: 0; background: transparent;
  color: var(--acp-slate); cursor: pointer;
}
.acp-toggle button[aria-pressed="true"] { background: var(--acp-indigo); color: var(--acp-paper); }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}