cc-dashboard/web/src/styles/globals.css

@import url('https://api.fontshare.com/v2/css?f[]=satoshi@700,500,400&display=swap');
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500&display=swap');

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  :root {
    /* ── Light theme ─────────────────────────────────────────────── */
    --background:   0 0% 98%;
    --foreground:   222 47% 11%;

    --card:         0 0% 100%;
    --card-foreground: 222 47% 11%;

    --popover:      0 0% 100%;
    --popover-foreground: 222 47% 11%;

    /* Brand cyan */
    --primary:      191 91% 37%;
    --primary-foreground: 0 0% 100%;

    --secondary:    210 40% 94%;
    --secondary-foreground: 222 47% 11%;

    --muted:        210 40% 94%;
    --muted-foreground: 215 16% 47%;

    --accent:       191 91% 92%;
    --accent-foreground: 191 91% 25%;

    --destructive:  0 84% 60%;
    --destructive-foreground: 0 0% 100%;

    --border:       214 32% 88%;
    --input:        214 32% 88%;
    --ring:         191 91% 37%;

    --radius: 0.5rem;

    --sidebar-background: 210 40% 96%;
    --sidebar-foreground: 222 47% 11%;
    --sidebar-primary: 191 91% 37%;
    --sidebar-primary-foreground: 0 0% 100%;
    --sidebar-accent: 191 91% 92%;
    --sidebar-accent-foreground: 191 91% 25%;
    --sidebar-border: 214 32% 88%;
    --sidebar-ring: 191 91% 37%;

    /* Success / Warning */
    --success: 158 64% 40%;
    --warning: 38 92% 50%;
  }

  /* Dark theme — operational dashboard dark navy / cyan */
  .dark {
    --background:   226 49%  8%;   /* #0b1020 */
    --foreground:   220 40% 92%;   /* #dce4f4 */

    --card:         220 44% 10%;   /* #0f1629 panel L1 */
    --card-foreground: 220 40% 92%;

    --popover:      220 44% 12%;   /* #111c34 panel L2 */
    --popover-foreground: 220 40% 92%;

    /* Cyan accent #57c7ff */
    --primary:      200 100% 67%;
    --primary-foreground: 226 49% 8%;

    --secondary:    220 30% 14%;
    --secondary-foreground: 220 20% 75%;

    --muted:        220 30% 12%;
    --muted-foreground: 220 12% 52%;

    --accent:       220 30% 14%;
    --accent-foreground: 220 40% 92%;

    --destructive:  0 72% 51%;
    --destructive-foreground: 220 40% 98%;

    --border:       220 28% 17%;
    --input:        220 28% 17%;
    --ring:         200 100% 67%;

    /* Success / Warning */
    --success: 158 64% 52%;
    --warning: 38 92% 60%;
  }
}

@layer base {
  * {
    @apply border-border;
  }

  body {
    @apply bg-background text-foreground;
    font-family: 'Satoshi', 'Inter', system-ui, -apple-system, sans-serif;
    font-feature-settings: "rlig" 1, "calt" 1;
    -webkit-font-smoothing: antialiased;
  }

  /* Monospace for numeric values */
  .tabular-nums,
  [data-value],
  .kpi-value {
    font-family: 'JetBrains Mono', 'Fira Code', ui-monospace, monospace;
    font-variant-numeric: tabular-nums;
  }

  /* Thin scrollbar */
  ::-webkit-scrollbar { width: 4px; height: 4px; }
  ::-webkit-scrollbar-track { background: transparent; }
  ::-webkit-scrollbar-thumb {
    background: hsl(220 28% 20%);
    border-radius: 9999px;
  }
  ::-webkit-scrollbar-thumb:hover {
    background: hsl(220 28% 30%);
  }
}

/* ── Utility: panel glow on hover ─────────────────────────────────── */
@layer utilities {
  .panel-glow {
    box-shadow: 0 0 0 1px hsl(var(--border)), 0 4px 24px -4px hsl(226 49% 4% / 0.6);
  }
  .panel-glow-hover:hover {
    box-shadow: 0 0 0 1px hsl(200 100% 67% / 0.18), 0 8px 32px -4px hsl(200 100% 67% / 0.08);
  }
  .accent-glow {
    box-shadow: 0 0 16px -2px hsl(200 100% 67% / 0.35);
  }
}