/* ============================================================
   WEBGURUKUL DESIGN SYSTEM — v1.0
   Brand: NLP Coaching & Mentoring | Urban India
   Palette Source: Logo analysis (saffron turban, black ground,
   warm white beard, golden radiating lines, deep brown tone)
   ============================================================ */


/* ── PHASE 1 & 2: PRIMITIVES — Color Scales ──────────────── */
/* All 10-stop scales. 500 = extracted base color.            */
/* Lighter stops: saturation ↓, lightness ↑                  */
/* Darker stops:  saturation ↑, lightness ↓                  */

:root {

  /* ── PRIMARY: Saffron Orange ───────────────────────────── */
  /* Source: The turban — the logo's dominant, high-energy    */
  /* hue. Represents warmth, energy, and spiritual authority  */
  /* in Indian culture. Used for brand identity & CTAs.       */
  --primary-50:  #FFF6ED;  /* near-white warm tint            */
  --primary-100: #FEECD5;  /* very light saffron wash         */
  --primary-200: #FDD5A5;  /* pale saffron                    */
  --primary-300: #FBB86A;  /* light warm orange               */
  --primary-400: #F89C3A;  /* medium saffron                  */
  --primary-500: #E87722;  /* BASE — turban saffron           */
  --primary-600: #C85D11;  /* deeper amber-orange             */
  --primary-700: #9F430A;  /* burnt sienna tone               */
  --primary-800: #7A2F07;  /* dark ochre                      */
  --primary-900: #4F1A04;  /* near-black orange               */

  /* ── SECONDARY: Golden Radiance ───────────────────────── */
  /* Source: The radiating lines and wordmark "WEBGURUKUL".  */
  /* A slightly more muted, golden-amber variant of primary. */
  /* Used for text accents, decorative elements, wordmarks.  */
  --secondary-50:  #FFF8EE;
  --secondary-100: #FEF0D4;
  --secondary-200: #FDDFA5;
  --secondary-300: #FAC963;
  --secondary-400: #F5AC2D;
  --secondary-500: #D4691E;  /* BASE — radiating line gold    */
  --secondary-600: #B3500F;
  --secondary-700: #8C3B09;
  --secondary-800: #662A06;
  --secondary-900: #3E1803;

  /* ── ACCENT: Warm Ivory / Beard White ─────────────────── */
  /* Source: The white beard — luminous, warm, almost sacred. */
  /* High contrast against primary; used for CTA text on     */
  /* dark surfaces, highlights, and reversed type.           */
  --accent-50:  #FFFFFF;  /* pure white                       */
  --accent-100: #FDFAF5;  /* warm white                       */
  --accent-200: #FAF3E6;  /* ivory                            */
  --accent-300: #F5E9D2;  /* antique white                    */
  --accent-400: #EDD8B3;  /* warm cream                       */
  --accent-500: #E2C38C;  /* BASE — warm ivory mid            */
  --accent-600: #C9A164;  /* light tan                        */
  --accent-700: #A67D42;  /* warm wheat                       */
  --accent-800: #7A5A28;  /* dark tan                         */
  --accent-900: #4D3512;  /* deep brown                       */

  /* ── NEUTRAL: Charcoal Ground ─────────────────────────── */
  /* Source: The logo's black background — not cold blue-    */
  /* black but a warm, earthy near-black. Grounds the brand. */
  --neutral-0:   #FFFFFF;
  --neutral-50:  #FAF9F7;  /* warm off-white (light bg)       */
  --neutral-100: #F2F0EB;  /* warm light gray                 */
  --neutral-200: #E4E0D8;  /* soft warm border                */
  --neutral-300: #CAC6BC;  /* medium warm gray                */
  --neutral-400: #A8A49A;  /* muted gray                      */
  --neutral-500: #7D7970;  /* text muted                      */
  --neutral-600: #55524A;  /* secondary text                  */
  --neutral-700: #3A3832;  /* primary text light mode         */
  --neutral-800: #252319;  /* deep warm charcoal              */
  --neutral-900: #181611;  /* near-black — matches logo bg    */
  --neutral-950: #0E0D09;  /* true deep black                 */

  /* ── SEMANTIC FIXED VALUES ────────────────────────────── */
  /* Success: Earthy green — grounded, not clinical           */
  --success-500: #3D9E5A;
  --success-100: #D4EDDB;

  /* Warning: Turmeric yellow — culturally resonant, visible  */
  --warning-500: #D4A017;
  --warning-100: #FAF0CC;

  /* Error: Deep vermilion — serious but warm, not cold red   */
  --error-500:   #C84030;
  --error-100:   #F9D7D3;
}


/* ── PHASE 3: SEMANTIC TOKENS — Light Mode ───────────────── */

:root {

  /* Backgrounds */
  --color-bg:               var(--neutral-50);   /* page canvas */
  --color-surface:          #FFFFFF;              /* card surface */
  --color-surface-raised:   var(--neutral-100);   /* elevated panel */
  --color-surface-sunken:   var(--neutral-200);   /* inset area */

  /* Borders */
  --color-border-default:   var(--neutral-200);
  --color-border-strong:    var(--neutral-300);
  --color-border-brand:     var(--primary-300);

  /* Text hierarchy */
  --color-text-primary:     var(--neutral-800);   /* headings, labels */
  --color-text-secondary:   var(--neutral-600);   /* body, secondary */
  --color-text-muted:       var(--neutral-400);   /* captions, hints */
  --color-text-inverse:     #FFFFFF;              /* on dark surfaces */
  --color-text-on-brand:    #FFFFFF;              /* on primary fills */

  /* Brand colors */
  --color-brand:            var(--primary-500);   /* hero saffron */
  --color-brand-hover:      var(--primary-600);
  --color-brand-subtle:     var(--primary-50);
  --color-brand-light:      var(--primary-100);

  /* Secondary brand (gold) */
  --color-gold:             var(--secondary-500);
  --color-gold-hover:       var(--secondary-600);
  --color-gold-subtle:      var(--secondary-50);

  /* CTA — same as brand for this identity */
  --color-cta:              var(--primary-500);
  --color-cta-hover:        var(--primary-600);
  --color-cta-text:         #FFFFFF;

  /* Semantic states */
  --color-success:          var(--success-500);
  --color-success-bg:       var(--success-100);
  --color-warning:          var(--warning-500);
  --color-warning-bg:       var(--warning-100);
  --color-error:            var(--error-500);
  --color-error-bg:         var(--error-100);

  /* Focus ring */
  --color-focus-ring:       var(--primary-400);
}


/* ── PHASE 3 (cont.): SEMANTIC TOKENS — Dark Mode ─────────── */
/* Disabled by default. Enable via Settings → Design System → Theme Mode. */
/*
@media (prefers-color-scheme: dark) {
  :root {
    --color-bg:               var(--neutral-950);
    --color-surface:          var(--neutral-900);
    --color-surface-raised:   var(--neutral-800);
    --color-surface-sunken:   #0A0904;
    --color-border-default:   var(--neutral-700);
    --color-border-strong:    var(--neutral-600);
    --color-border-brand:     var(--primary-700);
    --color-text-primary:     var(--neutral-100);
    --color-text-secondary:   var(--neutral-300);
    --color-text-muted:       var(--neutral-500);
    --color-text-inverse:     var(--neutral-900);
    --color-text-on-brand:    #FFFFFF;
    --color-brand:            var(--primary-400);
    --color-brand-hover:      var(--primary-300);
    --color-brand-subtle:     var(--primary-900);
    --color-brand-light:      var(--primary-800);
    --color-gold:             var(--secondary-400);
    --color-gold-hover:       var(--secondary-300);
    --color-gold-subtle:      var(--secondary-900);
    --color-cta:              var(--primary-400);
    --color-cta-hover:        var(--primary-300);
    --color-cta-text:         var(--neutral-950);
    --color-success:          #4EC26D;
    --color-success-bg:       #0D2E18;
    --color-warning:          #E8B420;
    --color-warning-bg:       #2A2005;
    --color-error:            #E05545;
    --color-error-bg:         #2E0B09;
    --color-focus-ring:       var(--primary-500);
  }
}
*/


/* ── PHASE 5: COMPONENT LIBRARY ──────────────────────────── */

/* ── Typography Foundation ────────────────────────────────  */

body {
  background-color: var(--color-bg);
  color: var(--color-text-primary);
  font-family: 'Inter', 'Segoe UI', system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.6;
}

h1, h2, h3, h4, h5, h6 {
  color: var(--color-text-primary);
  line-height: 1.25;
  font-weight: 700;
}

/* Brand display heading — saffron accent */
.heading-brand {
  color: var(--color-brand);
  font-weight: 800;
  letter-spacing: -0.02em;
}


/* ── BUTTONS ───────────────────────────────────────────────  */

/* Base button reset */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 20px;
  font-size: 15px;
  font-weight: 600;
  border-radius: 8px;
  border: 2px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition:
    background-color 0.18s ease,
    border-color 0.18s ease,
    color 0.18s ease,
    transform 0.1s ease,
    box-shadow 0.18s ease;
  white-space: nowrap;
  user-select: none;
}

.btn:active {
  transform: translateY(1px);
}

.btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--color-bg), 0 0 0 5px var(--color-focus-ring);
}

/* Primary — saffron fill, for CTAs */
.btn-primary {
  background-color: var(--color-brand);
  color: var(--color-text-on-brand);
  border-color: var(--color-brand);
}

.btn-primary:hover {
  background-color: var(--color-brand-hover);
  border-color: var(--color-brand-hover);
  box-shadow: 0 4px 14px color-mix(in srgb, var(--color-brand) 40%, transparent);
}

/* Secondary — gold outline */
.btn-secondary {
  background-color: transparent;
  color: var(--color-gold);
  border-color: var(--color-gold);
}

.btn-secondary:hover {
  background-color: var(--color-gold-subtle);
  border-color: var(--color-gold-hover);
  color: var(--color-gold-hover);
}

/* Outline — brand outline on transparent */
.btn-outline {
  background-color: transparent;
  color: var(--color-brand);
  border-color: var(--color-border-brand);
}

.btn-outline:hover {
  background-color: var(--color-brand-subtle);
  border-color: var(--color-brand);
}

/* Ghost — minimal, text only */
.btn-ghost {
  background-color: transparent;
  color: var(--color-text-secondary);
  border-color: transparent;
}

.btn-ghost:hover {
  background-color: var(--color-surface-raised);
  color: var(--color-text-primary);
}

/* Disabled — any variant */
.btn:disabled,
.btn[aria-disabled="true"] {
  background-color: var(--color-surface-sunken);
  color: var(--color-text-muted);
  border-color: var(--color-border-default);
  cursor: not-allowed;
  pointer-events: none;
  transform: none;
  box-shadow: none;
  opacity: 0.6;
}

/* Size variants */
.btn-sm {
  padding: 6px 14px;
  font-size: 13px;
  border-radius: 6px;
}

.btn-lg {
  padding: 14px 28px;
  font-size: 17px;
  border-radius: 10px;
}


/* ── CARDS ─────────────────────────────────────────────────  */

.card {
  background-color: var(--color-surface);
  border: 1px solid var(--color-border-default);
  border-radius: 12px;
  padding: 24px;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

/* Raised card — slight elevation */
.card-raised {
  background-color: var(--color-surface);
  border: 1px solid var(--color-border-default);
  border-radius: 12px;
  padding: 24px;
  box-shadow: var(--shadow-md);
}

/* Brand card — saffron left accent */
.card-brand {
  background-color: var(--color-surface);
  border: 1px solid var(--color-border-default);
  border-left: 4px solid var(--color-brand);
  border-radius: 0 12px 12px 0;
  padding: 20px 24px;
}

/* Interactive card with hover */
.card-interactive {
  background-color: var(--color-surface);
  border: 1px solid var(--color-border-default);
  border-radius: 12px;
  padding: 24px;
  cursor: pointer;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.card-interactive:hover {
  border-color: var(--color-brand);
  box-shadow: var(--shadow-brand);
  transform: translateY(-2px);
}

.card-interactive:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--color-bg), 0 0 0 5px var(--color-focus-ring);
}

.card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 16px;
}

.card-title {
  font-size: 17px;
  font-weight: 700;
  color: var(--color-text-primary);
  margin: 0 0 4px;
}

.card-subtitle {
  font-size: 13px;
  color: var(--color-text-muted);
  margin: 0;
}

.card-body {
  font-size: 15px;
  color: var(--color-text-secondary);
  line-height: 1.6;
}

.card-footer {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--color-border-default);
  display: flex;
  align-items: center;
  gap: 12px;
}


/* ── FORM INPUTS ───────────────────────────────────────────  */

.form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 20px;
}

.form-label {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text-primary);
}

.form-label-required::after {
  content: ' *';
  color: var(--color-brand);
}

.form-hint {
  font-size: 12px;
  color: var(--color-text-muted);
}

/* Base input styles */
.form-input,
.form-select,
.form-textarea {
  width: 100%;
  padding: 10px 14px;
  font-size: 15px;
  color: var(--color-text-primary);
  background-color: var(--color-surface);
  border: 1.5px solid var(--color-border-default);
  border-radius: 8px;
  outline: none;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
  box-sizing: border-box;
  appearance: none;
  -webkit-appearance: none;
}

.form-input::placeholder,
.form-textarea::placeholder {
  color: var(--color-text-muted);
}

/* Hover state */
.form-input:hover,
.form-select:hover,
.form-textarea:hover {
  border-color: var(--color-border-strong);
}

/* Focus state — saffron glow */
.form-input:focus,
.form-select:focus,
.form-textarea:focus {
  border-color: var(--color-brand);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-brand) 20%, transparent);
}

/* Error state */
.form-input--error,
.form-select--error,
.form-textarea--error {
  border-color: var(--color-error);
}

.form-input--error:focus,
.form-select--error:focus,
.form-textarea--error:focus {
  border-color: var(--color-error);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-error) 20%, transparent);
}

.form-error-text {
  font-size: 12px;
  color: var(--color-error);
  font-weight: 500;
}

/* Disabled state */
.form-input:disabled,
.form-select:disabled,
.form-textarea:disabled {
  background-color: var(--color-surface-sunken);
  color: var(--color-text-muted);
  cursor: not-allowed;
  opacity: 0.7;
}

.form-textarea {
  resize: vertical;
  min-height: 100px;
  line-height: 1.6;
}


/* ── ALERTS ────────────────────────────────────────────────  */

.alert {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 14px 16px;
  border-radius: 8px;
  border: 1px solid transparent;
  font-size: 14px;
  line-height: 1.5;
}

.alert-icon {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  margin-top: 1px;
}

.alert-title {
  font-weight: 600;
  margin-bottom: 2px;
}

.alert-body {
  color: inherit;
  opacity: 0.85;
}

/* Success alert */
.alert-success {
  background-color: var(--color-success-bg);
  border-color: color-mix(in srgb, var(--color-success) 40%, transparent);
  color: var(--color-success);
}

/* Warning alert */
.alert-warning {
  background-color: var(--color-warning-bg);
  border-color: color-mix(in srgb, var(--color-warning) 40%, transparent);
  color: var(--color-warning);
}

/* Error alert */
.alert-error {
  background-color: var(--color-error-bg);
  border-color: color-mix(in srgb, var(--color-error) 40%, transparent);
  color: var(--color-error);
}

/* Brand info alert */
.alert-brand {
  background-color: var(--color-brand-light);
  border-color: var(--color-border-brand);
  color: var(--primary-800);
}

@media (prefers-color-scheme: dark) {
  .alert-brand {
    color: var(--primary-200);
  }
}


/* ── LINKS ─────────────────────────────────────────────────  */

a,
.link {
  color: var(--color-brand);
  text-decoration: none;
  transition: color 0.15s ease, text-decoration-color 0.15s ease;
}

a:hover,
.link:hover {
  color: var(--color-brand-hover);
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--color-brand) 50%, transparent);
}

a:visited,
.link:visited {
  color: var(--secondary-600);
}

a:focus-visible,
.link:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--color-bg), 0 0 0 5px var(--color-focus-ring);
  border-radius: 2px;
}

/* Understated link — for nav/secondary contexts */
.link-subtle {
  color: var(--color-text-secondary);
  text-decoration: none;
}

.link-subtle:hover {
  color: var(--color-brand);
  text-decoration: none;
}


/* ── BADGES & TAGS ─────────────────────────────────────────  */

.badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.01em;
}

.badge-brand {
  background-color: var(--color-brand-light);
  color: var(--primary-800);
}

.badge-gold {
  background-color: var(--secondary-100);
  color: var(--secondary-800);
}

.badge-success {
  background-color: var(--color-success-bg);
  color: var(--color-success);
}

.badge-warning {
  background-color: var(--color-warning-bg);
  color: var(--color-warning);
}

.badge-error {
  background-color: var(--color-error-bg);
  color: var(--color-error);
}

.badge-neutral {
  background-color: var(--neutral-100);
  color: var(--neutral-700);
}


/* ── PHASE 7: OPTIONAL ENHANCEMENTS ──────────────────────── */

/* ── Gradients ─────────────────────────────────────────────  */

:root {
  /* Saffron hero gradient — logo-faithful radial burst */
  --gradient-brand:
    linear-gradient(135deg, var(--primary-400) 0%, var(--primary-600) 100%);

  /* Warm gold-to-saffron — for hero sections / banners */
  --gradient-hero:
    linear-gradient(160deg,
      var(--secondary-400) 0%,
      var(--primary-500)   50%,
      var(--primary-700)   100%);

  /* Radiant burst — echoes logo's sun rays; use on dark bg */
  --gradient-radiant:
    radial-gradient(ellipse at 50% 0%,
      color-mix(in srgb, var(--primary-400) 35%, transparent) 0%,
      transparent 70%);

  /* Dark surface gradient — deep charcoal brand canvas */
  --gradient-dark:
    linear-gradient(180deg, var(--neutral-900) 0%, var(--neutral-950) 100%);

  /* Subtle warm tint — for light section backgrounds */
  --gradient-warm-tint:
    linear-gradient(180deg, var(--primary-50) 0%, var(--neutral-50) 100%);
}

/* Usage classes */
.bg-gradient-brand   { background: var(--gradient-brand);     }
.bg-gradient-hero    { background: var(--gradient-hero);      }
.bg-gradient-radiant { background: var(--gradient-radiant);   }
.bg-gradient-dark    { background: var(--gradient-dark);      }
.bg-gradient-warm    { background: var(--gradient-warm-tint); }


/* ── Elevation / Shadow Scale ──────────────────────────────  */

:root {
  /* Warm tinted shadows — saffron trace in elevation */
  --shadow-xs:
    0 1px 2px color-mix(in srgb, var(--neutral-900) 8%, transparent);

  --shadow-sm:
    0 1px 3px  color-mix(in srgb, var(--neutral-900) 10%, transparent),
    0 1px 2px  color-mix(in srgb, var(--neutral-900) 6%, transparent);

  --shadow-md:
    0 4px 6px  color-mix(in srgb, var(--neutral-900) 8%, transparent),
    0 2px 4px  color-mix(in srgb, var(--neutral-900) 6%, transparent);

  --shadow-lg:
    0 10px 15px color-mix(in srgb, var(--neutral-900) 10%, transparent),
    0 4px 6px   color-mix(in srgb, var(--neutral-900) 5%, transparent);

  --shadow-xl:
    0 20px 25px color-mix(in srgb, var(--neutral-900) 12%, transparent),
    0 8px 10px  color-mix(in srgb, var(--neutral-900) 4%, transparent);

  /* Brand glow — saffron halo for CTA emphasis */
  --shadow-brand:
    0 4px 18px  color-mix(in srgb, var(--primary-500) 30%, transparent),
    0 1px 4px   color-mix(in srgb, var(--primary-500) 15%, transparent);

  /* Gold glow — secondary accents */
  --shadow-gold:
    0 4px 18px  color-mix(in srgb, var(--secondary-500) 25%, transparent);
}


/* ── Hover / Active State Modifiers ────────────────────────  */

:root {
  --hover-overlay:  color-mix(in srgb, var(--neutral-900) 6%, transparent);
  --active-overlay: color-mix(in srgb, var(--neutral-900) 12%, transparent);
}

/* Utility — darken any element slightly on hover */
.hover-dim:hover {
  background-color: var(--hover-overlay);
}

/* Primary button warm glow animation */
.btn-primary:hover {
  box-shadow: var(--shadow-brand);
}


/* ── Focus Ring System ─────────────────────────────────────  */

/* Global focus ring — consistent across all interactive elements */
:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 2px var(--color-bg),
    0 0 0 4px var(--color-focus-ring);
  border-radius: 4px;
}

/* Inset focus ring — for elements on dark surfaces */
.focus-inset:focus-visible {
  box-shadow:
    inset 0 0 0 2px var(--color-brand),
    0 0 0 4px color-mix(in srgb, var(--color-brand) 25%, transparent);
}


/* ── Utility Tokens Shorthand ──────────────────────────────  */

.text-brand     { color: var(--color-brand); }
.text-gold      { color: var(--color-gold); }
.text-primary   { color: var(--color-text-primary); }
.text-secondary { color: var(--color-text-secondary); }
.text-muted     { color: var(--color-text-muted); }
.text-inverse   { color: var(--color-text-inverse); }

.bg-brand       { background-color: var(--color-brand); }
.bg-brand-light { background-color: var(--color-brand-light); }
.bg-surface     { background-color: var(--color-surface); }
.bg-page        { background-color: var(--color-bg); }
.bg-dark        { background-color: var(--neutral-950); }

.border-brand   { border-color: var(--color-brand); }
.border-default { border-color: var(--color-border-default); }

.rounded-sm     { border-radius: 4px; }
.rounded-md     { border-radius: 8px; }
.rounded-lg     { border-radius: 12px; }
.rounded-xl     { border-radius: 16px; }
.rounded-full   { border-radius: 999px; }


/* ── PHASE 4: ACCESSIBILITY NOTES ─────────────────────────  */
/*
  WCAG Contrast Audit (approximate):

  Pair                              Ratio   AA     AAA
  ─────────────────────────────────────────────────────
  text-primary (#252319) on bg
  (#FAF9F7)                         12.8:1   ✅     ✅

  white on --color-brand
  (#fff on #E87722)                  3.1:1   ✅ L   ❌
  → For AA large text & UI: ✅ pass
  → For AA small body text: ❌ fail
  → FIX: Use --primary-700 (#9F430A) as bg → white gives 5.8:1 ✅

  white on --primary-700 (#9F430A)   5.8:1   ✅     ❌

  --color-brand (#E87722) on white   3.1:1   ✅ L   ❌
  → Use for large headings (>18px or >14px bold) only.
  → FIX for small text: Use --primary-700 on white = 5.8:1 ✅

  text-secondary (#55524A) on bg
  (#FAF9F7)                          7.1:1   ✅     ✅

  text-muted (#A8A49A) on bg         3.2:1   ✅ L   ❌
  → Use only for placeholder/hint text (non-essential)

  white on dark bg (#0E0D09)        19.4:1   ✅     ✅

  --primary-400 (#F89C3A) on
  dark bg (#181611)                  6.8:1   ✅     ✅

  ─────────────────────────────────────────────────────
  CORRECTED RULES:
  1. White on --color-brand (500): ONLY for 18px+ or bold 14px+.
     For small body text: use --primary-700 as background.
  2. --color-brand on white bg: ONLY for large/bold text.
     For small text: use --primary-700 (#9F430A) instead.
  3. Text-muted: never use for actionable or essential text.
*/