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

@layer base {
  :root {
    /* Horizon theme tokens — chart colors validated on the dark surface */
    --void: #0a0b11;
    --surface: #11131c;
    --panel-glass: rgba(15, 17, 26, 0.72);
    --panel-line: rgba(226, 231, 245, 0.085);
    --grid: rgba(226, 231, 245, 0.07);
    --ink: #edeef3;
    --ink-2: #9aa0b0;
    --ink-3: #5d6373;
    --up: #2f9db2;
    --up-text: #6ec9db;
    --down: #e36a58;
    --down-text: #ef9182;
    --ember: #ff6a45; /* reserved: horizon, wordmark, top-pick */
  }

  body {
    background: var(--void);
    min-height: 100vh;
  }

  h1, h2, h3 {
    font-family: 'Space Grotesk', 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 starfield + soft rim-cyan / ember glows + film grain */
  #root {
    position: relative;
    min-height: 100vh;
  }

  #root::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: -2;
    background-image:
      radial-gradient(ellipse 60% 40% at 85% 0%, rgba(47, 157, 178, 0.05) 0%, transparent 55%),
      radial-gradient(ellipse 70% 30% at 50% 100%, rgba(228, 87, 61, 0.04) 0%, transparent 60%),
      radial-gradient(1px 1px at 12% 18%, rgba(237, 238, 243, 0.5) 50%, transparent 51%),
      radial-gradient(1px 1px at 68% 8%, rgba(237, 238, 243, 0.35) 50%, transparent 51%),
      radial-gradient(1.5px 1.5px at 84% 32%, rgba(159, 216, 232, 0.45) 50%, transparent 51%),
      radial-gradient(1px 1px at 33% 44%, rgba(237, 238, 243, 0.3) 50%, transparent 51%),
      radial-gradient(1px 1px at 91% 64%, rgba(237, 238, 243, 0.28) 50%, transparent 51%),
      radial-gradient(1.5px 1.5px at 22% 71%, rgba(237, 238, 243, 0.4) 50%, transparent 51%),
      radial-gradient(1px 1px at 55% 27%, rgba(255, 150, 120, 0.3) 50%, transparent 51%),
      radial-gradient(1px 1px at 45% 87%, rgba(237, 238, 243, 0.28) 50%, transparent 51%),
      radial-gradient(1px 1px at 76% 82%, rgba(159, 216, 232, 0.3) 50%, transparent 51%),
      radial-gradient(1px 1px at 5% 55%, rgba(237, 238, 243, 0.3) 50%, transparent 51%);
    background-size: 100% 100%, 100% 100%, 900px 700px, 900px 700px, 900px 700px, 900px 700px, 900px 700px, 900px 700px, 900px 700px, 900px 700px, 900px 700px, 900px 700px;
    background-repeat: no-repeat, no-repeat, repeat, repeat, repeat, repeat, repeat, repeat, repeat, repeat, repeat, repeat;
    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 {
  /* Mars horizon — fixed at the viewport bottom, atmosphere only, never data */
  .app-horizon {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    height: 22vh;
    z-index: -1;
    pointer-events: none;
    overflow: hidden;
  }
  .app-horizon-planet {
    position: absolute;
    left: 50%;
    top: 58%;
    width: 300vw;
    height: 300vw;
    transform: translateX(-50%);
    border-radius: 50%;
    background:
      radial-gradient(ellipse 55% 14% at 50% 0.4%, rgba(255, 120, 80, 0.22), transparent 60%),
      radial-gradient(ellipse 120% 26% at 50% 0%, #3f130b 0%, #260a06 32%, #130504 58%, #0a0b11 86%);
  }
  .app-horizon-rim {
    position: absolute;
    left: 50%;
    top: calc(58% - 2px);
    width: 300vw;
    height: 300vw;
    transform: translateX(-50%);
    border-radius: 50%;
    background: linear-gradient(180deg, rgba(213, 240, 250, 0.55), rgba(159, 216, 232, 0.16) 40%, transparent 60%);
    filter: blur(1px);
    box-shadow: 0 -14px 50px rgba(159, 216, 232, 0.1), 0 -50px 140px rgba(228, 87, 61, 0.08);
  }

  /* Panel — the core building block (kept class names so all components reskin).
     Denser than plain glass so the horizon glows between panels, not through them. */
  .glass {
    background: var(--panel-glass);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--panel-line);
    border-radius: 0.875rem;
  }

  .glass-sm {
    background: rgba(15, 17, 26, 0.6);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(226, 231, 245, 0.07);
    border-radius: 0.625rem;
  }

  .glass-hover {
    transition: all 0.2s ease;
  }
  .glass-hover:hover {
    background: rgba(21, 24, 35, 0.8);
    border-color: rgba(110, 201, 219, 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, #9fd8e8, #6ec9db);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
  }

  /* Primary button — luminous rim-cyan with ink text. */
  .btn-primary {
    background: #2f9db2;
    color: #06181c;
    border: 1px solid rgba(110, 201, 219, 0.5);
    border-radius: 0.5rem;
    font-weight: 600;
    transition: all 0.2s ease;
  }
  .btn-primary:hover:not(:disabled) {
    background: #4ab3c8;
    box-shadow: 0 0 20px rgba(79, 182, 203, 0.35);
  }

  /* Inputs */
  .input-glass {
    background: rgba(226, 231, 245, 0.04);
    border: 1px solid rgba(226, 231, 245, 0.12);
    border-radius: 0.5rem;
    color: #edeef3;
    transition: all 0.2s ease;
  }
  .input-glass::placeholder {
    color: rgba(154, 160, 176, 0.55);
  }
  .input-glass:focus {
    outline: none;
    border-color: rgba(110, 201, 219, 0.5);
    box-shadow: 0 0 0 3px rgba(47, 157, 178, 0.14);
    background: rgba(226, 231, 245, 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: #5d6373;
    text-transform: uppercase;
  }

  /* --- Horizon chart primitives (components/charts/horizon.tsx) --- */

  /* Price rail: stop → entry → now → target laid out spatially */
  .hz-rail { position: relative; height: 108px; margin: 34px 8px 4px; }
  .hz-rail-track {
    position: absolute; left: 0; right: 0; top: 50%; height: 1px;
    background: var(--grid);
  }
  .hz-rail-risk {
    position: absolute; top: calc(50% - 2px); height: 4px;
    background: rgba(227, 106, 88, 0.16); border-radius: 2px;
  }
  .hz-rail-progress {
    position: absolute; top: calc(50% - 2px); height: 4px;
    border-radius: 2px;
  }
  .hz-rail-mark { position: absolute; top: 0; bottom: 0; width: 0; }
  .hz-rail-tick {
    position: absolute; top: calc(50% - 7px); left: -1px;
    width: 2px; height: 14px; border-radius: 1px;
  }
  .hz-rail-dot {
    position: absolute; top: calc(50% - 6px); left: -6px;
    width: 12px; height: 12px; border-radius: 50%;
    border: 2px solid var(--surface);
    box-shadow: 0 0 0 1px var(--up), 0 0 14px rgba(110, 201, 219, 0.45);
  }
  .hz-rail-ring {
    position: absolute; top: calc(50% - 6px); left: -6px;
    width: 12px; height: 12px; border-radius: 50%;
    border: 2px solid var(--up); background: var(--void);
  }
  .hz-rail-label {
    position: absolute; top: calc(50% + 16px); left: 0; transform: translateX(-50%);
    display: flex; flex-direction: column; align-items: center; gap: 1px;
    white-space: nowrap;
  }
  .hz-rail-label-top { top: auto; bottom: calc(50% + 16px); }
  .hz-rail-label em {
    font-style: normal; font-family: 'IBM Plex Mono', monospace; font-size: 9.5px;
    letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-3);
  }
  .hz-rail-label b {
    font-family: 'IBM Plex Mono', monospace; font-weight: 500; font-size: 13px;
    color: var(--ink);
  }
  .hz-rail-label i {
    font-style: normal; font-family: 'IBM Plex Mono', monospace; font-size: 10.5px;
    color: var(--ink-2);
  }

  /* Diverging R-multiple bar */
  .hz-rbar { position: relative; height: 10px; }
  .hz-rbar-zero {
    position: absolute; left: 50%; top: -3px; bottom: -3px; width: 1px;
    background: var(--panel-line);
  }
  .hz-rbar-fill { position: absolute; top: 0; bottom: 0; }

  /* SVG level labels (trade chart) */
  .hz-tradechart { width: 100%; height: auto; display: block; }
  .hz-lvl { fill: var(--ink-3); font-family: 'IBM Plex Mono', monospace; font-size: 10px; }
  .hz-lvl-up { fill: var(--up-text); }
  .hz-lvl-down { fill: var(--down-text); }

  /* Strip a nested panel's own card chrome when it renders inside the
     unified drill-down panel (ticker page) — one casting, no card-in-card. */
  .hz-frameless > .glass {
    background: transparent;
    border: 0;
    border-radius: 0;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    padding: 0;
  }

  /* Radar fingerprint */
  .hz-radar-wrap { position: relative; display: inline-block; }
  .hz-radar-axis {
    fill: var(--ink-3); font-family: 'IBM Plex Mono', monospace; font-size: 9.5px;
    letter-spacing: 0.04em; text-transform: capitalize;
  }
  .hz-radar-axisval { fill: var(--ink-2); font-weight: 600; }
  .hz-radar-tip {
    position: absolute; transform: translate(-50%, calc(-100% - 12px));
    background: rgba(21, 24, 35, 0.96); border: 1px solid var(--panel-line);
    border-radius: 8px; padding: 6px 10px; white-space: nowrap;
    pointer-events: none; z-index: 5; box-shadow: 0 6px 24px rgba(0, 0, 0, 0.45);
    font-size: 12px;
  }
  .hz-radar-tip b { display: block; color: var(--ink); font-weight: 600; text-transform: capitalize; }
  .hz-radar-tip span { display: block; color: var(--up-text); font-size: 11px; margin-top: 1px; }

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