/*
 * DevSpeak Cloud: the DevSpeak Labs brand canon (devspeak/lib/design-system, skill devspeak-design)
 * mapped onto the InstaCloud OSS dashboard tokens. Loaded after the app's CSS by INSTA_OSS_BRAND_DIR.
 * Dark mode first; cool blue/violet accents; Inter for text, JetBrains Mono for code, Space Grotesk
 * for structural labels; generous radii.
 */

@font-face { font-family: 'JetBrains Mono'; src: url('fonts/jetbrains-mono-latin-400-normal.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'JetBrains Mono'; src: url('fonts/jetbrains-mono-latin-500-normal.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Space Grotesk'; src: url('fonts/space-grotesk-latin-500-normal.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Space Grotesk'; src: url('fonts/space-grotesk-latin-600-normal.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; }

:root {
  /* Inter is already bundled by the dashboard (Inter Variable). */
  --insforge-font: 'Inter Variable', 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --app-font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  --ds-label-font: 'Space Grotesk', 'Inter Variable', system-ui, sans-serif;

  /* light: blue-500 accent */
  --theme: 59 130 246;          /* #3b82f6 */

  /* DevSpeak radii are large and rounded (card 1.25rem, panel 1.5rem); scaled for a dense console. */
  --radius-xs: 0.25rem;
  --radius-sm: 0.375rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;
  --radius-xl: 1rem;
  --radius-2xl: 1.25rem;
  --radius-3xl: 1.5rem;
  --radius-4xl: 1.75rem;
}

/* dark palette (DevSpeak surface scale) */
.dark {
  --semantic-0: 14 14 14;       /* surface          #0e0e0e */
  --semantic-1: 19 19 19;       /* surface-low      #131313 */
  --semantic-2: 26 25 25;
  --semantic-3: 32 31 31;       /* surface-high     #201f1f */
  --semantic-4: 38 38 38;       /* surface-highest  #262626 */
  --semantic-5: 46 45 45;
  --semantic-6: 56 55 55;
  --page: 14 14 14;
  --card: 32 31 31;
  --toast: 38 38 38;
  --foreground: 255 255 255;    /* on-surface */
  --muted-foreground: 173 170 170; /* on-surface-variant #adaaaa */
  --theme: 133 173 255;         /* primary #85adff */
  --info: 128 151 255;          /* secondary #8097ff */
  --border: rgba(173, 170, 170, 0.12);
}

/* The bare `rounded` utility and the kit Toast's fixed radius (the app zeroes both). */
[class~="rounded"],
[class~="rounded-[8px]"] {
  border-radius: 0.375rem;
}

/* Primary CTA gradient in dark mode (DevSpeak: linear-gradient(135deg, #85adff, #6e9fff)). */
.dark [class~="bg-primary"] {
  background-image: linear-gradient(135deg, #85adff 0%, #6e9fff 100%);
}

/* Structural labels in Space Grotesk (sidebar navigation, tabs). */
aside,
[role="tab"] {
  font-family: var(--ds-label-font);
  letter-spacing: 0.01em;
}

/* Subtle neon focus/hover glow on cards, per the canon's shadow-neon. */
.dark [class~="bg-card"]:hover {
  box-shadow: 0 0 0 1px rgba(129, 180, 255, 0.18), 0 0 40px rgba(96, 165, 250, 0.10);
}

/* The canonical mark is a light speech bubble: give it the app's near-black tile on light chrome. */
html:not(.dark) img[src="/brand/mark.svg"] {
  background: #0e0e0e;
  border-radius: 0.375rem;
  padding: 1px;
}

/* The wordmark is white type for dark backgrounds; the sign-in card page is pinned light, so it
 * sits on a near-black pill there. */
.brand-logo {
  box-sizing: content-box;
  background: #0e0e0e;
  border-radius: 1.25rem;
  padding: 10px 22px;
  box-shadow: 0 0 0 1px rgba(129, 180, 255, 0.18), 0 0 40px rgba(96, 165, 250, 0.18);
}