/* Design tokens only — Tailwind import removed to avoid injecting a second
   copy of preflight/utilities that overrides the Building OS host layout.
   When running inside Building OS, the host provides Tailwind v4.
   For standalone dev, import Tailwind in a local dev-only CSS file. */
/*
 * Tango Vision Design Tokens
 * Single source of truth for all platform colors, spacing, typography.
 *
 * Brand: AI-native building management OS — digital twins for malls,
 * offices, campuses. Dark-first product. Orange (#F8A324) on deep
 * purple (#5B407F). Montserrat for display/UI, Open Sans Light for
 * long-form body. The wordmark is TANGO.VISION with 0.10em tracking.
 *
 * Two layers of tokens here:
 *  1) Semantic HSL channels (--primary, --background, etc.) that
 *     shadcn/ui components consume via hsl(var(--…)).
 *  2) Brand hex tokens (--tv-orange, --tv-purple, --tv-gradient-brand,
 *     --font-display) used directly by marketing surfaces, brand
 *     lockups, and the signature purple→blue gradient.
 *
 * HSL format: channels without the hsl() wrapper, e.g. "35 94% 56%".
 */
/*
 * Note: This file intentionally does NOT @import Google Fonts. When
 * bundlers (Turbopack, PostCSS) inline stylesheets, a nested @import url()
 * ends up mid-file and violates the CSS spec ("@import rules must precede
 * all rules"). Consumers who want the Tango Vision fonts should import
 *   @import "@tv/design-tokens/fonts.css";
 * as the very first line of their root stylesheet, or use their
 * framework's font loader (e.g. next/font) with the same families.
 */
/* ------------------------------------------------------------------ */
/* Brand tokens — constant across light/dark                           */
/* ------------------------------------------------------------------ */
:root {
  /* --- Brand palette (from Winter Palette in Figma) --- */
  --tv-orange: #F8A324;           /* core brand orange, accents, CTAs */
  --tv-orange-warm: #FFBA07;      /* logomark fill, roll-up highlights */
  --tv-orange-soft: #FECF6E;      /* strokes, radar rings on dark */
  --tv-orange-deep: #D28D05;      /* pressed / hover-dark, printed ink */
  --tv-purple: #5B407F;           /* primary deep purple */
  --tv-purple-light: #8869AF;     /* top of gradient, lift on dark */
  --tv-purple-deep: #6B4D93;      /* bottom of gradient */
  --tv-blue: #0D46AB;             /* polygraphy accent, secondary action */
  --tv-blue-mid: #2661AF;         /* bottom of business-card gradient */
  --tv-teal: #2A7884;             /* data / chart accent */
  --tv-teal-bright: #11DDDB;      /* live status, realtime pulse */

  /* Neutrals (Winter palette — secondary) */
  --tv-black: #111523;
  --tv-ink: #322927;              /* warm ink — body on paper */
  --tv-gray-900: #17171C;
  --tv-gray-700: #322927;
  --tv-gray-500: #6A6B7A;
  --tv-gray-300: #9D9386;
  --tv-gray-200: #BDBDBD;
  --tv-gray-100: #D7E4E5;
  --tv-sand-100: #E0DAD3;
  --tv-sand-200: #CFC8B9;
  --tv-sand-300: #B5AB9B;
  --tv-white: #FFFFFF;

  /* Signature gradients (business cards, flyers, key slides) */
  --tv-gradient-brand: linear-gradient(180deg, #5B407F 0%, #2661AF 100%);
  --tv-gradient-purple: linear-gradient(180deg, rgba(136,105,175,0.85) 0%, rgba(107,77,147,0.95) 100%);
  --tv-gradient-warm: linear-gradient(180deg, #F8A324 0%, #D28D05 100%);

  /* --- Typography --- */
  --font-display: "Montserrat", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-sans:    "Montserrat", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-body:    "Open Sans", "Montserrat", ui-sans-serif, system-ui, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Type scale (8-point web scale, rooted in Figma print sizes) */
  --step--2: 0.75rem;     /* 12 — fine print / labels */
  --step--1: 0.875rem;    /* 14 */
  --step-0:  1rem;        /* 16 — body */
  --step-1:  1.125rem;    /* 18 */
  --step-2:  1.5rem;      /* 24 — subhead (Montserrat Medium) */
  --step-3:  2rem;        /* 32 */
  --step-4:  2.5rem;      /* 40 — section head (Montserrat Bold) */
  --step-5:  3rem;        /* 48 — wordmark scale */
  --step-6:  4.5rem;      /* 72 — roll-up headline */
  --step-7:  6rem;        /* 96 — hero display */

  --leading-tight: 1.05;
  --leading-snug:  1.2;
  --leading-body:  1.55;
  --leading-loose: 1.7;

  --tracking-tight:  -0.02em;
  --tracking-normal: 0;
  --tracking-wide:   0.10em;      /* TANGO.VISION wordmark */
  --tracking-xwide:  0.24em;      /* DIGITAL TWINS tag */

  /* --- Elevation --- */
  --shadow-sm: 0 1px 2px rgba(17,21,35,0.06), 0 1px 1px rgba(17,21,35,0.04);
  --shadow-md: 0 6px 18px rgba(17,21,35,0.10), 0 2px 4px rgba(17,21,35,0.05);
  --shadow-lg: 0 20px 40px rgba(17,21,35,0.16), 0 6px 12px rgba(17,21,35,0.08);
  --shadow-glow-orange: 0 0 0 1px rgba(248,163,36,0.35), 0 10px 30px rgba(248,163,36,0.25);
  --shadow-glow-purple: 0 0 0 1px rgba(91,64,128,0.40), 0 12px 36px rgba(91,64,128,0.30);

  /* --- Spacing (8-point) --- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;

  /* --- Motion --- */
  --ease-out:   cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in:    cubic-bezier(0.64, 0, 0.78, 0);
  --ease-inout: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast:   140ms;
  --dur-base:   240ms;
  --dur-slow:   420ms;
}
/* ------------------------------------------------------------------ */
/* Light mode (default) — docs, auth, print surfaces                   */
/* Maps brand palette onto shadcn semantic slots.                      */
/* ------------------------------------------------------------------ */
:root {
  /* --- Brand (HSL for shadcn) --- */
  --primary: 35 94% 56%;              /* #F8A324 — Tango orange */
  --primary-foreground: 232 35% 11%;  /* #111523 — ink on orange */

  /* --- Surfaces --- */
  --background: 60 27% 98%;           /* #FAFAF7 — warm off-white */
  --foreground: 232 35% 11%;          /* #111523 */
  --card: 0 0% 100%;
  --card-foreground: 232 35% 11%;
  --popover: 0 0% 100%;
  --popover-foreground: 232 35% 11%;

  /* --- Secondary / Muted / Accent --- */
  --secondary: 266 33% 38%;           /* #5B407F — deep purple */
  --secondary-foreground: 0 0% 100%;
  --muted: 40 10% 90%;                /* warm gray */
  --muted-foreground: 236 6% 45%;     /* #6A6B7A */
  --accent: 35 94% 56%;               /* same as primary on light */
  --accent-foreground: 232 35% 11%;

  /* --- Semantic --- */
  --destructive: 9 73% 55%;           /* #E2533A */
  --destructive-foreground: 0 0% 100%;
  --success: 158 51% 47%;             /* #3BB58A */
  --success-foreground: 0 0% 100%;
  --warning: 35 94% 56%;              /* brand orange */
  --warning-foreground: 232 35% 11%;
  --info: 179 86% 47%;                /* #11DDDB */
  --info-foreground: 232 35% 11%;

  /* --- Chrome --- */
  --border: 232 35% 11% / 0.10;       /* rgba(17,21,35,0.10) */
  --input: 232 35% 11% / 0.10;
  --ring: 43 100% 51%;                /* #FFBA07 — focus */

  /* --- Sidebar --- */
  --sidebar-background: 60 27% 98%;
  --sidebar-foreground: 232 35% 11%;
  --sidebar-primary: 35 94% 56%;
  --sidebar-primary-foreground: 232 35% 11%;
  --sidebar-accent: 40 10% 90%;
  --sidebar-accent-foreground: 232 35% 11%;
  --sidebar-border: 232 35% 11% / 0.10;
  --sidebar-ring: 43 100% 51%;

  /* --- Chart palette (brand-aligned) --- */
  --chart-1: 35 94% 56%;              /* orange */
  --chart-2: 188 52% 34%;             /* teal */
  --chart-3: 266 33% 38%;             /* purple */
  --chart-4: 218 85% 36%;             /* blue */
  --chart-5: 179 86% 47%;             /* teal-bright */

  /* --- Geometry (radar-ring brand → friendly radii) --- */
  --radius: 0.75rem;                  /* 12px — default card */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 20px;                  /* QR tiles, flyer cards */
  --radius-xl: 28px;                  /* marketing hero */
  --radius-2xl: 40px;
  --radius-pill: 999px;

  /* --- App semantic (mirrors brand README) --- */
  --bg: 60 27% 98%;
  --bg-elevated: 0 0% 100%;
  --bg-panel: 40 10% 94%;
  --fg: 232 35% 11%;
  --fg-muted: 236 6% 45%;
  --fg-subtle: 40 5% 60%;
}
/* ------------------------------------------------------------------ */
/* Dark mode — the primary product surface                             */
/* Dark-first: app chrome #0E1020 with elevated panels #181A2E.        */
/* ------------------------------------------------------------------ */
.dark {
  --primary: 35 94% 56%;              /* #F8A324 stays warm on dark */
  --primary-foreground: 232 35% 11%;

  --background: 233 38% 9%;           /* #0E1020 — app bg */
  --foreground: 0 0% 100%;
  --card: 233 31% 14%;                /* #181A2E — elevated */
  --card-foreground: 0 0% 100%;
  --popover: 233 31% 14%;
  --popover-foreground: 0 0% 100%;

  --secondary: 266 33% 38%;           /* deep purple */
  --secondary-foreground: 0 0% 100%;
  --muted: 233 28% 17%;               /* #1F223A — panel */
  --muted-foreground: 0 0% 100% / 0.68;
  --accent: 35 94% 56%;
  --accent-foreground: 232 35% 11%;

  --destructive: 9 73% 55%;
  --destructive-foreground: 0 0% 100%;
  --success: 158 51% 47%;
  --success-foreground: 0 0% 100%;
  --warning: 35 94% 56%;
  --warning-foreground: 232 35% 11%;
  --info: 179 86% 47%;
  --info-foreground: 232 35% 11%;

  --border: 0 0% 100% / 0.10;         /* rgba(255,255,255,0.10) */
  --input: 0 0% 100% / 0.10;
  --ring: 43 100% 51%;                /* #FFBA07 focus */

  --sidebar-background: 233 38% 9%;
  --sidebar-foreground: 0 0% 100%;
  --sidebar-primary: 35 94% 56%;
  --sidebar-primary-foreground: 232 35% 11%;
  --sidebar-accent: 233 28% 17%;
  --sidebar-accent-foreground: 0 0% 100%;
  --sidebar-border: 0 0% 100% / 0.10;
  --sidebar-ring: 43 100% 51%;

  /* Chart palette tuned for dark surfaces (slightly brighter) */
  --chart-1: 35 94% 58%;
  --chart-2: 179 86% 47%;
  --chart-3: 270 41% 60%;
  --chart-4: 218 85% 56%;
  --chart-5: 158 51% 55%;

  /* App semantic */
  --bg: 233 38% 9%;
  --bg-elevated: 233 31% 14%;
  --bg-panel: 233 28% 17%;
  --fg: 0 0% 100%;
  --fg-muted: 0 0% 100% / 0.68;
  --fg-subtle: 0 0% 100% / 0.45;
}
/* ------------------------------------------------------------------ */
/* Base resets                                                         */
/* ------------------------------------------------------------------ */
*,
*::before,
*::after {
  border-color: hsl(var(--border));
}
body {
  background-color: hsl(var(--background));
  color: hsl(var(--foreground));
  font-family: var(--font-sans);
}
/* Keyboard focus — always visible, always brand amber */
:where(*):focus-visible {
  outline: 2px solid hsl(var(--ring));
  outline-offset: 2px;
}
/*
 * Tango Vision — Brand semantic classes
 *
 * Opt-in helpers for marketing surfaces, brand lockups, and the
 * signature orange accent rule. Import this alongside tokens.css on
 * any surface that shows brand identity (homepage, auth, pricing,
 * about, onboarding, kiosks, signage). Product UIs that live entirely
 * inside tv-console / Building OS typically only need tokens.css.
 *
 *   import '@tv/design-tokens/tokens.css';
 *   import '@tv/design-tokens/brand.css';
 *
 * Voice — taken from the brand guide:
 *   - Never cheerful. Quietly confident, systems-minded.
 *   - No emoji. No exclamation marks.
 *   - Headlines are blunt manifestos, not claims.
 *   - ALL-CAPS for mission statements + eyebrow labels (wide tracking).
 *   - Title Case is almost never used.
 */
/* ------------------------------------------------------------------ */
/* Display / heading classes                                           */
/* ------------------------------------------------------------------ */
.tv-display,
h1.tv {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--step-7);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: hsl(var(--foreground));
  text-wrap: balance;
}
.tv-h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--step-5);
  line-height: var(--leading-tight);
  letter-spacing: -0.01em;
  text-wrap: balance;
}
.tv-h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--step-4);
  line-height: var(--leading-snug);
}
.tv-h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--step-3);
  line-height: var(--leading-snug);
}
.tv-subhead {
  font-family: var(--font-display);
  font-weight: 500;            /* Montserrat Medium — brand subhead */
  font-size: var(--step-2);
  line-height: var(--leading-snug);
  color: var(--tv-orange);
}
.tv-eyebrow {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--step--2);
  letter-spacing: var(--tracking-xwide);
  text-transform: uppercase;
  color: var(--tv-orange);
}
.tv-wordmark {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}
/* ------------------------------------------------------------------ */
/* Body / content classes                                              */
/* ------------------------------------------------------------------ */
.tv-body {
  font-family: var(--font-body);
  font-weight: 300;            /* Open Sans Light — brand voice */
  font-size: var(--step-0);
  line-height: var(--leading-body);
  text-wrap: pretty;
}
.tv-body-strong {
  font-weight: 500;
}
.tv-caption {
  font-family: var(--font-display);
  font-size: var(--step--2);
  font-weight: 500;
  color: hsl(var(--muted-foreground));
  letter-spacing: 0.02em;
}
.tv-code {
  font-family: var(--font-mono);
  font-size: 0.92em;
}
/* ------------------------------------------------------------------ */
/* Signature accent — the 64×6 orange bar under hero headlines         */
/* ------------------------------------------------------------------ */
.tv-accent-rule::after {
  content: "";
  display: block;
  width: 64px;
  height: 6px;
  border-radius: 999px;
  background: var(--tv-orange);
  margin-top: 18px;
}
/* ------------------------------------------------------------------ */
/* Surface helpers                                                     */
/* ------------------------------------------------------------------ */
.tv-surface-brand {
  background: var(--tv-gradient-brand);
  color: #FFFFFF;
}
.tv-surface-purple {
  background: var(--tv-purple);
  color: #FFFFFF;
}
.tv-surface-dark {
  background: #0E1020;
  color: #FFFFFF;
}
.tv-surface-panel {
  background: #181A2E;
  color: #FFFFFF;
}
.tv-surface-sand {
  background: #FAFAF7;
  color: var(--tv-black);
}
/* ------------------------------------------------------------------ */
/* Radar-ring motif — the signature background treatment               */
/* Faint concentric rings radiating from top-right at 10% opacity.     */
/* Apply `.tv-radar-bg` to any dark surface for brand ambience.        */
/* ------------------------------------------------------------------ */
.tv-radar-bg {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.tv-radar-bg::before {
  content: "";
  position: absolute;
  top: -40%;
  right: -20%;
  width: 120%;
  aspect-ratio: 1;
  border-radius: 50%;
  background:
    radial-gradient(circle at center,
      transparent 0%, transparent 20%,
      rgba(255,255,255,0.02) 22%, rgba(255,255,255,0.02) 24%,
      transparent 26%, transparent 34%,
      rgba(255,255,255,0.03) 36%, rgba(255,255,255,0.03) 38%,
      transparent 40%, transparent 48%,
      rgba(255,255,255,0.04) 50%, rgba(255,255,255,0.04) 52%,
      transparent 54%, transparent 62%,
      rgba(255,255,255,0.06) 64%, rgba(255,255,255,0.06) 66%,
      transparent 68%, transparent 76%,
      rgba(255,255,255,0.08) 78%, rgba(255,255,255,0.08) 80%,
      transparent 82%
    );
  pointer-events: none;
  z-index: -1;
}
/* Radar pulse — used on live indicators, map sensors, loading spinners */
.tv-radar-pulse {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.tv-radar-pulse::before,
.tv-radar-pulse::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px solid var(--tv-orange);
  animation: tv-radar-pulse 2s var(--ease-out) infinite;
}
.tv-radar-pulse::after {
  animation-delay: 1s;
}
@keyframes tv-radar-pulse {
  0%   { transform: scale(0.6); opacity: 0.9; }
  100% { transform: scale(2.4); opacity: 0;   }
}
/* ------------------------------------------------------------------ */
/* Utility: brand-aligned focus ring for non-shadcn elements           */
/* ------------------------------------------------------------------ */
.tv-focus-ring:focus-visible {
  outline: 2px solid var(--tv-orange-warm);
  outline-offset: 2px;
}
/* Editor-specific full-screen layout (scoped to .editor-layout) */
.editor-layout {
  width: 100%;
  height: 100vh;
  overflow: hidden;
}