/* ============================================================
   UTILITIES-TOKENS.CSS
   Batten University — Token-based utility classes

   Generates single-purpose utility classes from the full
   token system in global-batten.css.

   Load after global-batten.css, before component stylesheets.

   Contents:
     1.  Text Color
     2.  Background Color — Semantic surfaces
     3.  Background Color — Brand
     4.  Background Color — Palette (teal scale)
     5.  Background Color — Palette (navy scale)
     6.  Background Color — Neutrals
     7.  Border Color — Semantic
     8.  Border Color — Brand
     9.  Border Color — Palette

   All classes use !important — these are overrides by intent.
   Same pattern as Bootstrap's utility classes.

   COLLISION NOTE:
   .text-muted and .bg-light will conflict with Bootstrap
   if you load Bootstrap CSS. Rename those two if needed:
     .text-muted     → .text-muted-brand
     .bg-light       → .bg-light-brand
============================================================ */


/* ============================================================
   1. TEXT COLOR
============================================================ */

/* Semantic text tokens */
.text-body         { color: var(--text-body) !important; }          /* #333333 */
.text-content      { color: var(--text-content) !important; }       /* #444444 */
.text-heading      { color: var(--text-heading) !important; }       /* navy-700 */
.text-heading-dark { color: var(--text-heading-dark) !important; }  /* navy-800 */
.text-on-dark      { color: var(--text-on-dark) !important; }       /* #ffffff */
.text-muted        { color: var(--text-muted) !important; }         /* #8996a0 brand gray */
.text-muted-mid    { color: var(--text-muted-mid) !important; }     /* #555555 */
.text-muted-dark   { color: var(--text-muted-dark) !important; }    /* #666666 */
.text-meta         { color: var(--text-meta) !important; }          /* #4b5463 */
.text-subtle       { color: var(--text-subtle) !important; }        /* #64727d */
.text-subdued      { color: var(--text-subdued) !important; }       /* #687482 */
.text-link         { color: var(--text-link) !important; }          /* navy-700 */
.text-teal         { color: var(--color-teal-700) !important; }          /* teal-700 #006494 */
.text-navy-light   { color: var(--color-navy-text-light) !important; }    /* #DBF0FF — on dark nav */

/* Brand text */
.text-primary      { color: var(--color-navy-700) !important; }       /* navy-700 */
.text-primary-dark { color: var(--color-navy-800) !important; }  /* navy-800 */
.text-accent       { color: var(--color-teal-500) !important; }        /* teal-500 */
.text-accent-light { color: var(--color-teal-400) !important; }  /* teal-400 */
.text-accent-hover { color: var(--color-teal-700) !important; }  /* teal-700 */
.text-gold         { color: var(--color-gold) !important; }          /* #f7b801 */
.text-white        { color: var(--color-white) !important; }
.text-black        { color: var(--color-black) !important; }
.text-gray         { color: var(--color-gray) !important; }          /* #8996a0 */


/* ============================================================
   2. BACKGROUND COLOR — SEMANTIC SURFACES
============================================================ */

.bg-surface-dark     { background-color: var(--color-navy-800) !important; }      /* navy-800 */
.bg-surface-darker   { background-color: var(--color-navy-850) !important; }    /* navy-850 */
.bg-surface-deepest  { background-color: var(--color-navy-900) !important; }   /* navy-900 */
.bg-surface-tint     { background-color: var(--color-blue-5) !important; }      /* #F5FBFF */
.bg-surface-light    { background-color: var(--color-gray-25) !important; }     /* #f4f4f4 */
.bg-surface-aside    { background-color: rgb(248, 250, 252) !important; }     /* rgb(248,250,252) */
.bg-surface-card     { background-color: #FBFCFE !important; }      /* #FBFCFE */
.bg-surface-row      { background-color: #f6f8fa !important; }       /* #f6f8fa */
.bg-surface-teal-light { background-color: var(--color-teal-100) !important; } /* teal-100 */


/* ============================================================
   3. BACKGROUND COLOR — BRAND
============================================================ */

.bg-primary        { background-color: var(--color-navy-700) !important; }       /* navy-700 */
.bg-primary-dark   { background-color: var(--color-navy-800) !important; }  /* navy-800 */
.bg-accent         { background-color: var(--color-teal-500) !important; }        /* teal-500 */
.bg-accent-light   { background-color: var(--brand-accent-light) !important; }  /* teal-400 */
.bg-accent-hover   { background-color: var(--color-teal-700) !important; }  /* teal-700 */
.bg-gold           { background-color: var(--color-gold) !important; }          /* #f7b801 */
.bg-white          { background-color: var(--color-white) !important; }
.bg-black          { background-color: var(--color-black) !important; }


/* ============================================================
   4. BACKGROUND COLOR — TEAL PALETTE SCALE
============================================================ */

.bg-teal-50   { background-color: var(--color-teal-50) !important; }    /* #F0F9FF */
.bg-teal-100  { background-color: var(--color-teal-100) !important; }   /* #D4F4FF */
.bg-teal-200  { background-color: var(--color-teal-200) !important; }   /* #A8E6F7 */
.bg-teal-300  { background-color: var(--color-teal-300) !important; }   /* #51cbee */
.bg-teal-400  { background-color: var(--color-teal-400) !important; }   /* #00a9d6 */
.bg-teal-500  { background-color: var(--color-teal-500) !important; }   /* #0091b9 */
.bg-teal-600  { background-color: var(--color-teal-600) !important; }   /* #0080a3 */
.bg-teal-700  { background-color: var(--color-teal-700) !important; }   /* #006494 */
.bg-teal-800  { background-color: var(--color-teal-800) !important; }   /* #004d6e */
.bg-teal-wash { background-color: var(--color-teal-wash) !important; }  /* #e5f3f9 */


/* ============================================================
   5. BACKGROUND COLOR — NAVY PALETTE SCALE
============================================================ */

.bg-navy-500  { background-color: var(--color-navy-500) !important; }   /* #1a5c8a */
.bg-navy-600  { background-color: var(--color-navy-600) !important; }   /* #0d4a73 */
.bg-navy-700  { background-color: var(--color-navy-700) !important; }   /* #003c69 */
.bg-navy-800  { background-color: var(--color-navy-800) !important; }   /* #002a4c */
.bg-navy-850  { background-color: var(--color-navy-850) !important; }   /* #00223d */
.bg-navy-900  { background-color: var(--color-navy-900) !important; }   /* #0b2336 */
.bg-navy-950  { background-color: var(--color-navy-950) !important; }   /* #001d35 */

/* Slate scale */
.bg-slate-200 { background-color: var(--color-slate-200) !important; }  /* #E7EEF4 */
.bg-slate-300 { background-color: var(--color-slate-300) !important; }  /* #DEE8ED */
.bg-slate-500 { background-color: var(--color-slate-500) !important; }  /* #91AEC1 */


/* ============================================================
   6. BACKGROUND COLOR — NEUTRALS
============================================================ */

.bg-blue-tint   { background-color: var(--color-blue-tint) !important; }    /* #F5FBFF */
.bg-light       { background-color: var(--color-gray-25) !important; }     /* #f4f4f4 */
.bg-gray        { background-color: var(--color-bg-gray) !important; }      /* #EFEFEF */
.bg-wash        { background-color: var(--color-bg-wash) !important; }      /* #F7F7F7 */
.bg-subtle      { background-color: var(--color-bg-subtle) !important; }    /* #f1f5f9 */
.bg-gray-100    { background-color: var(--color-gray-100) !important; }     /* #f1f1f1 */
.bg-gray-200    { background-color: var(--color-gray-200) !important; }     /* #e7e7e7 */
.bg-gray-300    { background-color: var(--color-gray-300) !important; }     /* #cccccc */


/* ============================================================
   7. BORDER COLOR — SEMANTIC
============================================================ */

.border-subtle         { border-color: var(--border-subtle) !important; }          /* blue-tint */
.border-accent         { border-color: var(--border-accent) !important; }          /* teal-500 */
.border-dark           { border-color: var(--border-dark) !important; }            /* navy-800 */
.border-light          { border-color: var(--border-light) !important; }           /* #f1f1f1 */
.border-mid            { border-color: var(--border-mid) !important; }             /* #e7e7e7 */
.border-tint           { border-color: var(--color-border-tint) !important; }      /* #EBF7FF */
.border-content        { border-color: var(--color-content-border) !important; }   /* #e5edf3 */
.border-inner          { border-color: var(--color-inner-border) !important; }     /* #dce8f0 */
.border-form           { border-color: var(--color-form-border) !important; }      /* #c5d4e0 */
.border-teal-wash      { border-color: var(--color-teal-wash-border) !important; } /* #d6ecf5 */


/* ============================================================
   8. BORDER COLOR — BRAND
============================================================ */

.border-primary        { border-color: var(--color-navy-700) !important; }          /* navy-700 */
.border-primary-dark   { border-color: var(--color-navy-800) !important; }     /* navy-800 */
.border-brand-accent   { border-color: var(--color-teal-500) !important; }           /* teal-500 */
.border-accent-light   { border-color: var(--brand-accent-light) !important; }     /* teal-400 */
.border-white          { border-color: var(--color-white) !important; }
.border-gold           { border-color: var(--color-gold) !important; }


/* ============================================================
   9. BORDER COLOR — PALETTE
============================================================ */

.border-teal-300  { border-color: var(--color-teal-300) !important; }
.border-teal-400  { border-color: var(--color-teal-400) !important; }
.border-teal-500  { border-color: var(--color-teal-500) !important; }
.border-teal-600  { border-color: var(--color-teal-600) !important; }
.border-teal-700  { border-color: var(--color-teal-700) !important; }
.border-navy-700  { border-color: var(--color-navy-700) !important; }
.border-navy-800  { border-color: var(--color-navy-800) !important; }
.border-navy-950  { border-color: var(--color-navy-950) !important; }
.border-gray-100  { border-color: var(--color-gray-100) !important; }
.border-gray-200  { border-color: var(--color-gray-200) !important; }
.border-gray-300  { border-color: var(--color-gray-300) !important; }
.border-slate-200 { border-color: var(--color-slate-200) !important; }
.border-slate-300 { border-color: var(--color-slate-300) !important; }