/* Oncillo brand — electric mint on pure black.
   Monochromatic, dev-tool aesthetic. A single high-energy accent (#00ff88)
   does the work; the rest is restrained grayscale. */

:root,
html.dark,
.dark {
  /* Pure-black ground with a single-step surface for cards/panels. */
  --background:                 #000000;
  --foreground:                 #ededed;
  --card:                       #0a0a0a;
  --card-foreground:            #ededed;
  --popover:                    #0a0a0a;
  --popover-foreground:         #ededed;
  --secondary:                  #141414;
  --secondary-foreground:       #ededed;
  --muted:                      #141414;
  --muted-foreground:           #707070;
  --accent:                     #1a1a1a;
  --accent-foreground:          #ededed;
  --border:                     #1f1f1f;
  --input:                      #141414;
  --ring:                       #00ff88;

  /* "Primary" stays neutral so generic Tailwind buttons (bg-foreground)
     remain a clean white-on-black. Mint is reserved for the .btn-demo
     CTA below — that's what carries the brand. */
  --primary:                    #ededed;
  --primary-foreground:         #000000;

  /* True error red — semantic, only fires on validation/danger states. */
  --destructive:                #ef4444;
  --destructive-foreground:     #ffffff;

  /* Hero dot-grid */
  --grid-color:                 #0d0d0d;
  --grid-dot:                   #1f1f1f;

  /* Docs sidebar */
  --sidebar:                    #0a0a0a;
  --sidebar-foreground:         #ededed;
  --sidebar-primary:            #00ff88;
  --sidebar-primary-foreground: #000000;
  --sidebar-accent:             #1a1a1a;
  --sidebar-accent-foreground:  #ededed;
  --sidebar-border:             #1f1f1f;
  --sidebar-ring:               #00ff88;
}

/* Repaint the four arbitrary-color Tailwind selectors that were baked in
   for the homepage routing-demo widget (originally purple #A855F7). */
.text-\[\#A855F7\]        { color: #00ff88 !important; }
.bg-\[\#A855F7\]          { background-color: #00ff88 !important; }
.bg-\[\#A855F7\]\/20      { background-color: rgb(0 255 136 / 0.20) !important; }
.border-\[\#A855F7\]\/40  { border-color: rgb(0 255 136 / 0.40) !important; }

/* "See Demo" / primary CTA — single hot mint pill. Black text for max contrast. */
.btn-demo         { background-color: #00ff88 !important; color: #000000 !important; }
.btn-demo:hover   { background-color: #00cc6a !important; color: #000000 !important; }
.btn-demo svg     { color: #000000; }