/* Nvoria Design System v2 — web token layer.
   Values are lifted verbatim from §8 of nvoria-design-system (machine-readable
   tokens). Never hard-code a hex or a pixel in a page — use these variables. */

:root {
  /* Brand */
  --brand-primary-base: #0F6E56;   /* canonical primary — never varies */
  /* The site runs the light surface set, so primary is the canonical tone:
     #0F6E56 on #FAFAFA is 5.9:1 and clears the 4.5:1 body rule (§4). The
     lightened #3DBE9B the dark set needed is gone with it. */
  --brand-primary:      #0F6E56;
  --brand-green-dark:   #0B5644;   /* brand-mark gradient end */
  --brand-blue:         #2563EB;   /* employee accent */
  --brand-amber:        #D97706;   /* vendor accent — see --app-partner */

  /* Per-app accents for the app chooser. This is the one place the marketing
     site wears workspace colour: the cards ARE the four workspaces, so the
     accent is doing identification work rather than decoration.
     Partner darkens #D97706 to #B45309 — the canonical amber is 3.1:1 on this
     surface and fails as text. */
  --app-admin:    #0F6E56;         /* 5.9:1 on --bg */
  --app-employee: #2563EB;         /* 5.0:1 */
  --app-partner:  #B45309;         /* 4.8:1 */

  /* Semantic */
  --success: #10B981;
  --warning: #F59E0B;
  --error:   #EF4444;
  --info:    #3B82F6;

  /* Surfaces — the canonical light set, the same one the four apps run. The
     site used to be fixed dark; it is the front door to those apps, and the
     handoff read as two different products. Dark values kept for reference:
       bg #0F172A · card #1E293B · border #334155 · text #F1F5F9 · subtext #CBD5E1 */
  --bg:      #FAFAFA;
  --card:    #FFFFFF;
  --border:  #E5E7EB;
  --text:    #1F2937;
  --subtext: #6B7280;

  /* On-primary */
  --on-primary: #FFFFFF;

  /* Spacing — 4pt */
  --sp-xs: 4px;  --sp-sm: 8px;  --sp-md: 12px; --sp-lg: 16px;
  --sp-xl: 24px; --sp-xxl: 32px; --sp-xxxl: 48px;

  /* Radii */
  --r-xs: 4px; --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-full: 99px;

  /* Icon sizes */
  --icon-xs: 14px; --icon-sm: 18px; --icon-md: 24px;
  --icon-lg: 32px; --icon-xl: 48px; --icon-xxl: 64px;

  /* Elevation — the system is mostly flat; e0 is the default */
  --e0: none;
  --e1: 0 1px 2px rgba(16,24,40,.05);
  --e2: 0 2px 8px rgba(16,24,40,.08);
  --e3: 0 8px 24px rgba(16,24,40,.12);

  /* Motion */
  --d-fast: 150ms; --d-normal: 300ms; --d-slow: 500ms;

  /* Typography — Inter, Material 3 scale */
  --font: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI",
          Roboto, Helvetica, Arial, sans-serif;

  --t-display-lg:   700 32px/1.25 var(--font);
  --t-display-md:   700 28px/1.28 var(--font);
  --t-display-sm:   700 24px/1.3  var(--font);
  --t-headline-lg:  600 22px/1.35 var(--font);
  --t-headline-md:  600 20px/1.4  var(--font);
  --t-headline-sm:  600 18px/1.4  var(--font);
  --t-title-lg:     600 16px/1.5  var(--font);
  --t-title-md:     600 14px/1.5  var(--font);
  --t-title-sm:     600 12px/1.5  var(--font);
  --t-body-lg:      400 16px/1.7  var(--font);
  --t-body-md:      400 14px/1.7  var(--font);
  --t-body-sm:      400 12px/1.6  var(--font);
  --t-label-lg:     600 12px/1.4  var(--font);
  --t-label-md:     600 11px/1.4  var(--font);
  --t-label-sm:     600 10px/1.4  var(--font);
}

/* ---- Base ---- */
* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  /* One surface. The wash is a faint brand light on that surface, not a
     second panel — no edge, no border, nothing to read as a box. */
  background:
    radial-gradient(46vw 36vw at 50% 26%,
      color-mix(in srgb, var(--brand-primary) 11%, transparent), transparent 72%),
    var(--bg);
  background-attachment: fixed;
  color: var(--text);
  font: var(--t-body-lg);
  -webkit-font-smoothing: antialiased;
}

a {
  color: var(--brand-primary);
  text-decoration: none;
  transition: color var(--d-fast) ease;
}
a:hover { text-decoration: underline; }

/* Focus: 3px primary@40% ring, offset 2px */
a:focus-visible,
button:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--brand-primary) 40%, transparent);
  outline-offset: 2px;
  border-radius: var(--r-xs);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}

/* ---- Masthead ---- shared by the landing and legal pages */
.site-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-lg);
  padding: var(--sp-sm) 0;
}

/* ---- Status ---- dot + label, not a filled pill: keeps one surface */
.status {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-sm);
  font: var(--t-label-md);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--subtext);
  white-space: nowrap;
}
.status::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: var(--r-full);
  background: var(--brand-primary);
  flex: none;
}

/* ---- Brand mark ---- (radius ratio 0.28, gradient primary → greenDark) */
.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-md);
  color: inherit;
}
a.brand:hover { text-decoration: none; }
a.brand:hover .brand__word { color: var(--brand-primary); }

.brand__mark {
  width: 44px;
  height: 44px;
  border-radius: 12.32px;            /* 44 × 0.28 */
  background: linear-gradient(135deg, var(--brand-primary-base), var(--brand-green-dark));
  color: var(--on-primary);
  font-family: var(--font);
  font-weight: 800;
  font-size: 24px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
}

.brand__word {
  font: 700 20px/1 var(--font);
  letter-spacing: -.025em;
  color: var(--text);
  transition: color var(--d-fast) ease;
}

/* Masthead lockup sits at a fixed, smaller size than the token default. */
.site-head .brand__mark { width: 34px; height: 34px; border-radius: 9.52px; font-size: 18px; }

/* ---- Footer ---- */
/* One surface throughout — no divider rule, no panel. */
.site-footer {
  padding: var(--sp-xl) 0;
  color: var(--subtext);
  font: var(--t-body-sm);
}
.site-footer a { color: var(--subtext); }
.site-footer a:hover { color: var(--brand-primary); }
.site-footer .sep { opacity: .4; margin: 0 var(--sp-md); }

/* Hit targets: min 44×44 — pad, don't shrink */
.site-footer a,
.contact a { display: inline-block; padding: var(--sp-sm) var(--sp-xs); }

@media (max-width: 480px) {
  .site-footer .sep { display: block; height: 0; overflow: hidden; margin: 0; }
}

/* ---- Button ---- (§6: radius 8, padding 24×12, label 14/600, elevation 0) */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;                 /* §4 hit target */
  padding: var(--sp-md) var(--sp-xl);
  border-radius: var(--r-sm);
  border: 1.5px solid transparent;
  font: var(--t-title-md);
  box-shadow: var(--e0);
  transition: filter var(--d-fast) ease, background-color var(--d-fast) ease,
              border-color var(--d-fast) ease, color var(--d-fast) ease;
}
.btn:hover { text-decoration: none; }

.btn--primary {
  background: var(--brand-primary);
  color: var(--on-primary);         /* white on #0F6E56: 5.5:1 */
}
.btn--primary:hover  { filter: brightness(.93); }   /* §5 */
.btn--primary:active { filter: brightness(.86); }

/* The --border token (#E5E7EB) is only 1.2:1 on this canvas; an interactive
   control boundary needs 3:1 (§4). Deepen it for this one use — 80% of
   --subtext lands at 3.2:1. */
.btn--ghost {
  color: var(--text);
  border-color: color-mix(in srgb, var(--subtext) 80%, transparent);
}
.btn--ghost:hover {
  border-color: color-mix(in srgb, var(--brand-primary) 50%, transparent);
  color: var(--brand-primary);
}

/* ---- App chooser ---- landing page only
   Two audiences, not four: everyone inside a company shares one card and
   picks their role inside it, because "am I an admin or an employee" is a
   question a visitor can answer without knowing what our apps are called.
   Ops is deliberately absent — it is invite-only staff tooling. */
.apps {
  width: 100%;
  max-width: 920px;
  margin: var(--sp-xxl) auto 0;
}
.apps__grid {
  display: grid;
  grid-template-columns: 1.35fr 1fr;   /* the company card carries two rows */
  gap: var(--sp-lg);
  align-items: stretch;
}

.appcard {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-sm);
  text-align: left;
  padding: var(--sp-xl);
  border-radius: var(--r-lg);
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--text);
  box-shadow: var(--e0);
  transition: border-color var(--d-fast) ease, box-shadow var(--d-fast) ease;
}
.appcard:hover {
  border-color: color-mix(in srgb, var(--tint) 55%, transparent);
  box-shadow: var(--e2);
}
.appcard--org     { --tint: var(--app-admin); }
.appcard--partner { --tint: var(--app-partner); }

/* No tile behind the glyph — the object alone, in the card's accent. */
.appcard__icon {
  color: var(--tint);
  margin-bottom: var(--sp-xs);
  display: inline-flex;
}
.appcard__icon svg { width: 30px; height: 30px; display: block; }

.appcard__tag {
  font: var(--t-label-md);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--tint);
}
.appcard__name { font: var(--t-headline-sm); color: var(--text); margin: 0; }
.appcard__desc { font: var(--t-body-md); color: var(--subtext); margin: 0; }

/* Role rows — one destination each. The 5% fill is the ceiling: at 8% the
   --subtext description drops to 4.3:1 against it and fails (§4). */
.roles {
  padding-top: var(--sp-lg);
  width: 100%;
  display: grid;
  gap: var(--sp-sm);
}
.role {
  display: flex;
  align-items: center;
  gap: var(--sp-sm);
  min-height: 44px;                              /* §4 hit target */
  padding: var(--sp-md) var(--sp-lg);
  border-radius: var(--r-sm);
  border: 1px solid color-mix(in srgb, var(--role-tint) 55%, transparent);
  background: color-mix(in srgb, var(--role-tint) 5%, transparent);
  color: var(--text);
  transition: background-color var(--d-fast) ease, border-color var(--d-fast) ease;
}
.role:hover {
  text-decoration: none;
  background: color-mix(in srgb, var(--role-tint) 12%, transparent);
  border-color: var(--role-tint);
}
.role--admin    { --role-tint: var(--app-admin); }
.role--employee { --role-tint: var(--app-employee); }
.role--partner  { --role-tint: var(--app-partner); }
.role__lead { font: var(--t-title-md); color: var(--role-tint); flex: none; }
.role__desc { font: var(--t-body-md); font-size: 13px; color: var(--subtext); min-width: 0; }

.apps__foot {
  margin-top: var(--sp-lg);
  text-align: center;
  font: var(--t-body-sm);
  color: var(--subtext);
}

@media (max-width: 860px) {
  .apps__grid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  /* The lead and its description stack rather than shrink — a 13px
     description squeezed beside the lead wrapped one word per line. */
  .role { flex-direction: column; align-items: flex-start; gap: 2px; }
}