@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 {
  --ng-orange:        #ee7203;
  --ng-orange-dark:   #b34e19;
  --ng-black:         #282727;
  --ng-pure-black:    #000000;
  --ng-white:         #ffffff;

  --ng-orange-90:     #f08522;
  --ng-orange-70:     #f4a25b;
  --ng-orange-50:     #f7be8d;
  --ng-orange-30:     #fbd9bc;
  --ng-orange-10:     #fef1e4;

  --ng-ink-100:       #282727;
  --ng-ink-80:        #525151;
  --ng-ink-60:        #7d7c7c;
  --ng-ink-40:        #a8a7a7;
  --ng-ink-20:        #d3d3d3;
  --ng-ink-10:        #e9e9e9;
  --ng-ink-05:        #f4f4f4;
  --ng-paper:         #ffffff;

  --ng-yellow:        #ffc53a;
  --ng-blue-light:    #4ea5d9;
  --ng-blue-dark:     #180494;
  --ng-green-dark:    #0c5200;
  --ng-purple:        #7254bb;
  --ng-pink:          #cc3e5c;
  --ng-green-light:   #54ad46;
  --ng-red-dark:      #9b0606;

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

  --fg-primary:       var(--ng-black);
  --fg-secondary:     #3a3a3a;
  --fg-muted:         #5a5a5a;
  --fg-on-dark:       var(--ng-white);

  --accent:           var(--ng-orange);
  --accent-hover:     var(--ng-orange-dark);
  --accent-text:      var(--ng-orange-dark);
  --accent-soft:      var(--ng-orange-10);

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

  --font-hausschrift: "Tisa Sans Pro", "Inria Sans", 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;

  --shadow-sm:     0 1px 2px rgba(40,39,39,.06), 0 1px 3px rgba(40,39,39,.08);
  --shadow-md:     0 4px 12px rgba(40,39,39,.08), 0 2px 4px rgba(40,39,39,.06);
  --shadow-lg:     0 16px 32px rgba(40,39,39,.10), 0 4px 8px rgba(40,39,39,.06);
  --shadow-orange: 0 12px 28px rgba(238,114,3,.35);

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

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

/* ===== Dark Mode ===== */
.ng-dark {
  color-scheme: dark;
  --surface:       #201e1e;
  --text:          #f3f1f0;
  --mark-bg:       var(--ng-orange);
  --code-bg:       #0e0d0d;
  --info-text:     #7cc4ec;
  --ng-ink-05:     #151414;
  --ng-ink-10:     #332f2f;
  --ng-ink-20:     #423d3d;
  --ng-ink-40:     #8f8b8b;
  --ng-ink-60:     #aaa6a6;
  --ng-ink-80:     #dad6d6;
  --ng-ink-100:    #f3f1f0;
  --fg-secondary:  #c4c1c1;
  --fg-muted:      #9c9898;
  --ng-orange-10:  rgba(238,114,3,.16);
  --ng-orange-dark: #f4a25b;
  --accent-text:   #f4a25b;
  --ng-green-dark: #74cf66;
  --ng-red-dark:   #ff7a7a;
  --shadow-sm:     0 1px 2px rgba(0,0,0,.45);
  --shadow-md:     0 6px 18px rgba(0,0,0,.55);
  --bg-canvas:     #151414;
  --bg-canvas-alt: #151414;
}

*, *::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-ink-05); 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; } }