/* Truleno design tokens — byte-for-byte mirror of the canonical brand book
 * (truleno.com/brand). Keep in sync until @truleno/tokens ships (ATD-39).
 *
 * NEVER hardcode hex values in templates. Reference these tokens.
 */

:root {
  /* Brand — Indigo */
  --color-brand-50:  #EEF2FF;
  --color-brand-100: #E0E7FF;
  --color-brand-200: #C7D2FE;
  --color-brand-300: #A5B4FC;
  --color-brand-400: #818CF8;
  --color-brand-500: #6366F1;
  --color-brand-600: #4F46E5;
  --color-brand-700: #4338CA;
  --color-brand-800: #3730A3;
  --color-brand-900: #312E81;

  /* Accent — Cyan (paired with brand for the canonical gradient) */
  --color-accent-300: #67E8F9;
  --color-accent-400: #22D3EE;
  --color-accent-500: #06B6D4;
  --color-accent-600: #0891B2;

  /* Canonical brand gradient */
  --gradient-brand: linear-gradient(180deg, var(--color-accent-400) 0%, var(--color-brand-600) 100%);

  /* Neutrals — Zinc scale */
  --color-neutral-50:  #FAFAFA;
  --color-neutral-100: #F4F4F5;
  --color-neutral-200: #E4E4E7;
  --color-neutral-300: #D4D4D8;
  --color-neutral-400: #A1A1AA;
  --color-neutral-500: #71717A;
  --color-neutral-600: #52525B;
  --color-neutral-700: #3F3F46;
  --color-neutral-800: #27272A;
  --color-neutral-900: #18181B;
  --color-neutral-950: #09090B;

  /* Status (semantic) */
  --color-success: #10B981;
  --color-warning: #F59E0B;
  --color-danger:  #EF4444;
  --color-info:    #3B82F6;

  /* Dark-mode-first surface tokens */
  --bg:       var(--color-neutral-950);
  --bg-elev:  var(--color-neutral-900);
  --surface:  var(--color-neutral-800);
  --border:   var(--color-neutral-800);
  --text:     var(--color-neutral-50);
  --text-muted: var(--color-neutral-400);

  /* Typography — Geist Sans, fallback to system stack per brand book §5 */
  --font-sans: 'Geist Sans', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-mono: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* Convenience helpers used by the dashboard chrome */
.text-brand   { color: var(--color-brand-500); }
.bg-brand     { background-color: var(--color-brand-500); }
.bg-brand:hover { background-color: var(--color-brand-600); }
.border-brand { border-color: var(--color-brand-500); }
.text-accent  { color: var(--color-accent-400); }
.bg-accent    { background-color: var(--color-accent-400); }

/* Brand gradient text + bg */
.text-gradient-brand {
  background: var(--gradient-brand);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}