/* ============================================================================
   TrustElevate Admin — Design System
   colors_and_type.css  ·  Authoritative foundation tokens
   ----------------------------------------------------------------------------
   Source of truth: design-tokens.md (reconciled from trustelevate.com +
   business-dashboard SCSS + documentation portal CSS).
   Brand chrome = navy + teal. Purple is a DATA-VIZ accent only.
   ============================================================================ */

:root {
  /* ---- Brand — chrome (marketing / doc portal) ------------------------- */
  --te-navy:        #0b1f3a;   /* sidebar, sign-in hero, deepest surface     */
  --te-navy-light:  #132d52;   /* hover rows on navy, raised navy surfaces   */
  --te-navy-hover:  #1c3a64;   /* pressed / brighter navy                    */
  --te-teal:        #0d9488;   /* primary action, active nav, links on navy  */
  --te-teal-dark:   #0f766e;   /* teal text/icon on light (AA), pressed      */
  --te-teal-soft:   #ccfbf1;   /* teal tint backgrounds                      */
  --te-accent-sky:  #38bdf8;   /* logo highlight, focus ring on dark         */

  /* ---- Accents — data + secondary ------------------------------------- */
  --te-purple:      #9930dc;   /* DATA-VIZ ONLY: charts, viz chips           */
  --te-purple-soft: #f6eafc;
  --te-gold:        #db9f37;   /* secondary CTA, billing warnings            */
  --te-gold-soft:   #fdf4e3;

  /* ---- Neutrals -------------------------------------------------------- */
  --te-text:           #211f24;  /* primary text                            */
  --te-text-muted:     #6f6b7d;  /* secondary text                          */
  --te-text-muted-alt: #64748b;  /* tertiary / slate captions               */
  --te-surface:        #f8f7fa;  /* app content background                  */
  --te-surface-elevated:#ffffff; /* cards, panels, menus                    */
  --te-border:         #dbdade;  /* default border                          */
  --te-border-alt:     #e2e8f0;  /* cool border (tables, dividers)          */

  /* sidebar-on-navy tints */
  --te-side-text:  rgba(226, 232, 240, 0.72);
  --te-side-muted: rgba(148, 163, 184, 0.65);
  --te-side-label: rgba(148, 163, 184, 0.55);

  /* ---- Semantic -------------------------------------------------------- */
  --te-success: #18ad00;  --te-success-soft: #e9f9e6;
  --te-danger:  #e14c4c;  --te-danger-soft:  #fdeaea;
  --te-warning: #fd7e14;  --te-warning-soft: #fff5ec;
  --te-info:    #17a2b8;  --te-info-soft:    #eef9ff;

  /* ---- Spacing scale (4px base) --------------------------------------- */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px; --sp-5: 20px;
  --sp-6: 24px; --sp-8: 32px; --sp-10: 40px; --sp-12: 48px; --sp-16: 64px;

  /* ---- Radii ----------------------------------------------------------- */
  --te-radius-sm:   0.375rem;  /* 6px  — chips, small controls              */
  --te-radius-md:   0.5rem;    /* 8px  — buttons, inputs                    */
  --te-radius-lg:   0.75rem;   /* 12px — cards, panels, modals              */
  --te-radius-pill: 999px;

  /* ---- Elevation ------------------------------------------------------- */
  --te-shadow-sm:  0 11px 18px rgba(11, 31, 58, 0.05);   /* resting cards   */
  --te-shadow-md:  0 0.5rem 1rem rgba(11, 31, 58, 0.12); /* raised          */
  --te-shadow-pop: 0 12px 32px rgba(11, 31, 58, 0.18);   /* menus, modals   */
  --te-ring:       0 0 0 3px rgba(13, 148, 136, 0.18);   /* teal focus halo */

  /* ---- Layout ---------------------------------------------------------- */
  --te-sidebar-width: 260px;
  --te-sidebar-rail:  72px;
  --te-topbar-h:      60px;
  --te-content-max-width: 1280px;

  /* ---- Type families --------------------------------------------------- */
  --te-font-sans:  "Figtree", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --te-font-dense: "Inter", var(--te-font-sans);   /* dense tables / labels */
  --te-font-mono:  "JetBrains Mono", "SF Mono", Consolas, monospace;

  /* ---- Type scale (role tokens) --------------------------------------- */
  --te-fs-display: 2rem;      --te-lh-display: 1.15;   /* page-section hero  */
  --te-fs-title:   1.5rem;    --te-lh-title:   1.25;   /* page title  / 600  */
  --te-fs-section: 1.125rem;  --te-lh-section: 1.3;    /* section title / 600*/
  --te-fs-body:    1rem;      --te-lh-body:    1.5;    /* body / 400         */
  --te-fs-dense:   0.875rem;  --te-lh-dense:   1.45;   /* table / dense / 400 */
  --te-fs-caption: 0.75rem;   --te-lh-caption: 1.4;    /* caption,label / 500 */
  --te-fs-code:    0.8125rem; --te-lh-code:    1.4;    /* IDs / mono / 400    */
}

/* ============================================================================
   Semantic type classes — apply the scale consistently
   ============================================================================ */
.te-display {
  font-family: var(--te-font-sans); font-size: var(--te-fs-display);
  line-height: var(--te-lh-display); font-weight: 700; letter-spacing: -0.02em;
  color: var(--te-text);
}
.te-title {
  font-family: var(--te-font-sans); font-size: var(--te-fs-title);
  line-height: var(--te-lh-title); font-weight: 600; letter-spacing: -0.01em;
  color: var(--te-text);
}
.te-section {
  font-family: var(--te-font-sans); font-size: var(--te-fs-section);
  line-height: var(--te-lh-section); font-weight: 600; color: var(--te-text);
}
.te-body {
  font-family: var(--te-font-sans); font-size: var(--te-fs-body);
  line-height: var(--te-lh-body); font-weight: 400; color: var(--te-text);
}
.te-dense {
  font-family: var(--te-font-dense); font-size: var(--te-fs-dense);
  line-height: var(--te-lh-dense); font-weight: 400; color: var(--te-text);
}
.te-caption {
  font-family: var(--te-font-dense); font-size: var(--te-fs-caption);
  line-height: var(--te-lh-caption); font-weight: 500; color: var(--te-text-muted);
}
.te-label {
  font-family: var(--te-font-dense); font-size: var(--te-fs-caption);
  font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--te-text-muted);
}
.te-code {
  font-family: var(--te-font-mono); font-size: var(--te-fs-code);
  line-height: var(--te-lh-code); font-weight: 400; color: var(--te-text);
}