/* ============================================================
   NITROW — Colors & Type Foundation
   Source: nomad-lab-dev/NitrowDashboard — LandingPage/index.html
   The marketing/landing brand is the canonical Nitrow brand.
   The dashboard uses a lighter shadcn-based variant; see below.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Outfit:wght@300;400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500;700&display=swap');

:root {
  /* ── CORE PALETTE (Landing / Brand — dark) ───────────────── */
  --nitrow-black:        #030305; /* Deepest void — body bg */
  --nitrow-charcoal:     #0F0F11; /* Elevated surface */
  --nitrow-panel:        #18181B; /* Card bg */
  --nitrow-panel-2:      #09090B; /* Deeper card (Benefits stack) */
  --nitrow-border:       #27272A; /* Subtle borders */
  --nitrow-border-soft:  rgba(255,255,255,0.10);
  --nitrow-border-hair:  rgba(255,255,255,0.05);

  --nitrow-white:        #F4F4F5; /* Cold white, primary text on dark */
  --nitrow-muted:        #A1A1AA; /* Muted text */
  --nitrow-gray-300:     #D4D4D8; /* High-contrast body on dark */
  --nitrow-gray-500:     #71717A; /* Meta / timestamps */
  --nitrow-gray-600:     #52525B; /* Day labels in grid */

  --nitrow-accent:       #3B82F6; /* Electric Blue — the ONE color */
  --nitrow-accent-hover: #2563EB;
  --nitrow-accent-glow:  rgba(59,130,246,0.50);
  --nitrow-accent-10:    rgba(59,130,246,0.10);
  --nitrow-accent-20:    rgba(59,130,246,0.20);

  /* ── SEMANTIC STATUS ─────────────────────────────────────── */
  --nitrow-success:      #22C55E; /* green-500 — Available, Deposit Paid */
  --nitrow-success-10:   rgba(34,197,94,0.10);
  --nitrow-success-20:   rgba(34,197,94,0.20);
  --nitrow-warning:      #EAB308; /* yellow-500 — Pending */
  --nitrow-warning-10:   rgba(234,179,8,0.10);
  --nitrow-danger:       #EF4444; /* red-500 — Destructive */
  --nitrow-danger-10:    rgba(239,68,68,0.10);

  /* ── DASHBOARD (shadcn surface — light) ──────────────────── */
  --dash-bg:             hsl(0 0% 100%);
  --dash-fg:             hsl(222.2 84% 4.9%);
  --dash-card:           hsl(0 0% 100%);
  --dash-muted:          hsl(210 40% 96.1%);
  --dash-muted-fg:       hsl(215.4 16.3% 46.9%);
  --dash-border:         hsl(214.3 31.8% 91.4%);
  --dash-primary:        hsl(222.2 47.4% 11.2%);
  --dash-primary-fg:     hsl(210 40% 98%);
  --dash-accent:         hsl(217.2 91.2% 52.9%); /* Electric blue */
  --dash-accent-fg:      hsl(0 0% 100%);
  --dash-destructive:    hsl(0 84.2% 60.2%);

  /* ── TYPE SCALE ──────────────────────────────────────────── */
  --font-display: 'Outfit', system-ui, sans-serif;
  --font-sans:    'Inter',  system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, monospace;

  /* Display (uppercase, tight tracking, bold) — for hero & headings */
  --display-1:   700 clamp(3.5rem, 8vw, 6.5rem)/0.9 var(--font-display); /* h1 hero */
  --display-2:   700 clamp(2.5rem, 5vw, 4.5rem)/1.05 var(--font-display); /* h2 section */
  --display-3:   700 clamp(1.75rem, 2.5vw, 2.25rem)/1.15 var(--font-display); /* h3 card */
  --display-4:   700 1.25rem/1.3 var(--font-display); /* h4, eyebrow-adjacent */

  /* Body */
  --body-lg:     400 clamp(1.125rem, 1.5vw, 1.5rem)/1.6 var(--font-sans);
  --body-base:   400 1rem/1.6 var(--font-sans);
  --body-sm:     400 0.875rem/1.5 var(--font-sans);
  --body-xs:     400 0.75rem/1.4 var(--font-sans);

  /* Mono — labels, timestamps, "schedule" micro-copy */
  --mono-sm:     500 0.6875rem/1.3 var(--font-mono);
  --mono-xs:     500 0.625rem/1.2 var(--font-mono);

  /* Eyebrow — tiny uppercase mono-ish labels (Nitrow's voice) */
  --eyebrow: 700 0.6875rem/1 var(--font-mono);

  /* ── RADII ───────────────────────────────────────────────── */
  --radius-xs:   0.25rem;  /*  4 */
  --radius-sm:   0.375rem; /*  6 */
  --radius-md:   0.5rem;   /*  8 — dashboard default */
  --radius-lg:   0.75rem;  /* 12 — card default */
  --radius-xl:   1rem;     /* 16 */
  --radius-2xl:  1.25rem;  /* 20 — benefits cards */
  --radius-pill: 9999px;

  /* ── SHADOWS (landing = glow, dashboard = subtle) ────────── */
  --shadow-sm:        0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow-md:        0 4px 6px -1px rgb(0 0 0 / 0.10);
  --shadow-lg:        0 10px 15px -3px rgb(0 0 0 / 0.10);
  --shadow-2xl:       0 25px 50px -12px rgb(0 0 0 / 0.80);
  --shadow-glow:      0 0 20px -5px var(--nitrow-accent-glow);
  --shadow-glow-lg:   0 0 40px -10px var(--nitrow-accent-glow);

  /* ── SPACING (base 4 / tailwind-aligned) ─────────────────── */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-24: 6rem;

  /* ── LAYOUT ──────────────────────────────────────────────── */
  --container: 1120px;
  --container-wide: 1440px;
  --ease-brand: cubic-bezier(0.22, 1, 0.36, 1); /* expo-out */
  --ease-pop:   cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ── SELECTION ───────────────────────────────────────────── */
  ::selection { background: var(--nitrow-accent); color: #fff; }
}

/* ── SEMANTIC HTML DEFAULTS ────────────────────────────────── */
body {
  font: var(--body-base);
  color: var(--nitrow-white);
  background: var(--nitrow-black);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
h1 { font: var(--display-1); letter-spacing: -0.03em; text-transform: uppercase; color: var(--nitrow-white); }
h2 { font: var(--display-2); letter-spacing: -0.02em; text-transform: uppercase; color: var(--nitrow-white); }
h3 { font: var(--display-3); letter-spacing: -0.01em; color: var(--nitrow-white); }
h4 { font: var(--display-4); letter-spacing: 0.08em; text-transform: uppercase; color: var(--nitrow-white); }
p  { font: var(--body-base); color: var(--nitrow-gray-300); }
small, .meta { font: var(--body-xs); color: var(--nitrow-muted); }
code, kbd, .mono { font: var(--mono-sm); color: var(--nitrow-muted); letter-spacing: 0.05em; }

.eyebrow {
  font: var(--eyebrow);
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--nitrow-muted);
}

/* ── UTILITY MOTIFS ────────────────────────────────────────── */
.tech-grid {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' width='32' height='32' fill='none' stroke='rgb(255 255 255 / 0.03)'%3E%3Cpath d='M0 .5H31.5V32'/%3E%3C/svg%3E");
}
.glass {
  background: rgba(255,255,255,0.05);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--nitrow-border-soft);
}
.glow-dot {
  box-shadow: 0 0 8px rgba(59,130,246,0.8);
}