@font-face {
  font-family: "Tisa Sans Pro";
  src: url("/fonts/TisaSansPro-Regular.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: "Tisa Sans Pro";
  src: url("/fonts/TisaSansPro-Regular.otf") format("opentype");
  font-weight: 700;
  font-style: normal;
}
@font-face {
  font-family: "Inria Sans";
  src: url("/fonts/InriaSans-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: "Inria Sans";
  src: url("/fonts/InriaSans-Italic.ttf") format("truetype");
  font-weight: 400;
  font-style: italic;
}
@font-face {
  font-family: "Inria Sans";
  src: url("/fonts/InriaSans-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
}
@font-face {
  font-family: "Inria Sans";
  src: url("/fonts/InriaSans-BoldItalic.ttf") format("truetype");
  font-weight: 700;
  font-style: italic;
}

:root {
  /* nAP AI accent — platform orange is never used on AI surfaces. */
  --nap-ai:           #67549f;
  --nap-ai-dark:      #56457f;
  --nap-ai-10:        #f0edf6;

  --ng-black:         #232323;
  --ng-pure-black:    #000000;
  --ng-white:         #ffffff;

  /* Neutral scale per the nAP light specification. */
  --ng-ink-100:       #232323;
  --ng-ink-80:        #525252;
  --ng-ink-60:        #6b6b6b;
  --ng-ink-40:        #9a9a9d;
  --ng-ink-20:        #d5d5da;
  --ng-ink-10:        #e5e5e5;
  --ng-ink-05:        #f4f4f6;
  --ng-page:          #fafafc;
  --ng-paper:         #ffffff;

  --ng-yellow:        #f5d547;
  --ng-blue-light:    #4ea5d9;
  --ng-blue-dark:     #0264c8;
  --ng-green-dark:    #3d6b00;
  --ng-purple:        var(--nap-ai);
  --ng-pink:          #cc3e5c;
  --ng-green-light:   #54ad46;
  --ng-red-dark:      #a41622;

  --nav:              var(--ng-paper);

  --bg-canvas:        var(--ng-paper);
  --bg-canvas-alt:    var(--ng-ink-05);
  --bg-inverted:      var(--ng-black);

  --fg-primary:       var(--ng-ink-100);
  --fg-secondary:     var(--ng-ink-80);
  --fg-muted:         var(--ng-ink-60);
  --fg-on-dark:       var(--ng-white);

  /* Resolved on :root, so a later palette override in .ng-dark never reaches them — every theme must restate them all. */
  --accent:           var(--nap-ai);
  --accent-hover:     var(--nap-ai-dark);
  --accent-text:      var(--nap-ai-dark);
  --accent-soft:      var(--nap-ai-10);
  --accent-ring:      rgba(103, 84, 159, .20);
  --accent-tint-18:   rgba(103, 84, 159, .18);

  /* Partial availability uses the warning token, not the accent — violet means brand, never warning. */
  --warn:             #f5d547;
  --warn-soft:        #fef9d7;
  --warn-fg:          #7a6100;

  /* --ng-red-dark fills surfaces under white text, --error-text writes on light or tinted ground. */
  --error-text:       var(--ng-red-dark);

  --border-subtle:    var(--ng-ink-10);
  --border-strong:    var(--ng-ink-20);

  --font-hausschrift: "Inria Sans", "Tisa Sans Pro", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-system:      "Segoe UI", ui-sans-serif, system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --font-mono:        ui-monospace, Menlo, Consolas, "SF Mono", monospace;

  /* Card shadows per the nAP light specification. */
  --shadow-sm:     4px 8px 24px 0 #f2f2f5;
  --shadow-md:     4px 12px 32px 0 #ededf0;
  --shadow-lg:     4px 16px 40px 0 #e8e8ee;
  --shadow-accent: 0 12px 28px rgba(103, 84, 159, .35);

  /* Theme surface tokens (light defaults) */
  --surface:       var(--ng-paper);
  --text:          var(--ng-ink-100);
  --mark-bg:       var(--accent);
  --code-bg:       var(--ng-black);
  --info-text:     #0a4c8c;

  --ease-standard: cubic-bezier(.4,0,.2,1);
}

/* ===== Dark Mode ===== */
.ng-dark {
  color-scheme: dark;
  --nav:           #232323;
  --surface:       #1a1a1b;
  --text:          #e8e8ea;
  --mark-bg:       var(--nap-ai);
  --code-bg:       #0f0f10;
  --info-text:     #7fbeec;
  --ng-page:       #0f0f10;
  --ng-ink-05:     #232323;
  --ng-ink-10:     #2e2e30;
  --ng-ink-20:     #3d3d40;
  --ng-ink-40:     #9a9a9d;
  --ng-ink-60:     #9a9a9d;
  --ng-ink-80:     #b5b5b8;
  --ng-ink-100:    #e8e8ea;
  --fg-secondary:  #b5b5b8;
  --fg-muted:      #9a9a9d;
  --accent-soft:   rgba(103, 84, 159, .28);
  --accent-text:   #a99ccb;
  --accent-ring:   rgba(169, 156, 203, .30);
  --fg-primary:    #e8e8ea;
  --border-subtle: #2e2e30;
  --border-strong: #3d3d40;
  --bg-inverted:   #232323;
  --ng-green-dark: #9fd356;
  --ng-red-dark:   #ee4358;
  --ng-blue-dark:  #4da3f2;
  --warn-soft:     rgba(245, 213, 71, .16);
  --warn-fg:       #f5d547;
  --error-text:    #f4606f;
  /* Dark mode separates by border, not by shadow. */
  --shadow-sm:     none;
  --shadow-md:     none;
  --shadow-lg:     none;
  --bg-canvas:     #1a1a1b;
  --bg-canvas-alt: #232323;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; height: 100%; }
body { font-family: var(--font-system); color: var(--text); background: var(--ng-page); transition: background .25s var(--ease-standard), color .25s var(--ease-standard); }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--ng-ink-20); border-radius: 6px; border: 2px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-track { background: transparent; }

@keyframes ngspin { to { transform: rotate(360deg); } }
@keyframes ngfade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* Indeterminate progress: a stripe sweeping the full track. Used where the duration is
   genuinely unknown (server-side embedding reports only its final outcome), so a percentage
   would have to be invented. The stripe is 40% of the track, hence 250% to clear it fully. */
@keyframes ngsweep { from { transform: translateX(-100%); } to { transform: translateX(250%); } }