/* ============================================================
   NOTOVA — DESIGN SYSTEM 2026
   Editorial · Ink + Spark · Production tokens
   Single source of truth — drop into _content/.../css/notova.css
   ============================================================ */

/* === FONTS === */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Inter:wght@400;500;600;700&family=Newsreader:ital,opsz,wght@0,6..72,400;0,6..72,500;1,6..72,400&display=swap');

/* === ROOT TOKENS ======================================== */
:root {
    /* --- Brand: Ink (Midnight) --- */
    --nv-ink-900: #0C1424;   /* deepest — dark sections, footer */
    --nv-ink-800: #11203B;
    --nv-ink:     #16233D;   /* ★ brand primary */
    --nv-ink-700: #243653;
    --nv-ink-600: #38496A;
    --nv-ink-500: #55607A;   /* secondary text */
    --nv-ink-400: #8A91A1;   /* muted text */

    /* --- Brand: Spark (Amber/Gold) --- */
    --nv-spark-700: #B97F08;
    --nv-spark-600: #D08E00;  /* accent hover */
    --nv-spark:     #F0A500;  /* ★ brand accent — the spark */
    --nv-spark-400: #F7BC44;
    --nv-spark-200: #FBE0A6;
    --nv-spark-100: #FDF1D6;  /* tint surface */

    /* --- Warm neutral paper --- */
    --nv-paper:      #FAF8F4;  /* page background (warm white) */
    --nv-surface:    #FFFFFF;  /* cards */
    --nv-surface-2:  #F3F0EA;  /* subtle alt surface */
    --nv-border:     #E7E2D8;
    --nv-border-2:   #D8D2C5;  /* stronger border */

    /* --- Text --- */
    --nv-text:    var(--nv-ink);
    --nv-text-2:  var(--nv-ink-500);
    --nv-text-3:  var(--nv-ink-400);
    --nv-on-dark:     #F6F3EC;
    --nv-on-dark-2:   #AEB8CC;

    /* --- Semantic --- */
    --nv-success:   #1F8A5B;
    --nv-success-bg:#E6F3EC;
    --nv-danger:    #C0392B;
    --nv-danger-bg: #FBEAE7;
    --nv-info:      #2E6FB0;

    /* --- Gradients --- */
    --nv-grad-spark: linear-gradient(135deg, #F7BC44 0%, #F0A500 55%, #D08E00 100%);
    --nv-grad-ink:   linear-gradient(150deg, #213354 0%, #16233D 60%, #0C1424 100%);

    /* --- Typography --- */
    --nv-font-display: 'Space Grotesk', 'Inter', system-ui, sans-serif;
    --nv-font-sans:    'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --nv-font-serif:   'Newsreader', Georgia, 'Times New Roman', serif;

    --nv-t-xs:   0.75rem;    /* 12 */
    --nv-t-sm:   0.875rem;   /* 14 */
    --nv-t-base: 1rem;       /* 16 */
    --nv-t-lg:   1.125rem;   /* 18 */
    --nv-t-xl:   1.375rem;   /* 22 */
    --nv-t-2xl:  1.75rem;    /* 28 */
    --nv-t-3xl:  2.25rem;    /* 36 */
    --nv-t-4xl:  3rem;       /* 48 */
    --nv-t-5xl:  3.875rem;   /* 62 */
    --nv-t-6xl:  4.75rem;    /* 76 */

    /* --- Radius (editorial — restrained) --- */
    --nv-r-sm:  6px;
    --nv-r-md:  10px;
    --nv-r-lg:  14px;
    --nv-r-xl:  20px;
    --nv-r-2xl: 28px;
    --nv-r-full:999px;

    /* --- Shadows (soft, low spread) --- */
    --nv-sh-sm: 0 1px 2px rgba(22,35,61,.06), 0 1px 1px rgba(22,35,61,.04);
    --nv-sh-md: 0 4px 14px -2px rgba(22,35,61,.10);
    --nv-sh-lg: 0 18px 40px -14px rgba(22,35,61,.20);
    --nv-sh-spark: 0 10px 26px -8px rgba(240,165,0,.45);

    /* --- Motion --- */
    --nv-ease: cubic-bezier(.22,.61,.36,1);
    --nv-fast: 160ms var(--nv-ease);
    --nv-base: 280ms var(--nv-ease);

    /* --- Layout --- */
    --nv-maxw: 1200px;
    --nv-gutter: clamp(1rem, 4vw, 2.5rem);
}

/* === RESET / BASE ======================================= */
/* WICHTIG (Coding-Agent, 2026-06-01): notova.css wird GLOBAL in alle 6 bestehenden
   Blazor-Apps geladen. Der globale Reset des Prototyps (`* { margin:0; padding:0 }`,
   body{...}, h1-h5{...}) wuerde alle 261 bestehenden Razor-Seiten zerschiessen
   (Abstaende/Schriften/Hintergruende). Deshalb sind diese globalen Resets bewusst
   NICHT aktiv. Der visuelle Rebrand passiert seitenweise ueber die .nv-* Klassen +
   eine .notova-scope-Wrapper-Klasse, nicht als stiller globaler Nebeneffekt.
   Die :root-Tokens oben + die .nv-*-Komponentenklassen unten sind additiv & sicher.

   Wenn eine NEUE Seite das volle Notova-Base-Styling will, umschliesse sie mit
   <div class="notova-scope"> ... </div>. */

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

.notova-scope {
    font-family: var(--nv-font-sans);
    font-size: var(--nv-t-base);
    line-height: 1.6;
    color: var(--nv-text);
    background: var(--nv-paper);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.notova-scope h1, .notova-scope h2, .notova-scope h3, .notova-scope h4, .notova-scope h5 {
    font-family: var(--nv-font-display);
    font-weight: 600;
    line-height: 1.08;
    letter-spacing: -0.02em;
    color: var(--nv-ink);
    text-wrap: balance;
}

.notova-scope img { display: block; max-width: 100%; }

/* Selektion + Fokus duerfen global sein (rein kosmetisch, kein Layout-Impact) */
::selection { background: var(--nv-spark-200); color: var(--nv-ink-900); }

/* Kicker / eyebrow */
.nv-kicker {
    font-family: var(--nv-font-sans);
    font-size: var(--nv-t-xs);
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--nv-spark-700);
}

/* Editorial Page-Head (Design-Bundle px-head) — Kicker + H1 + Sub */
.nv-pagehead { padding: 2.5rem 0 1.75rem; max-width: 60ch; }
.nv-pagehead-h1 {
    font-family: var(--nv-font-display);
    font-size: clamp(1.9rem, 4vw, 3rem);
    line-height: 1.08; letter-spacing: -0.02em;
    color: var(--nv-ink); margin: 0.7rem 0 0; text-wrap: balance;
}
.nv-pagehead-sub {
    font-family: var(--nv-font-serif);
    font-size: 1.15rem; line-height: 1.55; color: var(--nv-ink-500);
    margin: 0.7rem 0 0; max-width: 52ch;
}
@media (max-width: 640px) { .nv-pagehead { padding: 1.75rem 0 1.25rem; } }

/* ============================================================
   BUTTONS
   ============================================================ */
.nv-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
    font-family: var(--nv-font-sans);
    font-size: var(--nv-t-sm);
    font-weight: 600;
    line-height: 1;
    padding: .8rem 1.35rem;
    border: 1px solid transparent;
    border-radius: var(--nv-r-full);
    cursor: pointer;
    white-space: nowrap;
    text-decoration: none;
    transition: transform var(--nv-fast), box-shadow var(--nv-base), background var(--nv-fast), border-color var(--nv-fast), color var(--nv-fast);
}
.nv-btn, .nv-btn:hover, .nv-btn:focus { text-decoration: none; }
.nv-btn:active { transform: translateY(1px) scale(.99); }
.nv-btn svg { width: 1.05em; height: 1.05em; }

.nv-btn--primary { background: var(--nv-ink); color: var(--nv-on-dark); box-shadow: var(--nv-sh-sm); }
.nv-btn--primary:hover { background: var(--nv-ink-800); box-shadow: var(--nv-sh-md); }

.nv-btn--spark { background: var(--nv-spark); color: var(--nv-ink-900); box-shadow: var(--nv-sh-spark); }
.nv-btn--spark:hover { background: var(--nv-spark-400); transform: translateY(-1px); }

.nv-btn--secondary { background: var(--nv-surface); color: var(--nv-ink); border-color: var(--nv-border-2); }
.nv-btn--secondary:hover { background: var(--nv-surface-2); border-color: var(--nv-ink-400); }

.nv-btn--ghost { background: transparent; color: var(--nv-ink); }
.nv-btn--ghost:hover { background: rgba(22,35,61,.06); }

.nv-btn--sm { padding: .55rem .95rem; font-size: var(--nv-t-xs); }
.nv-btn--lg { padding: 1rem 1.8rem; font-size: var(--nv-t-base); }

/* On dark surfaces */
.nv-on-ink .nv-btn--secondary { background: transparent; color: var(--nv-on-dark); border-color: rgba(255,255,255,.25); }
.nv-on-ink .nv-btn--secondary:hover { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.5); }

/* ============================================================
   CARDS
   ============================================================ */
.nv-card {
    background: var(--nv-surface);
    border: 1px solid var(--nv-border);
    border-radius: var(--nv-r-lg);
    box-shadow: var(--nv-sh-sm);
    transition: transform var(--nv-base), box-shadow var(--nv-base), border-color var(--nv-base);
}
.nv-card--pad { padding: 1.5rem; }
.nv-card--hover:hover { transform: translateY(-4px); box-shadow: var(--nv-sh-lg); border-color: var(--nv-border-2); }

/* ============================================================
   BADGES / TAGS / CHIPS
   ============================================================ */
.nv-badge {
    display: inline-flex; align-items: center; gap: .3rem;
    font-size: var(--nv-t-xs); font-weight: 600; line-height: 1;
    padding: .34rem .6rem;
    border-radius: var(--nv-r-full);
    white-space: nowrap;
}
.nv-badge--ink     { background: var(--nv-ink); color: var(--nv-on-dark); }
.nv-badge--spark   { background: var(--nv-spark-100); color: var(--nv-spark-700); }
.nv-badge--premium { background: var(--nv-grad-spark); color: var(--nv-ink-900); box-shadow: var(--nv-sh-sm); }
.nv-badge--success { background: var(--nv-success-bg); color: var(--nv-success); }
.nv-badge--outline { background: transparent; border: 1px solid var(--nv-border-2); color: var(--nv-text-2); }

/* Category label (uppercase micro) */
.nv-cat {
    font-size: var(--nv-t-xs); font-weight: 700;
    letter-spacing: .08em; text-transform: uppercase;
    color: var(--nv-spark-700);
}

/* Tag pill */
.nv-tag {
    font-size: var(--nv-t-xs); font-weight: 500;
    color: var(--nv-ink-600);
    background: var(--nv-surface-2);
    border: 1px solid var(--nv-border);
    padding: .25rem .6rem;
    border-radius: var(--nv-r-full);
    transition: background var(--nv-fast), color var(--nv-fast);
}
.nv-tag:hover { background: var(--nv-spark-100); color: var(--nv-spark-700); }

/* Chip (interactive nav) */
.nv-chip {
    display: inline-flex; align-items: center; gap: .4rem;
    font-size: var(--nv-t-sm); font-weight: 500;
    color: var(--nv-ink-600);
    background: var(--nv-surface);
    border: 1px solid var(--nv-border-2);
    padding: .5rem 1rem;
    border-radius: var(--nv-r-full);
    cursor: pointer;
    transition: all var(--nv-fast);
}
.nv-chip:hover { border-color: var(--nv-ink-400); color: var(--nv-ink); }
.nv-chip--active { background: var(--nv-ink); color: var(--nv-on-dark); border-color: var(--nv-ink); }

/* ============================================================
   INPUTS
   ============================================================ */
.nv-field { display: flex; flex-direction: column; gap: .45rem; }
.nv-label { font-size: var(--nv-t-sm); font-weight: 600; color: var(--nv-ink-700); }
.nv-input, .nv-textarea, .nv-select {
    width: 100%;
    font-family: var(--nv-font-sans);
    font-size: var(--nv-t-base);
    color: var(--nv-ink);
    background: var(--nv-surface);
    border: 1.5px solid var(--nv-border-2);
    border-radius: var(--nv-r-md);
    padding: .75rem .9rem;
    transition: border-color var(--nv-fast), box-shadow var(--nv-fast);
}
.nv-input::placeholder, .nv-textarea::placeholder { color: var(--nv-text-3); }
.nv-input:focus, .nv-textarea:focus, .nv-select:focus {
    outline: none;
    border-color: var(--nv-spark);
    box-shadow: 0 0 0 3px rgba(240,165,0,.18);
}
.nv-hint { font-size: var(--nv-t-xs); color: var(--nv-text-3); }

/* Search field with icon */
.nv-search {
    display: flex; align-items: center; gap: .55rem;
    background: var(--nv-surface);
    border: 1.5px solid var(--nv-border-2);
    border-radius: var(--nv-r-full);
    padding: .55rem 1rem;
    transition: border-color var(--nv-fast), box-shadow var(--nv-fast);
}
.nv-search:focus-within { border-color: var(--nv-spark); box-shadow: 0 0 0 3px rgba(240,165,0,.18); }
.nv-search svg { width: 1.1rem; height: 1.1rem; color: var(--nv-text-3); flex-shrink: 0; }
.nv-search input { border: none; outline: none; background: transparent; font-size: var(--nv-t-sm); width: 100%; color: var(--nv-ink); font-family: inherit; }

/* ============================================================
   IMAGE PLACEHOLDER (striped)
   ============================================================ */
.nv-ph {
    position: relative;
    background:
        repeating-linear-gradient(135deg, rgba(22,35,61,.045) 0 12px, rgba(22,35,61,.02) 12px 24px),
        var(--nv-surface-2);
    display: flex; align-items: center; justify-content: center;
    overflow: hidden;
}
.nv-ph::after {
    content: attr(data-label);
    font-family: ui-monospace, 'SF Mono', Menlo, monospace;
    font-size: .72rem; letter-spacing: .04em;
    color: var(--nv-text-3);
    padding: .3rem .6rem;
    background: rgba(255,255,255,.6);
    border-radius: var(--nv-r-sm);
    backdrop-filter: blur(2px);
}
.nv-ph--ink {
    background:
        repeating-linear-gradient(135deg, rgba(255,255,255,.05) 0 12px, rgba(255,255,255,.02) 12px 24px),
        var(--nv-ink-800);
}
.nv-ph--ink::after { color: var(--nv-on-dark-2); background: rgba(0,0,0,.25); }

/* Avatar */
.nv-avatar {
    border-radius: var(--nv-r-full);
    object-fit: cover;
    background: var(--nv-grad-ink);
    color: var(--nv-on-dark);
    display: inline-flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: .7rem;
    flex-shrink: 0;
}

/* ============================================================
   UTILITIES
   ============================================================ */
.nv-wrap { max-width: var(--nv-maxw); margin-inline: auto; padding-inline: var(--nv-gutter); }
.nv-stack { display: flex; flex-direction: column; }
.nv-row { display: flex; align-items: center; }
.nv-divider { height: 1px; background: var(--nv-border); border: none; }
.nv-muted { color: var(--nv-text-2); }
.nv-mono { font-family: ui-monospace, 'SF Mono', Menlo, monospace; }

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