/* =============================================================
   Exegon.ai — Color & Type Foundations
   Extracted from Zboard V5.5 (apps/web)
   ============================================================= */

/* Google Fonts — Roboto Mono is the brand display + identifier face */
@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600;700&family=Roboto+Mono:wght@400;500;600;700&family=Roboto:wght@400;500;700;900&family=Space+Grotesk:wght@300;400;500;700&display=swap");

:root {
  /* -------------------------------------------------------
     Brand
     ------------------------------------------------------- */
  --exegon-accent:        #fd4f5d;   /* signature coral-red, "home" accent */
  --exegon-accent-hover:  #f03c5c;   /* slightly darker press/hover */
  --exegon-accent-soft:   rgba(253, 79, 93, 0.14); /* tint fill */
  --exegon-accent-ring:   rgba(253, 79, 93, 0.35); /* focus rings */
  --exegon-orange:        #f05322;   /* secondary sticky/pin orange */

  /* -------------------------------------------------------
     Neutrals (dark shell is canonical)
     ------------------------------------------------------- */
  --bg-0:       #000000;   /* page shell (home / board dark) */
  --bg-1:       #020202;   /* page-home body */
  --bg-2:       #070707;   /* rail / body fallback */
  --bg-3:       #0a0a0a;   /* input wells */
  --bg-4:       #111111;   /* home surface / cards */
  --bg-5:       #1a1a1a;   /* team-card / solid surface */
  --bg-6:       #1e1e1e;   /* topbar strip */

  --line-1:     #303030;   /* primary hairlines */
  --line-2:     #4a4a4a;   /* strong borders */
  --line-3:     #58595b;   /* hero borders */
  --line-4:     #5a5a5a;   /* team-card border */

  --fg-1:       #ffffff;   /* headings */
  --fg-2:       #f4f4f1;   /* body text */
  --fg-3:       #d4d7de;   /* secondary text */
  --fg-4:       #d2d2cc;   /* tertiary labels */
  --fg-5:       #b7b7b1;   /* meta text */
  --fg-6:       #8f8f8f;   /* placeholder / muted */

  /* Light-board palette (used when board-theme-light is applied) */
  --light-bg:   #f8fafc;
  --light-panel:#ffffff;
  --light-text: #111827;
  --light-muted:#4b5563;
  --light-line: #d4dce8;

  /* -------------------------------------------------------
     Semantic / Status
     ------------------------------------------------------- */
  --ok:         #86efac;   /* build-stamp web green */
  --info:       #93c5fd;   /* build-stamp api blue */
  --warn:       #facc15;   /* swatch yellow */
  --danger:     #fca5a5;   /* gallery error text */

  /* Board canvas swatch palette (sticky / connection / text / draw) */
  --sw-orange:  #f05322;
  --sw-yellow:  #facc15;
  --sw-gold:    #eab308;
  --sw-amber:   #ca8a04;
  --sw-snow:    #f5f5f5;
  --sw-fog:     #d4d4d4;
  --sw-peach:   #fdba74;
  --sw-tangerine:#fb923c;
  --sw-clay:    #b45309;
  --sw-blush:   #fecaca;
  --sw-rose:    #f87171;
  --sw-red:     #dc2626;
  --sw-pink:    #f9a8d4;
  --sw-magenta: #ec4899;
  --sw-mulberry:#be185d;
  --sw-mint:    #86efac;
  --sw-green:   #22c55e;
  --sw-forest:  #15803d;
  --sw-sky:     #93c5fd;
  --sw-blue:    #60a5fa;
  --sw-cobalt:  #2563eb;
  --sw-navy:    #1d4ed8;
  --sw-lilac:   #c4b5fd;
  --sw-violet:  #8b5cf6;
  --sw-grape:   #6d28d9;
  --sw-ink:     #111827;
  --sw-black:   #000000;
  --sw-emerald: #10b981;
  --sw-orange2: #f97316;

  /* Presence / avatar seed palette (home surfaces) */
  --av-1: #2563eb;
  --av-2: #0f766e;
  --av-3: #b45309;
  --av-4: #be185d;
  --av-5: #9333ea;
  --av-6: #15803d;
  --av-7: #b91c1c;
  --av-8: #334155;

  /* -------------------------------------------------------
     Type stacks
     ------------------------------------------------------- */
  --font-wordmark: "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
  --font-display: "Roboto Mono", "IBM Plex Mono", ui-monospace, monospace;
  --font-sans:    "IBM Plex Sans", "Segoe UI", system-ui, sans-serif;
  --font-mono:    "Roboto Mono", "IBM Plex Mono", ui-monospace, SFMono-Regular,
                  Menlo, Monaco, Consolas, "Liberation Mono", monospace;

  /* -------------------------------------------------------
     Semantic type roles
     ------------------------------------------------------- */
  --t-wordmark-size:     32px;
  --t-wordmark-weight:   900;
  --t-wordmark-tracking: 0.03em;

  --t-h1-size:    32px;
  --t-h1-weight:  800;
  --t-h1-track:   0.06em;

  --t-h2-size:    22px;
  --t-h2-weight:  700;
  --t-h2-track:   0.08em;

  --t-kicker-size:   10px;
  --t-kicker-weight: 700;
  --t-kicker-track:  0.12em;       /* ALL CAPS micro-labels */

  --t-body-size:    13px;
  --t-body-weight:  400;
  --t-body-line:    1.5;

  --t-label-size:   11px;
  --t-label-weight: 600;
  --t-label-track:  0.08em;

  --t-mono-title-size:  15px;
  --t-mono-title-weight:700;
  --t-mono-title-track: 0.02em;

  --t-code-size:    12px;
  --t-code-weight:  500;

  /* -------------------------------------------------------
     Spacing / radius / elevation
     ------------------------------------------------------- */
  --space-1: 4px;
  --space-2: 6px;
  --space-3: 8px;
  --space-4: 10px;
  --space-5: 12px;
  --space-6: 14px;
  --space-7: 18px;
  --space-8: 22px;
  --space-9: 28px;

  /* Radii — Exegon is almost exclusively square. Radius is rare. */
  --r-0: 0;       /* dominant */
  --r-1: 2px;     /* CTA pills */
  --r-2: 6px;     /* board topbar controls */
  --r-3: 10px;    /* floating inspector panels */
  --r-round: 999px; /* avatars only */

  /* Elevation */
  --shadow-1: 0 14px 28px rgba(0, 0, 0, 0.42);
  --shadow-2: 0 16px 32px rgba(0, 0, 0, 0.52);
  --shadow-3: 0 20px 40px rgba(0, 0, 0, 0.48);

  /* Corner-tick sizing (signature frame detail) */
  --corner-size:   10px;
  --corner-stroke: 1px;
  --corner-color:  #b7b7b1;
  --dot-size:      2px;
}

/* =============================================================
   Base
   ============================================================= */
html, body { background: var(--bg-1); color: var(--fg-2); font-family: var(--font-sans); margin: 0; }
* { box-sizing: border-box; }

/* =============================================================
   Semantic typography classes — mirror real product roles
   ============================================================= */
.ex-wordmark {
  font-family: var(--font-display);
  font-size: var(--t-wordmark-size);
  font-weight: var(--t-wordmark-weight);
  letter-spacing: var(--t-wordmark-tracking);
  line-height: 1;
  color: var(--fg-1);
}

.ex-h1 {
  font-family: var(--font-sans);
  font-size: var(--t-h1-size);
  font-weight: var(--t-h1-weight);
  letter-spacing: var(--t-h1-track);
  text-transform: uppercase;
  color: var(--fg-1);
  margin: 0;
}

.ex-h2 {
  font-family: var(--font-sans);
  font-size: var(--t-h2-size);
  font-weight: var(--t-h2-weight);
  letter-spacing: var(--t-h2-track);
  text-transform: uppercase;
  color: var(--fg-1);
  margin: 0;
}

.ex-kicker {
  font-family: var(--font-sans);
  font-size: var(--t-kicker-size);
  font-weight: var(--t-kicker-weight);
  letter-spacing: var(--t-kicker-track);
  text-transform: uppercase;
  color: var(--fg-3);
}

.ex-body {
  font-family: var(--font-sans);
  font-size: var(--t-body-size);
  font-weight: var(--t-body-weight);
  line-height: var(--t-body-line);
  color: var(--fg-2);
}

.ex-label {
  font-family: var(--font-sans);
  font-size: var(--t-label-size);
  font-weight: var(--t-label-weight);
  letter-spacing: var(--t-label-track);
  text-transform: uppercase;
  color: var(--fg-3);
}

.ex-mono-title {
  font-family: var(--font-mono);
  font-size: var(--t-mono-title-size);
  font-weight: var(--t-mono-title-weight);
  letter-spacing: var(--t-mono-title-track);
  color: var(--fg-1);
}

.ex-code, code {
  font-family: var(--font-mono);
  font-size: var(--t-code-size);
  font-weight: var(--t-code-weight);
  color: var(--fg-2);
}

/* =============================================================
   Signature corner-tick frame (::before / ::after technique
   used throughout .team-card, .home-topbar, .ai-tab, etc.)
   Apply by adding .ex-ticks to a positioned container.
   ============================================================= */
.ex-ticks { position: relative; }
.ex-ticks::before,
.ex-ticks::after {
  content: "";
  position: absolute;
  inset: -1px;
  pointer-events: none;
}
.ex-ticks::before {
  background-image:
    linear-gradient(var(--tick-color, var(--corner-color)), var(--tick-color, var(--corner-color))),
    linear-gradient(var(--tick-color, var(--corner-color)), var(--tick-color, var(--corner-color))),
    linear-gradient(var(--tick-color, var(--corner-color)), var(--tick-color, var(--corner-color))),
    linear-gradient(var(--tick-color, var(--corner-color)), var(--tick-color, var(--corner-color)));
  background-repeat: no-repeat;
  background-size:
    var(--corner-size) var(--corner-stroke),
    var(--corner-stroke) var(--corner-size),
    var(--corner-size) var(--corner-stroke),
    var(--corner-stroke) var(--corner-size);
  background-position: left top, left top, left bottom, left bottom;
}
.ex-ticks::after {
  background-image:
    linear-gradient(var(--tick-color, var(--corner-color)), var(--tick-color, var(--corner-color))),
    linear-gradient(var(--tick-color, var(--corner-color)), var(--tick-color, var(--corner-color))),
    linear-gradient(var(--tick-color, var(--corner-color)), var(--tick-color, var(--corner-color))),
    linear-gradient(var(--tick-color, var(--corner-color)), var(--tick-color, var(--corner-color)));
  background-repeat: no-repeat;
  background-size:
    var(--corner-size) var(--corner-stroke),
    var(--corner-stroke) var(--corner-size),
    var(--corner-size) var(--corner-stroke),
    var(--corner-stroke) var(--corner-size);
  background-position: right top, right top, right bottom, right bottom;
}

/* dotted-tick variant — only the four corner dots */
.ex-dots { position: relative; }
.ex-dots::after {
  content: "";
  position: absolute;
  inset: -1px;
  pointer-events: none;
  background-image:
    linear-gradient(var(--tick-color, var(--corner-color)), var(--tick-color, var(--corner-color))),
    linear-gradient(var(--tick-color, var(--corner-color)), var(--tick-color, var(--corner-color))),
    linear-gradient(var(--tick-color, var(--corner-color)), var(--tick-color, var(--corner-color))),
    linear-gradient(var(--tick-color, var(--corner-color)), var(--tick-color, var(--corner-color)));
  background-repeat: no-repeat;
  background-size: var(--dot-size) var(--dot-size);
  background-position: left top, right top, left bottom, right bottom;
}