/* AEDAR design system — global CSS
   Shared by both the Customer App and the Control Plane.
   Token values are imported verbatim from the Figma variable collections. */

@import "./foundations/fig-tokens.css";

/* ------------------------------------------------------------------
   AEDAR device status colors
   Sourced from the map-pin symbols in the Figma "Login-Monitoring"
   page (state=operational / warning / to validate / usage / offline).
   These are NOT part of a Figma variable collection, so they are
   promoted to named semantic tokens here so both apps share one source.
------------------------------------------------------------------- */
:root {
  --status-operational: rgb(52, 199, 89);   /* online / all good — green */
  --status-warning:     rgb(233, 186, 0);   /* needs attention — amber   */
  --status-validate:    rgb(30, 58, 138);   /* to validate / pending — deep blue */
  --status-in-use:      rgb(200, 71, 71);   /* in use / rescue event — red (= destructive) */
  --status-offline:     rgb(165, 165, 165); /* offline / no signal — gray (= muted-foreground) */

  /* Soft tints for status backgrounds / rows (matches accent tinting pattern) */
  --status-operational-soft: rgb(233, 249, 238);
  --status-warning-soft:     rgb(253, 248, 224);
  --status-validate-soft:    rgb(234, 246, 255);
  --status-in-use-soft:      rgba(200, 71, 71, 0.1);
  --status-offline-soft:     rgb(244, 244, 244);

  /* Battery levels — PROPOSED mapping, pending confirmation against a
     device-detail telemetry frame. Reuses the status ramp. */
  --battery-good:     var(--status-operational);
  --battery-low:      var(--status-warning);
  --battery-critical: var(--status-in-use);
}

/* Convenience: consume float tokens as px */
:root {
  color-scheme: light;
}

a { color: var(--colors-light-primary); text-decoration: none; }
a:hover { color: var(--colors-light-secondary-foreground); text-decoration: underline; }

/* ------------------------------------------------------------------
   Typography
   The file defines NO named text styles — type is built from the
   Typography variable collection (font-size-text-*, line-height,
   weights) + observed font usage. Every AEDAR product screen uses
   INTER as the primary UI face (default body 14px); the exact stack
   below is transcribed from the product frames. Geist appears only in
   the untouched shadcn/ui component-library reference pages, so it is
   NOT part of the AEDAR type system.
   Thai (default locale per PRD D19) uses GraphikTH in the brand; it
   is not web-available, so Noto Sans Thai stands in here.
------------------------------------------------------------------- */
:root {
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-thai: "Noto Sans Thai", var(--font-sans);
  --font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", monospace;
}

/* Semantic text roles (Inter). class -> size / line-height / weight */
.t-display     { font: 600 30px/36px var(--font-sans); letter-spacing: -0.02em; }
.t-title       { font: 600 24px/32px var(--font-sans); letter-spacing: -0.015em; }
.t-heading     { font: 600 20px/28px var(--font-sans); letter-spacing: -0.01em; }
.t-subheading  { font: 500 18px/28px var(--font-sans); }
.t-card-title  { font: 500 16px/24px var(--font-sans); }
.t-body        { font: 400 14px/20px var(--font-sans); }
.t-body-strong { font: 500 14px/20px var(--font-sans); }
.t-label       { font: 500 14px/20px var(--font-sans); }
.t-small       { font: 400 12px/16px var(--font-sans); }
.t-small-strong{ font: 500 12px/16px var(--font-sans); }
.t-mono        { font: 400 14px/20px var(--font-mono); letter-spacing: -0.01em; }