/* ============================================================
   Orbita Publishing Portal – Design Tokens
   Light workspace, deep navy sidebar, cobalt accent.
   Fonts: Sora (display) · Manrope (text) · JetBrains Mono (code)
   ============================================================ */

:root {
  /* ── Fonts ── */
  --font-display: 'Sora', 'Manrope', ui-sans-serif, system-ui, sans-serif;
  --font-sans:    'Manrope', ui-sans-serif, system-ui, sans-serif;
  --font-heading: var(--font-display);
  --font-admin:   var(--font-sans);
  --font-mono:    'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;

  /* ── Palette ── */
  --navy-950: #061029;
  --navy-900: #0A1A3F;
  --navy-800: #10265A;
  --navy-700: #16347A;
  --navy-600: #1E4499;

  --blue-700: #1F49D9;
  --blue-600: #2A5BFF;
  --blue-500: #4A74FF;
  --blue-200: #C7D5FF;
  --blue-100: #E2EAFF;
  --blue-50:  #F1F5FF;

  --cyan-500: #22C3F0;
  --cyan-400: #4CD7FF;
  --cyan-100: #DDF6FF;

  --slate-900: #0F1B3D;
  --slate-700: #38466E;
  --slate-500: #5B6786;
  --slate-400: #8791AD;
  --slate-300: #B4BCD2;
  --slate-200: #D8DEEC;
  --slate-100: #E6EAF4;
  --slate-50:  #F3F5FA;

  /* ── Semantic: surfaces ── */
  --background:            #F9FAFC;
  --bg:                    var(--background);
  --foreground:            var(--slate-900);
  --card:                  #FFFFFF;
  --card-foreground:       var(--slate-900);
  --surface:               var(--card);
  --bg-card:               var(--card);
  --bg-inset:              #F3F5FA;
  --bg-input:              #FBFCFE;
  --popover:               #FFFFFF;
  --popover-foreground:    var(--slate-900);
  --hover-row:             #F6F8FE;
  /* orbita:dunkel - hover of menus and dropdowns: neutral and opaque
     (Orbita standard #f4f4f5 light, #2a2d32 dark), and the glass topbar */
  --menu-hover:            #F4F4F5;
  --topbar-bg:             rgba(249, 250, 252, 0.78);

  /* ── Semantic: brand ── */
  --primary:               var(--blue-600);
  --primary-hover:         var(--blue-700);
  --primary-foreground:    #FFFFFF;
  --primary-soft:          var(--blue-50);
  --primary-glow:          rgba(42, 91, 255, 0.28);
  --accent:                rgba(42, 91, 255, 0.08);
  --accent-foreground:     var(--blue-700);
  --accent2:               var(--cyan-500);
  --secondary:             var(--slate-50);
  --secondary-foreground:  var(--slate-900);
  --muted:                 var(--slate-50);
  --muted-foreground:      var(--slate-500);

  /* ── Semantic: text ── */
  --text:                  var(--slate-900);
  --text-muted:            var(--slate-500);
  --text-dim:              var(--slate-400);
  --text2:                 var(--slate-500);
  --text3:                 var(--slate-400);

  /* ── Semantic: lines ── */
  --border:                #E8ECF5;
  --border-strong:         #C9D3EA;
  --b2:                    var(--border);
  --input:                 var(--bg-input);
  --ring:                  rgba(42, 91, 255, 0.22);

  /* ── Status ── */
  --success:               #159A78;
  --success-soft:          #E3F6F0;
  --success-foreground:    #0B5F49;
  --warning:               #D97A06;
  --warning-soft:          #FDF1DF;
  --warning-foreground:    #7A4400;
  --error:                 #E0424A;
  --error-soft:            #FDE8EA;
  --error-foreground:      #8A1C22;
  --destructive:           var(--error);
  --destructive-foreground:#FFFFFF;
  --info:                  var(--blue-600);
  --info-soft:             var(--blue-50);
  --info-foreground:       var(--blue-700);
  --ok:                    var(--success);

  /* ── Legacy aliases used by older templates (keep until pages are rebuilt) ── */
  --gold:                  var(--blue-600);
  --border-gold:           rgba(42, 91, 255, 0.35);
  --lg-text:               var(--text);
  --lg-text-muted:         var(--text-muted);
  --lg-accent:             var(--blue-600);
  --lg-accent-soft:        var(--blue-50);
  --lg-border:             var(--border);
  --lg-border-strong:      var(--border-strong);
  --lg-bg-soft:            var(--slate-50);
  --lg-bg-muted:           var(--bg-inset);
  --lg-radius:             var(--radius);
  --lg-warning-bg:         var(--warning-soft);
  --lg-warning-border:     #F1C98C;
  --lg-danger-bg:          var(--error-soft);
  --lg-danger-border:      #F3B4B8;
  --max:                   1200px;
  --r:                     var(--radius);
  --s2:                    var(--space-2);
  --s3:                    var(--space-3);

  /* ── Radius ── */
  --radius-sm:   8px;
  --radius:      12px;
  --radius-md:   14px;
  --radius-lg:   18px;
  --radius-xl:   24px;
  --radius-full: 999px;

  /* ── Shadows (blue-tinted, layered) ── */
  --shadow-xs:  0 1px 2px rgba(15, 27, 61, 0.05);
  --shadow-sm:  0 1px 2px rgba(15, 27, 61, 0.04), 0 2px 6px rgba(15, 27, 61, 0.05);
  --shadow:     0 2px 4px rgba(15, 27, 61, 0.04), 0 10px 24px -8px rgba(15, 27, 61, 0.12);
  --shadow-lg:  0 8px 16px -6px rgba(15, 27, 61, 0.12), 0 28px 64px -24px rgba(15, 27, 61, 0.28);
  --shadow-glow: 0 0 0 1px rgba(42, 91, 255, 0.25), 0 8px 28px -8px rgba(42, 91, 255, 0.55);

  /* ── Spacing (4px base) ── */
  --space-1: 4px;  --space-2: 8px;   --space-3: 12px; --space-4: 16px;
  --space-5: 20px; --space-6: 24px;  --space-7: 28px; --space-8: 32px;
  --space-10: 40px; --space-12: 48px; --space-16: 64px;

  /* ── Layout ── */
  --sidebar-w: 268px;
  --topbar-h: 64px;
  --content-max: 1280px;

  /* Stacking order, named. The dropdown of a select has to sit ABOVE the
     dialog it is used in - otherwise it opens behind it and the click lands on
     the form underneath, which is exactly what happened with the book dialog:
     the list was there, 359x213, and unreachable. */
  --z-sticky: 100;
  --z-overlay: 800;
  --z-modal: 1000;
  --z-dropdown: 1200;   /* above modals, on purpose */
  --z-toast: 1400;      /* a toast has to be readable over everything */

  /* ── Motion ── */
  --ease-out:   cubic-bezier(0.16, 1, 0.3, 1);
  --ease-inout: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.4, 0.64, 1);
  --dur-fast:   150ms;
  --dur:        260ms;
  --dur-slow:   520ms;
}

/* orbita:dunkel 08.10.2026 - dark mode. The theme is chosen in the account
   menu (light, dark, system), stored in the cookie sp_theme and applied before
   the first paint by components/theme_kopf.html, which sets data-theme on
   <html>. Only the tokens change here; what is hard-coded in a component is
   corrected in dunkel.css. Palette after the Orbita kit (DESIGN-SYSTEM-
   BAUKASTEN, .dark): neutral graphite, #2a2d32 for hover, no pure black. */
:root { color-scheme: light; }
:root[data-theme="dark"] {
  color-scheme: dark;

  /* navy is used far more often as heading colour than as a surface; the
     few surfaces get their own colour back in dunkel.css */
  --navy-900: #E6EAF2;
  --navy-800: #C9D1DE;

  --slate-900: #E6EAF2;
  --slate-700: #C9D1DE;
  --slate-500: #9AA4B5;
  --slate-400: #7D8798;
  --slate-300: #5B6372;
  --slate-200: #3B4049;
  --slate-100: #2E3238;
  --slate-50:  #24272C;

  /* blue-700 is mostly text (labels, figures, badges): light on graphite.
     The few gradients that start or end in it get #1F49D9 back in dunkel.css */
  --blue-700: #9DB4FF;
  --blue-50:  #1E2640;
  --blue-100: #253055;
  --blue-200: #34437A;
  --cyan-100: #173A45;

  --background:            #191C1F;
  --card:                  #202328;
  --bg-inset:              #1C1F23;
  --bg-input:              #16181B;
  --popover:               #23262B;
  --hover-row:             #2A2D32;
  --menu-hover:            #2A2D32;
  --topbar-bg:             rgba(25, 28, 31, 0.82);

  /* links and labels in primary need a lighter blue on graphite (4.9:1);
     the button gradients use blue-500/600 directly and stay as they are */
  --primary:               #6088FF;
  --primary-hover:         #7C9CFF;
  --primary-soft:          #1E2640;
  --accent:                rgba(74, 116, 255, 0.16);
  --accent-foreground:     #9DB4FF;
  --muted-foreground:      var(--slate-500);

  --border:                #30343A;
  --border-strong:         #444A53;
  --ring:                  rgba(110, 145, 255, 0.40);

  --success:               #34C79C;
  --success-soft:          #15322A;
  --success-foreground:    #7FE3C3;
  --warning:               #F0A030;
  --warning-soft:          #362A14;
  --warning-foreground:    #F7C980;
  --error:                 #F0626A;
  --error-soft:            #3A1E22;
  --error-foreground:      #F8AAB0;
  --info-foreground:       #9DB4FF;

  --lg-warning-border:     #6A4E1E;
  --lg-danger-border:      #6B2D33;

  --shadow-xs:  0 1px 2px rgba(0, 0, 0, 0.30);
  --shadow-sm:  0 1px 2px rgba(0, 0, 0, 0.30), 0 2px 6px rgba(0, 0, 0, 0.25);
  --shadow:     0 2px 4px rgba(0, 0, 0, 0.30), 0 10px 24px -8px rgba(0, 0, 0, 0.45);
  --shadow-lg:  0 8px 16px -6px rgba(0, 0, 0, 0.45), 0 28px 64px -24px rgba(0, 0, 0, 0.65);
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur-fast: 1ms; --dur: 1ms; --dur-slow: 1ms; }
}