/* Nivoria Atelier preset — optional third preset (approved 2026-10-08; ADR 0088,
   docs/ui/theme-experiments/nivoria-atelier.md). Loaded only when the resolved theme is this
   preset, together with <html data-nv-theme="atelier">.

   A preset is Nivoria-owned: this file owns Atelier's typography (self-hosted Fraunces +
   Figtree), the LIGHT shell, the warm surfaces, card/button radius and presentation.
   The brand/interaction tokens (accent scale, primary, selected row, focus, active nav) are
   DERIVED from the preset's or the tenant's two brand colours by
   nivoria.platform.visual_profiles and set on <html style>; the rules below read them, so a
   tenant brand recolours Atelier's interaction but never its foundation or a semantic tone.

   Never changed here: semantic colours (status, severity, risk, KPI glyph tones), layout,
   navigation, register/panel/modal structure and behaviour. */

@font-face {
  font-family: "Fraunces";
  src: url("../fonts/fraunces/fraunces-variable.woff2") format("woff2");
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Figtree";
  src: url("../fonts/figtree/figtree-variable.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

/* ── Foundation tokens ─────────────────────────────────────────────────────────────────── */
:root[data-nv-theme="atelier"] {
  --nv-font: Figtree, "Segoe UI", ui-sans-serif, -apple-system, BlinkMacSystemFont, sans-serif;
  --nv-font-display: Fraunces, Georgia, "Times New Roman", serif;

  --nv-ink: #15181d;
  --nv-ink-soft: #4d535c;
  --nv-surface: #f5f5f2;
  --nv-border: #dedbd3;
  --nv-border-soft: #e7e5df;
  --nv-border-hover: #d3cfc4;
  --nv-shadow: 0 1px 2px rgba(21, 24, 29, .04), 0 12px 32px -18px rgba(21, 24, 29, .18);

  /* Light shell: white sidebar with a hairline, quiet grey text (≥ 4.9:1 on white),
     gold section labels (5.8:1). */
  --nv-shell-bg: #ffffff;
  --nv-shell-text: #4d535c;
  --nv-shell-text-muted: #6b7079;
  --nv-shell-label: #7a6235;
  --nv-shell-copy: #4d535c;
  --nv-shell-help: #4d535c;
  --nv-shell-icon: #6b7079;
  --nv-shell-status-text: #6b7079;
  --nv-shell-status-bg: #f2f1ec;
  --nv-shell-tenant-logo-text: #e9dcc0;
  --nv-shell-tenant-logo-bg: var(--nv-teal-700, #1e4d4a);
  --nv-shell-pro-border: #ebe3d2;
  --nv-shell-pro-glow: transparent;
  --nv-shell-pro-badge-text: #7a6235;
  --nv-shell-pro-badge-bg: #ffffff;
  --nv-shell-pro-action-border: #d9d6cd;
  --nv-shell-pro-action-text: #15181d;
  --nv-shell-pro-action-bg: #ffffff;
  --nv-topbar-bg: rgba(245, 245, 242, .9);

  /* Login: flat deep-green hero (no photo), warm panel. */
  --nv-login-hero-image: none;
  --nv-login-page-bg: #f5f5f2;
  --nv-login-shell-bg: #f5f5f2;
  --nv-login-hero-tint: linear-gradient(90deg, rgba(30, 77, 74, .97) 0%, rgba(30, 77, 74, .94) 55%, rgba(30, 77, 74, .86) 100%);
  --nv-login-hero-shade: linear-gradient(180deg, rgba(18, 52, 50, 0) 0%, rgba(18, 52, 50, .25) 100%);
  --nv-login-rule-fade: linear-gradient(90deg, rgba(233, 220, 192, .9), rgba(233, 220, 192, .15));
  --nv-login-feature-border: rgba(233, 220, 192, .30);
  --nv-login-feature-bg: rgba(255, 255, 255, .06);
  --nv-login-feature-text: #f5f2ea;
  --nv-login-panel-bg: #f5f5f2;
  --nv-login-panel-edge: #f5f5f2;
  --nv-login-pro-text: #1e4d4a;
  --nv-pro-border: #d9c9a4;
}

/* ── Typography: Figtree for UI text, Fraunces for headings and key figures ────────────── */
[data-nv-theme="atelier"] body,
[data-nv-theme="atelier"] :is(button, input, select, textarea) { font-family: var(--nv-font); }
[data-nv-theme="atelier"] :is(
  .page-heading h1, .panel-header h2, .nv-detail-panel-title h2, .nv-panel-card-head h3,
  .status-card-copy strong, .login-card h1, .login-card h2, .hero-copy h1
) {
  font-family: var(--nv-font-display);
  font-weight: 500;
  letter-spacing: -.01em;
}
[data-nv-theme="atelier"] .page-heading h1 { letter-spacing: -.015em; }
/* Larger key figures in the approved KPI card family (same card, same structure). */
[data-nv-theme="atelier"] .status-card-copy strong { font-size: 24px; line-height: 1.1; }
[data-nv-theme="atelier"] :is(.eyebrow, .panel-kicker) { color: #7a6235; letter-spacing: .2em; font-weight: 600; }
[data-nv-theme="atelier"] .page-heading p { color: #4d535c; }

/* ── Light shell ───────────────────────────────────────────────────────────────────────── */
[data-nv-theme="atelier"] .sidebar { color: #15181d; border-right: 1px solid #e7e5df; }
[data-nv-theme="atelier"] .sidebar .nav-item:not(.nav-item--active):not(.nav-item--disabled):hover {
  color: #15181d;
  background: #f5f5f2;
}
[data-nv-theme="atelier"] .sidebar .nav-item--active {
  color: var(--nv-teal-800, #193f3d);
  font-weight: 600;
  background: var(--nv-teal-50, #eaf1ee);
  box-shadow: none;
}
[data-nv-theme="atelier"] .sidebar .nav-item--active .nav-icon { color: var(--nv-teal-800, #193f3d); }
/* Universal Navigation V2: groups and sub-items in the light shell. */
[data-nv-theme="atelier"] .sidebar :is(.nav-group-toggle, .nav-subitem):not(.nav-subitem--active):hover {
  color: #15181d;
  background: #f5f5f2;
}
[data-nv-theme="atelier"] .nav-group-toggle--current,
[data-nv-theme="atelier"] .nav-group-toggle--current .nav-icon { color: var(--nv-teal-800, #193f3d); font-weight: 600; }
[data-nv-theme="atelier"] .nav-group-toggle--current[aria-expanded="false"] .nav-group-chevron::before { background: var(--nv-teal-700, #1e4d4a); }
[data-nv-theme="atelier"] .nav-sub { border-left-color: #e7e5df; }
[data-nv-theme="atelier"] .nav-subitem--active {
  color: var(--nv-teal-800, #193f3d);
  font-weight: 600;
  background: var(--nv-teal-50, #eaf1ee);
  box-shadow: none;
}
[data-nv-theme="atelier"] .nav-section-label { font-weight: 600; letter-spacing: .18em; }
[data-nv-theme="atelier"] .tenant-card { background: #faf9f6; border-color: #e7e5df; box-shadow: none; }
[data-nv-theme="atelier"] .tenant-profile-trigger:hover::before { background: rgba(21, 24, 29, .03); }
[data-nv-theme="atelier"] .tenant-switch { color: #4d535c; background: #f2f1ec; }
[data-nv-theme="atelier"] .pro-card { background: #f5f2ea; }
[data-nv-theme="atelier"] .pro-card strong { font-family: var(--nv-font-display); font-weight: 500; }
[data-nv-theme="atelier"] .help-button:hover { background: #f5f5f2; }
[data-nv-theme="atelier"] .sidebar :is(a, button):focus-visible {
  outline: 2px solid var(--nv-focus-ring);
  outline-offset: 2px;
}
/* A tenant logo made only for dark backgrounds sits on a brand-dark plate (light shell). */
[data-nv-theme="atelier"] .app-brand-tenant-logo--plate { background: var(--nv-teal-900, #153634); }

/* ── Workspace: warm canvas, white cards with hairlines, soft long shadow ──────────────── */
[data-nv-theme="atelier"] :is(.status-card, .panel, .data-table-wrap) {
  border-color: #e7e5df;
  box-shadow: 0 1px 2px rgba(21, 24, 29, .04), 0 12px 32px -18px rgba(21, 24, 29, .18);
}
[data-nv-theme="atelier"] .status-card { border-radius: 22px; }
[data-nv-theme="atelier"] :is(.nv-detail-panel-head, .nv-panel-card) { border-color: #e7e5df; border-radius: 20px; }
[data-nv-theme="atelier"] .status-card--interactive:hover { border-color: var(--nv-border-hover); }
[data-nv-theme="atelier"] .status-card-label { color: #6b7079; letter-spacing: .14em; font-weight: 600; }

/* Pill actions: shape only (same height, padding and content). */
[data-nv-theme="atelier"] :is(.primary-button, .secondary-button, .danger-button) {
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
}
[data-nv-theme="atelier"] .primary-button { background: var(--nv-teal-700, #1e4d4a); box-shadow: none; }
[data-nv-theme="atelier"] .primary-button:hover { background: var(--nv-teal-800, #193f3d); }
[data-nv-theme="atelier"] .secondary-button { color: #15181d; border-color: #d9d6cd; }
[data-nv-theme="atelier"] .secondary-button:hover { background: #faf9f6; }
[data-nv-theme="atelier"] :is(.primary-button, .secondary-button, .danger-button, .nv-icon-button):focus-visible {
  outline: 3px solid var(--nv-focus-ring);
  outline-offset: 2px;
}

/* Registers: quiet white header, warm hairlines, active tab in the brand colour. */
[data-nv-theme="atelier"] .data-table th { color: #6b7079; background: #ffffff; font-weight: 600; letter-spacing: .12em; }
[data-nv-theme="atelier"] .data-table td { color: #4d535c; }
[data-nv-theme="atelier"] .data-table :is(th, td) { border-bottom-color: #efede7; }
[data-nv-theme="atelier"] .data-table tbody tr:hover { background: #faf9f6; }
[data-nv-theme="atelier"] .data-table-title { color: #15181d; }
[data-nv-theme="atelier"] .nv-tabs a:hover,
[data-nv-theme="atelier"] .nv-tabs a.is-active { color: var(--nv-teal-800, #193f3d); }

/* Top bar blends into the canvas. */
[data-nv-theme="atelier"] .topbar { border-bottom-color: #e7e5df; }
[data-nv-theme="atelier"] .global-search { background: #ffffff; border-color: #e7e5df; }

/* ── Login ─────────────────────────────────────────────────────────────────────────────── */
/* The diagonal follows the N: the light wedge runs top-left → bottom-right, like the letter's
   diagonal (Preben 2026-10-08). Mirrored skew anchored at the bottom, 8°, wide enough to give
   one clean edge that stays clear of the hero copy. login.css hides the wedge when stacked. */
[data-nv-theme="atelier"] .login-panel::before {
  left: -20px;
  width: 220px;
  transform-origin: bottom;
  transform: skewX(8deg);
}
/* The Atelier lockup is compact (symbol + serif wordmark), as in the mockup. */
[data-nv-theme="atelier"] .brand-lockup-image--hero { width: 200px; }
[data-nv-theme="atelier"] .brand-lockup-image--card { width: 170px; }
@media (max-width: 720px) {
  [data-nv-theme="atelier"] .brand-lockup-image--hero { width: 160px; }
}