/* ============================================================
   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;

  /* ── 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;
}

/* The portal is a light product. The old dark theme toggle is retired; a
   dark attribute must not change anything until a dark palette exists. */
:root[data-theme="dark"] { color-scheme: light; }

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