signal-platform/frontend/src/styles/globals.css

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

@layer base {
  body {
    background: #0e120f;
    min-height: 100vh;
  }

  h1, h2, h3 {
    font-family: 'Bricolage Grotesque', system-ui, sans-serif;
  }

  /* Number inputs: drop the native spinner arrows app-wide — they don't fit the
     dark glass UI. Values are typed; type=number still gives the numeric keypad
     on mobile and browser validation. */
  input[type='number']::-webkit-outer-spin-button,
  input[type='number']::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
  }
  input[type='number'] {
    -moz-appearance: textfield;
    appearance: textfield;
  }

  /* Atmosphere: faint graph-paper grid + citron signal glow + film grain */
  #root {
    position: relative;
    min-height: 100vh;
  }

  #root::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: -2;
    background:
      radial-gradient(ellipse 70% 50% at 15% 0%, rgba(196, 232, 46, 0.06) 0%, transparent 55%),
      radial-gradient(ellipse 50% 40% at 90% 90%, rgba(52, 211, 153, 0.04) 0%, transparent 50%),
      linear-gradient(rgba(223, 242, 178, 0.025) 1px, transparent 1px),
      linear-gradient(90deg, rgba(223, 242, 178, 0.025) 1px, transparent 1px);
    background-size: 100% 100%, 100% 100%, 48px 48px, 48px 48px;
    pointer-events: none;
  }

  /* Film grain — keeps large dark areas from feeling flat */
  #root::after {
    content: '';
    position: fixed;
    inset: 0;
    z-index: -1;
    opacity: 0.5;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.04 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    pointer-events: none;
  }
}

@layer components {
  /* Panel — the core building block (kept class names so all components reskin) */
  .glass {
    background: rgba(238, 240, 233, 0.035);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(223, 242, 178, 0.09);
    border-radius: 0.875rem;
  }

  .glass-sm {
    background: rgba(238, 240, 233, 0.028);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(223, 242, 178, 0.07);
    border-radius: 0.625rem;
  }

  .glass-hover {
    transition: all 0.2s ease;
  }
  .glass-hover:hover {
    background: rgba(238, 240, 233, 0.06);
    border-color: rgba(214, 242, 92, 0.22);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25);
  }

  /* Gradient text — reserved for the brand wordmark only */
  .text-gradient {
    background: linear-gradient(120deg, #d6f25c, #6ee7b7);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
  }

  /* Primary button — luminous citron with ink text. The signature element. */
  .btn-primary {
    background: #c3e82e;
    color: #16190a;
    border: 1px solid rgba(214, 242, 92, 0.5);
    border-radius: 0.5rem;
    font-weight: 600;
    transition: all 0.2s ease;
  }
  .btn-primary:hover:not(:disabled) {
    background: #d6f25c;
    box-shadow: 0 0 20px rgba(196, 232, 46, 0.35);
  }

  /* Inputs */
  .input-glass {
    background: rgba(238, 240, 233, 0.04);
    border: 1px solid rgba(223, 242, 178, 0.12);
    border-radius: 0.5rem;
    color: #eef0e9;
    transition: all 0.2s ease;
  }
  .input-glass::placeholder {
    color: rgba(149, 157, 135, 0.55);
  }
  .input-glass:focus {
    outline: none;
    border-color: rgba(214, 242, 92, 0.5);
    box-shadow: 0 0 0 3px rgba(196, 232, 46, 0.12);
    background: rgba(238, 240, 233, 0.06);
  }

  /* Numbers — every metric reads in tabular mono */
  .num {
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
    font-variant-numeric: tabular-nums;
  }

  /* Section index label, e.g. "01 / Watchlist" */
  .section-index {
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
    font-size: 0.65rem;
    letter-spacing: 0.18em;
    color: #6e7562;
    text-transform: uppercase;
  }

  /* Scrollbar styling */
  ::-webkit-scrollbar {
    width: 6px;
    height: 6px;
  }
  ::-webkit-scrollbar-track {
    background: transparent;
  }
  ::-webkit-scrollbar-thumb {
    background: rgba(223, 242, 178, 0.12);
    border-radius: 3px;
  }
  ::-webkit-scrollbar-thumb:hover {
    background: rgba(223, 242, 178, 0.22);
  }
}