/*
  Trinova-moREc shared design tokens
  Salar Dynamics initiative · collaboration apps
  Palette rooted in Trinova site teals (#016A83, #28C4E3) and dark surfaces
  (#0E2530 family), with mint accent kept for continuity with existing apps.
*/

:root {
  /* Surfaces (Trinova dark family, tuned for app UI) */
  --tm-bg-deep: #0a1a22;
  --tm-bg: #0e2530;
  --tm-bg-elevated: #173544;
  --tm-bg-card: #1a3340;
  --tm-footer-bg: #07141a;

  /* Borders */
  --tm-border: rgba(143, 210, 223, 0.14);
  --tm-border-strong: rgba(40, 196, 227, 0.35);

  /* Text */
  --tm-text: #eaf2f5;
  --tm-text-muted: #8fa0aa;
  --tm-text-dim: #6a7a8a;

  /* Brand */
  --tm-teal: #28c4e3;          /* Trinova bright teal */
  --tm-teal-deep: #016a83;     /* Trinova primary teal */
  --tm-teal-soft: rgba(40, 196, 227, 0.14);
  --tm-accent: #5ec4a0;        /* mint continuity with Timelines / map */
  --tm-accent-soft: rgba(94, 196, 160, 0.15);
  --tm-accent-glow: rgba(94, 196, 160, 0.35);
  --tm-amber: #e0b368;         /* Trinova gold */
  --tm-amber-soft: rgba(224, 179, 104, 0.18);
  --tm-green: #7fcb5e;         /* Trinova green */
  --tm-blue: #8fd2df;
  --tm-danger: #f3878c;

  /* moREc accents (from morec.com.au mark) */
  --tm-morec-red: #b03a2e;
  --tm-morec-green: #2e7d52;

  /* Elevation / shape */
  --tm-shadow: 0 12px 40px rgba(0, 0, 0, 0.45);
  --tm-radius: 14px;
  --tm-radius-sm: 10px;
  --tm-radius-pill: 999px;

  /* Type: IBM Plex matches Trinova site; mono for data */
  --tm-font: "IBM Plex Sans", "DM Sans", system-ui, sans-serif;
  --tm-mono: "IBM Plex Mono", "JetBrains Mono", ui-monospace, monospace;

  /* Layout */
  --tm-max: 1100px;
  --tm-pad: 1.25rem;
  --tm-header-pad-y: 1rem;
  --tm-logo-h: 64px;
}

/* Map legacy app variable names onto TM tokens when an app opts in */
.tm-theme {
  --bg-deep: var(--tm-bg-deep);
  --bg: var(--tm-bg);
  --bg-elevated: var(--tm-bg-elevated);
  --bg-card: var(--tm-bg-card);
  --border: var(--tm-border);
  --border-strong: var(--tm-border-strong);
  --text: var(--tm-text);
  --text-muted: var(--tm-text-muted);
  --text-dim: var(--tm-text-dim);
  --accent: var(--tm-accent);
  --accent-soft: var(--tm-accent-soft);
  --accent-glow: var(--tm-accent-glow);
  --amber: var(--tm-amber);
  --amber-soft: var(--tm-amber-soft);
  --blue: var(--tm-blue);
  --danger: var(--tm-danger);
  --shadow: var(--tm-shadow);
  --radius: var(--tm-radius);
  --font: var(--tm-font);
  --mono: var(--tm-mono);
}