/* Logicboks group brand tokens. One file for every app, site and on-screen doc.
 *
 * Layer 1 is the Visor shell (the product language every app is built on since
 * 24 Sep 2026), copied from Visor next/src/shared/styles/globals.css.
 * Layer 2 is the brand switch: set data-brand on <html> to visor | ayai |
 * ayaimq | logicboks | vantage. Only --brand-* changes; the shell never does.
 * Layer 3 is the website layer (Manrope display), used only on outward pages.
 *
 * Colour is for state and for what is live, selected or pressable. Marks are
 * ink on paper and white on ink; brand colour is never the product mark,
 * except the Logicboks Square, which is amber by definition.
 */

@font-face {
  font-family: Inter;
  src: url("../fonts/Inter-Variable.ttf") format("truetype");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: Inter;
  src: url("../fonts/Inter-Italic-Variable.ttf") format("truetype");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Geist Mono";
  src: url("../fonts/GeistMono-Variable.ttf") format("truetype");
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: Manrope;
  src: url("../fonts/manrope-variable.ttf") format("truetype");
  font-weight: 200 800;
  font-display: swap;
}
@font-face {
  font-family: Archivo;
  src: url("../fonts/Archivo-600.ttf") format("truetype");
  font-weight: 600;
  font-display: swap;
}

:root {
  /* type */
  --font-sans: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-display: var(--font-sans); /* apps: Inter. Websites: see .lb-site */
  --font-mono: "Geist Mono", ui-monospace, Consolas, monospace;
  --font-figure: Archivo, var(--font-sans); /* the one number that matters */

  /* Visor shell, light */
  --canvas-base: #f5f5f5;
  --dot-color-base: #cbcbcb;
  --dot-size: 1px;
  --dot-spacing: 24px;
  --card: #ffffff;
  --card-glass: color-mix(in srgb, var(--card) 78%, transparent);
  --backdrop-panel: blur(18px) saturate(180%) brightness(1.02);
  --background: var(--card);
  --foreground: #242424;
  --muted: #f0f0f0;
  --muted-foreground: #666666;
  --placeholder: #cccccc;
  --accent: #f5f5f5;
  --accent-hover: #f0f0f0;
  --border: #e8e8e8;
  --input: #e5e5e5;
  --ring: #cccccc;
  --primary: #1a1a1a; /* the ink pill: every primary button, every brand */
  --primary-foreground: #ffffff;

  /* state, never decoration. Product apps (Ayai, AyaiMQ) use the
   * Figma "Ayai / State" set below; Visor's own app keeps --success etc. */
  --success: #16a34a;
  --warning: #ca8a04;
  --info: #2563eb;
  --destructive: #dc2626;
  --state-fine: #00a062;
  --state-fine-text: #008951;
  --state-warn: #c17000;
  --state-warn-text: #a75d00;
  --state-crit: #d15c56;
  --state-crit-text: #b54a46;
  --state-info: #7f76dc;
  --state-info-text: #6b62bf;
  --state-pending: #a3a3a3;
  --state-offline: #b3b3b3;
  /* tints are the hue at 12% over the surface */
  --state-fine-tint: color-mix(in srgb, var(--state-fine) 12%, transparent);
  --state-warn-tint: color-mix(in srgb, var(--state-warn) 12%, transparent);
  --state-crit-tint: color-mix(in srgb, var(--state-crit) 12%, transparent);
  --state-info-tint: color-mix(in srgb, var(--state-info) 12%, transparent);

  /* shape */
  --radius-xs: 6px;
  --radius-sm: 12px;
  --radius-md: 18px;
  --radius-lg: 24px;
  --radius-full: 999px;
  --radius-composer: 40px;

  /* depth */
  --shadow-mini: 0 2px 8px rgba(76, 76, 76, 0.15);
  --shadow-card: 0 2px 8px rgba(76, 76, 76, 0.15);
  --shadow-elevated: 0 3px 12px rgba(76, 76, 76, 0.22);
  --shadow-popover: 0 8px 30px rgba(0, 0, 0, 0.12);
  --shadow-modal: 0 20px 60px rgba(0, 0, 0, 0.2);

  /* motion */
  --ease-spring: cubic-bezier(0.33, 1, 0.68, 1);
  --duration-fast: 150ms;
  --duration-normal: 200ms;
  --duration-slow: 400ms;

  /* shell geometry (Visor app; products may narrow the sidebar) */
  --topbar-h: 52px;
  --sidebar-w: 259px;
  --shell-gap: 12px;

  /* brand switch defaults = Visor (monochrome) */
  --brand: #1a1a1a;
  --brand-display: #1a1a1a;
  --brand-on-dark: #ffffff;
  --brand-soft: #f0f0f0;
  --mark: #171719;
  --mark-on-dark: #ffffff;
  --ink-stage: #171719; /* dark grounds are ink, never navy */

  color-scheme: light;
}

.dark,
[data-theme="dark"] {
  --canvas-base: #1a1a1a;
  --dot-color-base: rgba(255, 255, 255, 0.12);
  --card: #232323;
  --card-glass: color-mix(in srgb, var(--card) 82%, transparent);
  --backdrop-panel: blur(18px) saturate(160%) brightness(1.08);
  --foreground: #ffffff;
  --muted: #333333;
  --muted-foreground: #999999;
  --accent: #333333;
  --accent-hover: #333333;
  --border: #333333;
  --input: #333333;
  --primary: #ffffff;
  --primary-foreground: #000000;
  --success: #4ade80;
  --warning: #facc15;
  --info: #60a5fa;
  --destructive: #f87171;
  --state-fine: #58c38b;
  --state-fine-text: #58c38b;
  --state-warn: #df9b44;
  --state-warn-text: #df9b44;
  --state-crit: #f28881;
  --state-crit-text: #f28881;
  --state-info: #a39ef9;
  --state-info-text: #a39ef9;
  --state-pending: #6f6f6f;
  --state-offline: #5e5e5e;
  --shadow-mini: 0 2px 8px rgba(0, 0, 0, 0.4);
  --shadow-card: 0 2px 8px rgba(0, 0, 0, 0.4);
  --shadow-modal: 0 20px 60px rgba(0, 0, 0, 0.6);
  --mark: #ffffff;
  color-scheme: dark;
}

/* ---- brand switch ---- */

[data-brand="visor"] {
  --sidebar-w: 280px;
}

/* Ayai: blue, decided by Quinn 23 Sep 2026. Old teal #04736F / #00AEC1 retired. */
[data-brand="ayai"] {
  --brand: #0a6bcb;          /* links, active nav text, selection, focus */
  --brand-display: #0c80f0;  /* large type, the accent second headline line */
  --brand-on-dark: #9cc9fa;  /* highlights on the ink stage */
  --brand-soft: #e7f1fc;     /* selected row wash (Figma Ayai / Accent / accent-tint) */
  --site-stage: #111c26;     /* website only: navy stage and footer */
  --site-band: #9cc9fa;      /* website only: the light blue band */
  --site-paper: #f7f8fa;
  --site-text: #19252f;
  --site-muted: #5c6772;
  --sidebar-w: 259px;
}
.dark[data-brand="ayai"],
[data-theme="dark"][data-brand="ayai"] {
  --brand: #9cc9fa;
  --brand-soft: #16263a;
}

/* AyaiMQ: orange accent, ink mark, decided 23 and 25 Sep 2026. */
[data-brand="ayaimq"] {
  --brand: #c83b19;
  --brand-display: #ed5429;
  --brand-on-dark: #ffbc8d;
  --brand-soft: #fff0e9;
  --sidebar-w: 208px;
}
.dark[data-brand="ayaimq"],
[data-theme="dark"][data-brand="ayaimq"] {
  --brand: #ffbc8d;
  --brand-soft: #392920;
}

/* Logicboks (the company). Amber is the logo, not a text colour: amber text
 * on white fails contrast. Use it for the mark, a rule, a fill behind ink text. */
[data-brand="logicboks"] {
  --brand: #333333;
  --brand-display: #faa61a;
  --brand-on-dark: #faa61a;
  --brand-soft: #fff4de;
  --logicboks-amber: #faa61a;     /* Logicboks Square artwork */
  --logicboks-amber-rgb: #ffb000; /* "BOKS" in the RGB lockup artwork */
  --logicboks-grey: #333333;      /* "LOGIC" in the lockup artwork */
}

/* ---- shell primitives ---- */

.lb-canvas {
  background-color: var(--canvas-base);
  background-image: radial-gradient(
    circle,
    var(--dot-color-base) var(--dot-size),
    transparent calc(var(--dot-size) + 0.5px)
  );
  background-size: var(--dot-spacing) var(--dot-spacing);
}
.lb-glass {
  background: var(--card-glass);
  backdrop-filter: var(--backdrop-panel);
  -webkit-backdrop-filter: var(--backdrop-panel);
}
.lb-figure {
  font-family: var(--font-figure);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  line-height: 1;
}
.lb-num {
  font-variant-numeric: tabular-nums;
}

/* ---- website layer: outward pages only (sites, emails, landing) ---- */
.lb-site {
  --font-display: Manrope, var(--font-sans);
}
.lb-site h1,
.lb-site h2 {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.03em;
}
.lb-site h1 .accent,
.lb-site h2 .accent {
  color: var(--brand-display);
}