/* Proximity Green · Channel Partner Platform
   Co-branded with 2nth.ai · Builder tier
   Built environment AI skills */

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&family=Inter:wght@300;400;500;600&family=JetBrains+Mono:wght@400;500&display=swap');

/* ─── Design Tokens ──────────────────────────────────────────── */
:root {
  /* Backgrounds — deep green-black */
  --c-carbon:   #040C06;
  --c-graphite: #0C1A0F;
  --c-gunmetal: #162A19;
  --c-chassis:  #1E3A22;

  /* Text */
  --c-titanium: #F0FDF4;

  /* Steel */
  --c-steel-600: #4A7A52;
  --c-steel-500: #6B8F73;
  --c-steel-400: #8FAF97;
  --c-steel-300: #B8D4BC;

  /* Borders */
  --c-border:    rgba(22,163,74,.12);
  --c-border-md: rgba(22,163,74,.22);
  --c-grid-line: rgba(22,163,74,.03);

  /* Brand — Proximity Green */
  --c-brand:      #16A34A;
  --c-brand-dim:  rgba(22,163,74,.12);
  --c-brand-glow: rgba(22,163,74,.25);
  --c-selection:  rgba(22,163,74,.2);

  /* 2nth.ai co-brand */
  --c-2nth:      #06B6D4;
  --c-2nth-dim:  rgba(6,182,212,.1);

  /* Built environment skill colours */
  --c-review:       #16A34A; /* ProxReview — green */
  --c-property:     #0EA5E9; /* Property AI — sky */
  --c-gallery:      #8B5CF6; /* Gallery — violet */
  --c-tenant:       #F59E0B; /* Tenant — amber */
  --c-sustain:      #10B981; /* Sustainability — emerald */
  --c-contractor:   #F97316; /* Contractor — orange */
  --c-planning:     #06B6D4; /* Planning — cyan */
  --c-facility:     #6366F1; /* Facility — indigo */
  --c-cro:          #DC2626; /* CRO/ERM — red */

  /* Status */
  --c-success:  #22C55E;
  --c-warning:  #F59E0B;
  --c-error:    #EF4444;
  --c-live:     #22C55E;

  /* Fonts */
  --font-display: 'DM Sans', sans-serif;
  --font-body:    'Inter', sans-serif;
  --font-mono:    'JetBrains Mono', monospace;

  /* Radii */
  --r-sm:  4px;
  --r-md:  8px;
  --r-lg:  12px;
  --r-xl:  16px;
  --r-pill:9999px;

  --nav-h: 56px;
}

/* Light mode */
.light {
  --c-carbon:   #f0fdf4;
  --c-graphite: #dcfce7;
  --c-gunmetal: #bbf7d0;
  --c-chassis:  #a7f3d0;
  --c-titanium: #052e16;
  --c-steel-600:#166534;
  --c-steel-500:#15803d;
  --c-steel-400:#16a34a;
  --c-steel-300:#22c55e;
  --c-border:   rgba(22,163,74,.12);
  --c-border-md:rgba(22,163,74,.2);
}

/* ─── Reset ──────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { font-family: var(--font-body); background: var(--c-carbon); color: var(--c-titanium); line-height: 1.6; font-size: 15px; min-height: 100vh; -webkit-font-smoothing: antialiased; }
::selection { background: var(--c-selection); }

/* ─── Grid background ────────────────────────────────────────── */
.grid-bg {
  background-image: linear-gradient(var(--c-grid-line) 1px, transparent 1px),
                    linear-gradient(90deg, var(--c-grid-line) 1px, transparent 1px);
  background-size: 40px 40px;
}

/* ─── Navigation ─────────────────────────────────────────────── */
.nav-bg {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; gap: 16px;
  height: var(--nav-h); padding: 0 24px;
  background: rgba(4,12,6,.92);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--c-border);
}
.nav-brand { font-family: var(--font-display); font-size: 16px; font-weight: 700; letter-spacing: -.01em; color: var(--c-titanium); text-decoration: none; display: flex; align-items: center; gap: 8px; }
.nav-brand .dot { color: var(--c-brand); }
.nav-cobrand { font-family: var(--font-mono); font-size: 9px; letter-spacing: .1em; color: var(--c-2nth); text-transform: uppercase; padding: 2px 8px; border: 1px solid var(--c-2nth-dim); border-radius: var(--r-pill); }
.badge-beta { font-family: var(--font-mono); font-size: 9px; letter-spacing: .1em; text-transform: uppercase; color: var(--c-brand); border: 1px solid var(--c-brand-dim); padding: 2px 8px; border-radius: var(--r-pill); }
.nav-divider { width: 1px; height: 20px; background: var(--c-border); }
.nav-links { display: flex; gap: 4px; }
.nav-link { font-size: 13px; font-weight: 500; color: var(--c-steel-500); text-decoration: none; padding: 5px 10px; border-radius: var(--r-md); transition: color .15s, background .15s; }
.nav-link:hover, .nav-link.active { color: var(--c-titanium); background: var(--c-graphite); }
.nav-spacer { flex: 1; }
.theme-toggle { background: none; border: 1px solid var(--c-border); color: var(--c-steel-500); width: 32px; height: 32px; border-radius: var(--r-md); cursor: pointer; font-size: 14px; transition: border-color .15s; }
.theme-toggle:hover { border-color: var(--c-brand); color: var(--c-brand); }

/* ─── App layout ─────────────────────────────────────────────── */
.app-main { max-width: 1100px; margin: 0 auto; padding: 0 24px 80px; }

/* ─── Typography ─────────────────────────────────────────────── */
.section-eyebrow { font-family: var(--font-mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--c-brand); margin-bottom: 8px; }
.text-brand { color: var(--c-brand); }
.text-2nth  { color: var(--c-2nth); }

/* ─── Cards ──────────────────────────────────────────────────── */
.card-cell { background: var(--c-graphite); border: 1px solid var(--c-border); border-radius: var(--r-xl); padding: 20px; }
.metric-value { font-family: var(--font-display); font-size: 32px; font-weight: 700; color: var(--c-titanium); line-height: 1; margin-bottom: 6px; }
.metric-label { font-size: 12px; color: var(--c-steel-500); font-family: var(--font-mono); letter-spacing: .06em; text-transform: uppercase; }

/* ─── Grids ──────────────────────────────────────────────────── */
.grid-4 { display: grid; grid-template-columns: repeat(4,1fr); gap: 16px; }
.grid-3 { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; }
.grid-2 { display: grid; grid-template-columns: repeat(2,1fr); gap: 16px; }
@media(max-width:900px) { .grid-4 { grid-template-columns: repeat(2,1fr); } }
@media(max-width:600px) { .grid-4,.grid-3,.grid-2 { grid-template-columns: 1fr; } }

/* ─── Buttons ────────────────────────────────────────────────── */
.cta-primary { display: inline-block; background: var(--c-brand); color: #fff; font-weight: 600; font-size: 14px; padding: 10px 22px; border-radius: var(--r-md); text-decoration: none; border: none; cursor: pointer; transition: background .15s; }
.cta-primary:hover { background: #15803D; }
.cta { display: inline-block; background: var(--c-graphite); color: var(--c-titanium); font-weight: 500; font-size: 14px; padding: 10px 22px; border-radius: var(--r-md); text-decoration: none; border: 1px solid var(--c-border); cursor: pointer; transition: border-color .15s; }
.cta:hover { border-color: var(--c-brand); }
.cta-sm { font-size: 12px; padding: 7px 16px; }

/* ─── Forms ──────────────────────────────────────────────────── */
.field { width: 100%; background: var(--c-gunmetal); border: 1px solid var(--c-border); color: var(--c-titanium); padding: 9px 14px; border-radius: var(--r-md); font-size: 14px; font-family: var(--font-body); outline: none; transition: border-color .15s; }
.field:focus { border-color: var(--c-brand); }
.field::placeholder { color: var(--c-steel-500); }
.field-label { display: block; font-size: 12px; font-family: var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--c-steel-500); margin-bottom: 6px; }

/* ─── Pills ──────────────────────────────────────────────────── */
.pill { display: inline-block; font-size: 11px; font-family: var(--font-mono); padding: 2px 10px; border-radius: var(--r-pill); font-weight: 500; }
.pill-active, .pill-complete { background: rgba(22,163,74,.12); color: var(--c-brand); }
.pill-pending, .pill-draft    { background: rgba(245,158,11,.1); color: var(--c-warning); }
.pill-processing, .pill-queued { background: rgba(6,182,212,.1); color: var(--c-2nth); }
.pill-failed     { background: rgba(239,68,68,.1); color: var(--c-error); }

/* ─── Pulse dot ──────────────────────────────────────────────── */
.pulse-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--c-live); box-shadow: 0 0 0 0 rgba(34,197,94,.4); animation: pulse 2s infinite; display: inline-block; }
@keyframes pulse { 0%,100% { box-shadow: 0 0 0 0 rgba(34,197,94,.4); } 50% { box-shadow: 0 0 0 6px rgba(34,197,94,0); } }

/* ─── Skill cards ────────────────────────────────────────────── */
.skill-card {
  background: var(--c-graphite);
  border: 1.5px solid var(--c-border);
  border-radius: var(--r-xl); padding: 22px;
  transition: border-color .15s, transform .12s;
  cursor: pointer; position: relative;
}
.skill-card:hover { transform: translateY(-2px); border-color: var(--c-border-md); }
.skill-card.enabled { border-color: var(--c-brand); background: linear-gradient(135deg, var(--c-graphite), rgba(22,163,74,.05)); }
.skill-card .skill-icon { font-size: 28px; margin-bottom: 12px; }
.skill-card .skill-name { font-family: var(--font-display); font-size: 16px; font-weight: 700; margin-bottom: 4px; }
.skill-card .skill-desc { font-size: 12px; color: var(--c-steel-500); line-height: 1.6; margin-bottom: 14px; }
.skill-card .skill-tag { font-family: var(--font-mono); font-size: 10px; letter-spacing: .06em; padding: 2px 10px; border-radius: var(--r-pill); background: var(--c-gunmetal); color: var(--c-steel-400); }
.skill-toggle { position: absolute; top: 16px; right: 16px; width: 36px; height: 20px; background: var(--c-gunmetal); border: 1px solid var(--c-border); border-radius: 20px; cursor: pointer; transition: background .2s; }
.skill-toggle.on { background: var(--c-brand); border-color: var(--c-brand); }
.skill-toggle::after { content: ''; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: var(--c-steel-400); transition: transform .2s, background .2s; }
.skill-toggle.on::after { transform: translateX(16px); background: #fff; }

/* ─── Reveal animation ───────────────────────────────────────── */
.reveal { opacity: 0; transform: translateY(12px); transition: opacity .4s, transform .4s; }
.reveal.visible { opacity: 1; transform: none; }

/* ─── Auth bar placeholder ───────────────────────────────────── */
#auth-bar { height: 32px; }