/* Tailwind v4 Custom Theme Configuration */
/* This file is loaded after the Tailwind CDN script */

/* ── PostPay Brand Palette ──────────────────────────────────────────────────
   Primary       #2D517B  navy blue
   Primary Shaded #3F70AB  lighter navy
   Secondary     #DACB54  gold
   Positive      #32899C  teal (success / positive indicators)
   Negative      #ED5976  coral (error / negative indicators)
   ────────────────────────────────────────────────────────────────────────── */

:root {
  --color-brand:            #2D517B;
  --color-brand-foreground: #ffffff;
  --color-brand-shaded:     #3F70AB;

  --color-secondary:        #DACB54;
  --color-secondary-foreground: #1a1a1a;

  --color-positive:         #32899C;
  --color-positive-foreground: #ffffff;

  --color-negative:         #ED5976;
  --color-negative-foreground: #ffffff;

  /* Legacy aliases kept for backward compat */
  --color-blue-sapphire:    #106383;
  --color-mustard:          #DACB54;   /* updated to new gold */
  --color-altgray:          #bfbfbf;
  --color-textprimary:      #545454;
}

/* ── Remap Tailwind's built-in teal palette → PostPay navy blue ─────────────
   Every teal-* class in templates automatically picks up the new primary.
   Zero template changes required.
   ────────────────────────────────────────────────────────────────────────── */
:root {
  --color-teal-50:  #f0f4f9;
  --color-teal-100: #dce7f2;
  --color-teal-200: #b9cfe5;
  --color-teal-300: #8fb0d4;
  --color-teal-400: #6591c0;
  --color-teal-500: #3F70AB;
  --color-teal-600: #2D517B;
  --color-teal-700: #244266;
  --color-teal-800: #1b3250;
  --color-teal-900: #12223b;
  --color-teal-950: #0b1929;
}

/* ── Brand utilities ─────────────────────────────────────────────────────── */
.text-brand          { color: var(--color-brand) !important; }
.bg-brand            { background-color: var(--color-brand) !important; }
.border-brand        { border-color: var(--color-brand) !important; }
.ring-brand          { --tw-ring-color: var(--color-brand) !important; }
.focus\:border-brand:focus { border-color: var(--color-brand) !important; }
.focus\:ring-brand:focus   { --tw-ring-color: var(--color-brand) !important; }
.hover\:bg-brand:hover     { background-color: var(--color-brand) !important; }

.text-brand-shaded        { color: var(--color-brand-shaded) !important; }
.bg-brand-shaded          { background-color: var(--color-brand-shaded) !important; }
.hover\:bg-brand-shaded:hover { background-color: var(--color-brand-shaded) !important; }

/* Brand opacity variants */
.bg-brand\/5   { background-color: color-mix(in srgb, var(--color-brand)  5%, transparent) !important; }
.bg-brand\/10  { background-color: color-mix(in srgb, var(--color-brand) 10%, transparent) !important; }
.bg-brand\/20  { background-color: color-mix(in srgb, var(--color-brand) 20%, transparent) !important; }
.bg-brand\/70  { background-color: color-mix(in srgb, var(--color-brand) 70%, transparent) !important; }

/* ── Secondary (Gold) utilities ──────────────────────────────────────────── */
.text-secondary        { color: var(--color-secondary) !important; }
.bg-secondary          { background-color: var(--color-secondary) !important; }
.border-secondary      { border-color: var(--color-secondary) !important; }
.bg-secondary\/10      { background-color: color-mix(in srgb, var(--color-secondary) 10%, transparent) !important; }
.bg-secondary\/20      { background-color: color-mix(in srgb, var(--color-secondary) 20%, transparent) !important; }

/* ── Positive (Teal) utilities ───────────────────────────────────────────── */
.text-positive         { color: var(--color-positive) !important; }
.bg-positive           { background-color: var(--color-positive) !important; }
.border-positive       { border-color: var(--color-positive) !important; }
.bg-positive\/10       { background-color: color-mix(in srgb, var(--color-positive) 10%, transparent) !important; }

/* ── Negative (Coral) utilities ──────────────────────────────────────────── */
.text-negative         { color: var(--color-negative) !important; }
.bg-negative           { background-color: var(--color-negative) !important; }
.border-negative       { border-color: var(--color-negative) !important; }
.bg-negative\/10       { background-color: color-mix(in srgb, var(--color-negative) 10%, transparent) !important; }

/* ── Legacy color utilities (kept for backward compat) ───────────────────── */
.text-blue-sapphire, .text-blueSapphire  { color: var(--color-blue-sapphire) !important; }
.bg-blue-sapphire, .bg-blueSapphire      { background-color: var(--color-blue-sapphire) !important; }
.bg-blue-sapphire\/10, .bg-blueSapphire\/10 { background-color: color-mix(in srgb, var(--color-blue-sapphire) 10%, transparent) !important; }

.text-mustard          { color: var(--color-mustard) !important; }
.bg-mustard            { background-color: var(--color-mustard) !important; }

.text-altgray          { color: var(--color-altgray) !important; }
.border-altgray        { border-color: var(--color-altgray) !important; }
.bg-altgray\/20        { background-color: color-mix(in srgb, var(--color-altgray) 20%, transparent) !important; }

.text-textprimary      { color: var(--color-textprimary) !important; }