/* ==========================================================================
   Nirmoka Studios — Color tokens
   Cinematic monochrome core (near-black ink on white / white on black),
   three jewel accents (blue, emerald, purple) used as small signals, and a
   single hot red reserved for primary calls-to-action.
   ========================================================================== */

:root {
  /* ---- Neutral ramp (zinc) — the spine of the system ------------------- */
  --neutral-0:    #ffffff;
  --neutral-50:   #fafafa;
  --neutral-100:  #f4f4f5;
  --neutral-200:  #e4e4e7;
  --neutral-300:  #d4d4d8;
  --neutral-400:  #a1a1aa;
  --neutral-500:  #71717a;
  --neutral-700:  #3f3f46;
  --neutral-900:  #18181b;
  --neutral-950:  #0a0a0a;

  /* ---- Brand marks — the logo's royal blue & golden sun --------------- */
  --brand-blue:       #2a3fcc;   /* triangle / wordmark blue              */
  --brand-blue-deep:  #2037c1;
  --brand-gold:       #ffd801;   /* the sun / eye gold                    */
  --brand-blue-soft:  #e8ebfb;
  --brand-gold-soft:  #fff7d1;

  /* ---- Brand accents — used sparingly, as signals --------------------- */
  --accent-blue:      #2563eb;
  --accent-emerald:   #059669;
  --accent-purple:    #7c3aed;

  /* Soft accent tints for badge / chip backgrounds (10% over white) */
  --accent-blue-soft:     #e9effd;
  --accent-emerald-soft:  #e6f4ef;
  --accent-purple-soft:   #f1ebfc;

  /* ---- Call-to-action red --------------------------------------------- */
  --cta:          #dc2626;  /* red-600 */
  --cta-hover:    #b91c1c;  /* red-700 */
  --cta-active:   #991b1b;  /* red-800 */

  /* ---- Status -------------------------------------------------------- */
  --destructive:            #ef4444;
  --destructive-foreground: #ffffff;

  /* ---- Semantic surfaces --------------------------------------------- */
  --background:        var(--neutral-0);
  --foreground:        var(--neutral-950);
  --surface-card:      var(--neutral-50);
  --surface-muted:     var(--neutral-100);
  --surface-inverse:   var(--neutral-950);   /* footer / dark sections     */
  --popover:           var(--neutral-0);

  /* ---- Semantic text -------------------------------------------------- */
  --text-primary:      var(--neutral-950);
  --text-muted:        var(--neutral-500);
  --text-on-inverse:   var(--neutral-50);
  --text-on-dark-muted: rgba(250, 250, 250, 0.70);

  /* ---- Lines & controls ----------------------------------------------- */
  --border:            var(--neutral-200);
  --border-strong:     var(--neutral-300);
  --input:             var(--neutral-100);
  --input-background:  var(--neutral-0);
  --ring:              var(--neutral-400);

  /* ---- Primary (the black button) ------------------------------------- */
  --primary:              var(--neutral-950);
  --primary-foreground:   var(--neutral-0);
  --secondary:            var(--neutral-100);
  --secondary-foreground: var(--neutral-950);

  /* ---- Darkroom — the warm amber/oxblood world of the Services lab ----- */
  --darkroom-bg-1:   #2d1810;
  --darkroom-bg-2:   #1a0f08;
  --darkroom-bg-3:   #0f0704;
  --darkroom-amber:  #fde68a;   /* amber-200 text on darkroom              */
  --darkroom-safelight: #7f1d1d; /* red-900 safelight glow                 */
}

/* ---- Dark mode — invert the monochrome core --------------------------- */
.dark {
  --background:       var(--neutral-950);
  --foreground:       var(--neutral-50);
  --surface-card:     #1a1a1a;
  --surface-muted:    #1a1a1a;
  --popover:          #1a1a1a;
  --text-primary:     var(--neutral-50);
  --text-muted:       var(--neutral-400);
  --border:           #27272a;
  --border-strong:    #3f3f46;
  --input:            #1a1a1a;
  --ring:             var(--neutral-500);
  --primary:              var(--neutral-50);
  --primary-foreground:   var(--neutral-950);
  --secondary:            #1a1a1a;
  --secondary-foreground: var(--neutral-50);
}