/* Noro Design-System · Richtung "Signal" · v0.1 (2026-10-09)
 *
 * Eine Datei: Tokens, Grundstil, Komponenten. Präfix --n-* für Tokens, .n-* für Klassen.
 * Schriften: Barlow Condensed (Display), Barlow (Text), JetBrains Mono (Daten).
 * Sie werden von der einbindenden Seite geladen, siehe design-system/README.md.
 */

/* ---------- Tokens ---------- */
:root {
  /* Farben: Baustelle und Bauplan. Orange ist Signal, nie Fläche für Fließtext. */
  --n-concrete: #DCDDD8;      /* Beton: Grundfläche */
  --n-concrete-deep: #CDCEC8; /* Beton dunkler: Trennflächen, Hover auf Beton */
  --n-white: #F7F7F5;         /* Kalkweiß: Karten, Formulare */
  --n-ink: #111315;           /* Tinte: Text, dunkle Flächen */
  --n-ink-soft: #1D2023;      /* Tinte weich: Karten auf dunkler Fläche */
  --n-grey: #6E7275;          /* Markierung: Nebentext, Maßteilung */
  --n-grey-light: #A9ADB0;    /* Nebentext auf Tinte */
  --n-line: rgba(17, 19, 21, .14);
  --n-line-dark: #33373B;
  --n-orange: #EE5A1F;        /* Signalorange (nahe RAL 2004): Akzent, Status, Pfeile */
  --n-orange-text: #B8410E;   /* Orange für kleine Schrift auf Hell (Kontrast 4.9:1 auf Kalkweiß) */

  /* Status: getrennt vom Akzent */
  --n-ok: #2E8B57;
  --n-warn: #C98A06;
  --n-crit: #C62F3A;

  /* Schrift */
  --n-font-display: "Barlow Condensed", "Arial Narrow", "Helvetica Neue", sans-serif;
  --n-font-body: "Barlow", system-ui, -apple-system, "Segoe UI", sans-serif;
  --n-font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* Schriftgrößen (Faktor ~1.33) */
  --n-text-xs: 12px;
  --n-text-sm: 14px;
  --n-text-md: 16px;
  --n-text-lg: 19px;
  --n-text-xl: 24px;
  --n-text-2xl: 32px;
  --n-text-3xl: 44px;
  --n-text-4xl: clamp(44px, 7vw, 76px);
  --n-text-5xl: clamp(46px, 7.4vw, 92px);

  /* Abstände: 4er-Raster, das Hintergrundraster ist 24 px */
  --n-space-1: 4px;
  --n-space-2: 8px;
  --n-space-3: 12px;
  --n-space-4: 16px;
  --n-space-5: 24px;
  --n-space-6: 32px;
  --n-space-7: 48px;
  --n-space-8: 64px;
  --n-space-9: 96px;
  --n-grid: 24px;

  /* Form: Signal ist eckig. Radius nur für App-Icon und Statuspunkte. */
  --n-radius: 0;
  --n-radius-icon: 22.5%;
  --n-border: 1px solid var(--n-line);
  --n-rule-accent: 3px solid var(--n-orange);
  --n-shadow: 0 1px 0 rgba(17, 19, 21, .06), 0 12px 32px -18px rgba(17, 19, 21, .35);

  --n-measure: 62ch;
  --n-container: 1200px;
  --n-ease: cubic-bezier(.2, .7, .2, 1);
}

/* ---------- Grundstil ---------- */
.n-root *, .n-root *::before, .n-root *::after { box-sizing: border-box; }
.n-root {
  color-scheme: light;
  background: var(--n-concrete);
  color: var(--n-ink);
  font: 400 var(--n-text-md)/1.55 var(--n-font-body);
  -webkit-font-smoothing: antialiased;
}
.n-root h1, .n-root h2, .n-root h3 { margin: 0; text-wrap: balance; }
.n-root p { margin: 0; }
.n-root a:not([class]) { color: inherit; }
.n-root :focus-visible { outline: 2px solid var(--n-orange); outline-offset: 2px; }

/* Bauplan-Raster als Hintergrund */
.n-grid-bg {
  background-color: var(--n-concrete);
  background-image:
    linear-gradient(rgba(17, 19, 21, .06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(17, 19, 21, .06) 1px, transparent 1px);
  background-size: var(--n-grid) var(--n-grid);
}
.n-dark { background: var(--n-ink); color: var(--n-white); }
.n-dark .n-meta, .n-dark .n-muted { color: var(--n-grey-light); }

.n-container { max-width: var(--n-container); margin-inline: auto; }

/* ---------- Typografie ---------- */
.n-display {
  font: 700 var(--n-text-5xl)/1 var(--n-font-display);
  text-transform: uppercase;
  letter-spacing: .005em;
}
.n-h1 { font: 700 var(--n-text-4xl)/1 var(--n-font-display); text-transform: uppercase; }
.n-h2 { font: 700 var(--n-text-3xl)/1 var(--n-font-display); text-transform: uppercase; }
.n-h3 { font: 600 var(--n-text-xl)/1.15 var(--n-font-display); text-transform: uppercase; letter-spacing: .01em; }
.n-lead { font-size: var(--n-text-lg); line-height: 1.5; max-width: var(--n-measure); }
.n-muted { color: var(--n-grey); }
.n-accent { color: var(--n-orange); }
.n-meta {
  font: 400 var(--n-text-xs)/1.3 var(--n-font-mono);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--n-grey);
}
.n-eyebrow {
  display: inline-flex; align-items: center; gap: var(--n-space-2);
  font: 500 var(--n-text-xs)/1 var(--n-font-mono);
  letter-spacing: .12em; text-transform: uppercase;
}
.n-eyebrow::before { content: ""; width: 8px; height: 8px; background: var(--n-orange); }
.n-num { font-family: var(--n-font-mono); font-variant-numeric: tabular-nums; }

/* ---------- Buttons ---------- */
.n-btn {
  display: inline-flex; align-items: center; gap: var(--n-space-2);
  font: 600 var(--n-text-sm)/1 var(--n-font-mono);
  letter-spacing: .08em; text-transform: uppercase; text-decoration: none;
  padding: 16px 20px; border: 1px solid var(--n-ink);
  background: var(--n-ink); color: var(--n-white); cursor: pointer;
  transition: background .2s var(--n-ease), color .2s var(--n-ease), transform .2s var(--n-ease);
}
.n-btn::after { content: "→"; color: var(--n-orange); transition: transform .2s var(--n-ease); }
.n-btn:hover::after { transform: translateX(3px); }
.n-btn--signal { background: var(--n-orange); border-color: var(--n-orange); color: var(--n-ink); }
.n-btn--signal::after { color: var(--n-ink); }
.n-btn--ghost { background: transparent; color: var(--n-ink); }
.n-dark .n-btn--ghost { color: var(--n-white); border-color: var(--n-grey); }
.n-btn--plain::after { content: none; }

/* ---------- Chips und Status ---------- */
.n-chip {
  display: inline-flex; align-items: center; gap: 6px;
  font: 500 11px/1 var(--n-font-mono); letter-spacing: .08em; text-transform: uppercase;
  padding: 6px 8px; border: 1px solid currentColor;
}
.n-chip--signal { color: var(--n-orange-text); }
.n-dark .n-chip--signal { color: var(--n-orange); }
.n-chip--ok { color: var(--n-ok); }
.n-chip--warn { color: var(--n-warn); }
.n-chip--crit { color: var(--n-crit); }
.n-led {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--n-led, var(--n-ok)); box-shadow: 0 0 10px var(--n-led, var(--n-ok));
}
@media (prefers-reduced-motion: no-preference) {
  .n-led { animation: n-pulse 2.8s ease-in-out infinite; }
}
@keyframes n-pulse { 50% { opacity: .4; } }

/* ---------- Vorgangskarte: das zentrale Format, wie Noro etwas meldet ---------- */
.n-ticket {
  background: var(--n-white); border: var(--n-border); box-shadow: var(--n-shadow);
  display: grid; gap: 0; font: 400 var(--n-text-sm)/1.45 var(--n-font-mono); min-width: 0;
}
.n-ticket__head {
  display: flex; justify-content: space-between; align-items: center; gap: var(--n-space-3);
  padding: 12px 14px; border-bottom: var(--n-border);
}
.n-ticket__title { font: 600 var(--n-text-lg)/1.2 var(--n-font-display); text-transform: uppercase; padding: 12px 14px 4px; }
.n-ticket__rows { display: grid; padding: 4px 14px 12px; }
.n-ticket__row {
  display: flex; justify-content: space-between; gap: var(--n-space-4);
  padding: 7px 0; border-bottom: 1px dashed var(--n-line);
}
.n-ticket__row > :first-child { color: var(--n-grey); }
.n-ticket__row > :last-child { text-align: right; min-width: 0; overflow-wrap: anywhere; }
.n-ticket__acts { display: flex; flex-wrap: wrap; gap: var(--n-space-2); padding: 0 14px 14px; }
.n-ticket__act {
  font: 500 12px/1 var(--n-font-mono); letter-spacing: .04em;
  padding: 9px 11px; border: 1px solid var(--n-line); background: transparent; color: inherit; cursor: pointer;
}
.n-ticket__act--primary { background: var(--n-orange); border-color: var(--n-orange); color: var(--n-ink); }
.n-dark .n-ticket, .n-ticket--dark { background: var(--n-ink-soft); border-color: var(--n-line-dark); color: var(--n-white); box-shadow: none; }
.n-ticket--dark .n-ticket__head, .n-dark .n-ticket__head { border-color: var(--n-line-dark); }
.n-ticket--dark .n-ticket__row, .n-dark .n-ticket__row { border-color: var(--n-line-dark); }
.n-ticket--dark .n-ticket__row > :first-child, .n-dark .n-ticket__row > :first-child { color: var(--n-grey-light); }
.n-ticket--dark .n-ticket__act, .n-dark .n-ticket__act { border-color: #4A4F54; }

/* ---------- Fläche und Liste ---------- */
.n-panel { background: var(--n-white); border: var(--n-border); padding: var(--n-space-5); min-width: 0; }
.n-panel--rule { border-top: var(--n-rule-accent); }
.n-spec { display: grid; font: 400 var(--n-text-sm)/1.45 var(--n-font-mono); }
.n-spec > div { display: grid; grid-template-columns: minmax(110px, 38%) 1fr; gap: var(--n-space-4); padding: 10px 0; border-bottom: var(--n-border); }
.n-spec > div > :first-child { color: var(--n-grey); text-transform: uppercase; font-size: var(--n-text-xs); letter-spacing: .08em; padding-top: 2px; }
.n-dark .n-spec > div { border-color: var(--n-line-dark); }

/* Maßteilung wie auf dem Zollstock, als Trenner */
.n-ruler {
  height: 12px;
  background:
    repeating-linear-gradient(90deg, currentColor 0 1px, transparent 1px var(--n-space-2)) 0 0 / 100% 5px no-repeat,
    repeating-linear-gradient(90deg, currentColor 0 1px, transparent 1px calc(var(--n-space-2) * 5)) 0 0 / 100% 12px no-repeat;
  color: var(--n-grey); opacity: .7;
}

/* ---------- Formular ---------- */
.n-field { display: grid; gap: 6px; }
.n-label { font: 500 var(--n-text-xs)/1 var(--n-font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--n-grey); }
.n-input {
  font: 400 var(--n-text-md)/1.4 var(--n-font-body); color: var(--n-ink);
  background: var(--n-white); border: 1px solid var(--n-line); border-bottom: 2px solid var(--n-ink);
  padding: 12px 12px; width: 100%; border-radius: 0;
}
.n-input:focus { outline: none; border-bottom-color: var(--n-orange); background: #fff; }
.n-dark .n-input { background: var(--n-ink-soft); color: var(--n-white); border-color: var(--n-line-dark); border-bottom-color: var(--n-grey-light); }

/* ---------- Gerät: Mac mini (Modell 2026) in Frontansicht ---------- */
.n-device {
  width: min(200px, 100%); aspect-ratio: 127 / 50; position: relative;
  border-radius: 12% / 30%;
  background:
    radial-gradient(circle at 78% 54%, #FFFFFF 0 2px, transparent 3px),
    radial-gradient(circle at 86% 54%, #2A2D31 0 3px, transparent 3.5px),
    linear-gradient(180deg, #F1F2F4 0%, #DADDE2 55%, #C4C8CF 100%);
  box-shadow: 0 6px 0 -2px #1C1F22, 0 22px 36px -22px rgba(17, 19, 21, .6), inset 0 1px 0 rgba(255, 255, 255, .9);
}
/* zwei USB-C-Anschlüsse links */
.n-device::before {
  content: ""; position: absolute; left: 22%; top: 42%; width: 3px; height: 22%; border-radius: 2px;
  background: #2A2D31; box-shadow: 14px 0 0 #2A2D31;
}
/* Netzwerkkabel in Signalorange als Markenakzent */
.n-device::after {
  content: ""; position: absolute; right: -14%; top: 58%; width: 16%; height: 3px; border-radius: 2px;
  background: var(--n-orange);
}

@media (prefers-reduced-motion: reduce) {
  .n-root *, .n-root *::before, .n-root *::after { transition: none !important; animation: none !important; }
}