/* ============================================================
   Regably — Color System
   Slate neutrals + a single trust-blue platform accent.
   Every text/bg pairing below is annotated with its WCAG 2.1
   contrast ratio. Targets: 4.5:1 body, 3:1 large text / UI.
   Two-layer theming: see --color-tenant-* at the bottom and
   the Tenant Theming Contract deliverable.
   ============================================================ */

:root {
  /* --- Brand: trust blue (platform action color) --- */
  --color-brand-primary:        #2563EB; /* white text on this = 5.17:1 (AA body) */
  --color-brand-primary-light:  #3B82F6; /* hover/active tints, large UI only */
  --color-brand-primary-dark:   #1D4ED8; /* white text = 7.0:1 (AAA-ish), pressed state */

  /* --- Brand: ink (deep slate for dark sections + secondary emphasis) --- */
  --color-brand-secondary:       #1E293B; /* white text = 15.3:1 */
  --color-brand-secondary-light: #334155; /* white text = 10.4:1 */
  --color-brand-secondary-dark:  #0F172A; /* white text = 17.9:1 */

  /* --- Brand: teal accent (used SPARINGLY — data viz, confirmation flourishes) --- */
  --color-brand-accent:        #0E9384; /* white text = 4.0:1 (large/UI only, not body) */
  --color-brand-accent-light:  #15B79E;
  --color-brand-accent-dark:   #0B7A6E; /* white text = 5.2:1 (AA body) */

  /* --- Neutral ramp: slate (10 fixed scale steps; identical in dark) --- */
  --color-neutral-50:  #F8FAFC;
  --color-neutral-100: #F1F5F9;
  --color-neutral-200: #E2E8F0;
  --color-neutral-300: #CBD5E1;
  --color-neutral-400: #94A3B8;
  --color-neutral-500: #64748B;
  --color-neutral-600: #475569;
  --color-neutral-700: #334155;
  --color-neutral-800: #1E293B;
  --color-neutral-900: #0F172A;

  /* --- Surfaces (light) --- */
  --color-surface-primary:   #FFFFFF; /* cards, primary panels */
  --color-surface-secondary: #F8FAFC; /* app/page background behind cards */
  --color-surface-subtle:    #F1F5F9; /* hover rows, inset fills */
  --color-surface-elevated:  #FFFFFF; /* modals/popovers (paired with shadow) */
  --color-surface-brand:     #EFF4FE; /* light blue callout fill; text-primary = 16.1:1 */

  /* --- Text (light) — all ratios vs surface-primary #FFFFFF --- */
  --color-text-primary:   #0F172A; /* 17.9:1 */
  --color-text-secondary: #475569; /* 7.5:1  */
  --color-text-muted:     #64748B; /* 4.8:1  (body-min) */
  --color-text-inverse:   #FFFFFF; /* for use on brand/ink surfaces */
  --color-text-brand:     #2563EB; /* 5.17:1 — links, brand text */
  --color-text-error:     #DC2626; /* 4.83:1 */
  --color-text-success:   #047857; /* 5.0:1  */
  --color-text-warning:   #B45309; /* 4.9:1  */

  /* --- Borders (light) --- */
  --color-border-subtle:      #F1F5F9; /* hairlines inside calm surfaces */
  --color-border-default:     #E2E8F0; /* default card/input border (1.3:1 vs white — decorative) */
  --color-border-emphasis:    #CBD5E1; /* hover/strong dividers */
  --color-border-interactive: #2563EB; /* focus rings, active fields */

  /* --- Status (solid signal colors) --- */
  --color-success: #059669; /* emerald-600 */
  --color-warning: #D97706; /* amber-600  */
  --color-error:   #DC2626; /* red-600 (destructive) */

  /* status tint fills (badges) — text uses the matching --color-text-* */
  --color-success-subtle: #ECFDF5; /* text-success on this = 4.7:1 */
  --color-warning-subtle: #FFFBEB; /* text-warning on this = 4.8:1 */
  --color-error-subtle:   #FEF2F2; /* text-error   on this = 4.7:1 */
  --color-info-subtle:    #EFF4FE; /* text-brand   on this = 4.9:1 */

  /* ===== TENANT LAYER (org white-label) =====
     Only these may be overridden per-org. Defaults = Regably brand,
     so an unconfigured tenant page still looks intentional. */
  --color-tenant-accent:          var(--color-brand-primary); /* org button/active color */
  --color-tenant-accent-contrast: #FFFFFF;                    /* text on accent; system flips to #0F172A if accent is light */
  --color-tenant-accent-strong:   var(--color-brand-primary-dark); /* AA-guaranteed accent for TEXT/links on white */
  --color-tenant-header-bg:       var(--color-surface-primary); /* registration page header band */
}

/* ============================================================
   Dark mode — neutral ramp stays fixed; semantic aliases flip.
   Ratios annotated vs the relevant dark surface.
   ============================================================ */
.dark {
  --color-surface-primary:   #111A2B; /* cards */
  --color-surface-secondary: #0A0F1C; /* app/page background */
  --color-surface-subtle:    #1A2333; /* hover rows, inset fills */
  --color-surface-elevated:  #1E293B; /* modals/popovers */
  --color-surface-brand:     #14233F; /* dark blue callout; text-primary = 13.5:1 */

  --color-text-primary:   #F8FAFC; /* 16.2:1 on surface-primary */
  --color-text-secondary: #CBD5E1; /* 9.1:1  */
  --color-text-muted:     #94A3B8; /* 5.2:1  */
  --color-text-inverse:   #0F172A; /* for use on light/accent surfaces */
  --color-text-brand:     #8AB4F8; /* 7.1:1 — links, brand text */
  --color-text-error:     #F87171; /* 5.6:1  */
  --color-text-success:   #34D399; /* 8.4:1  */
  --color-text-warning:   #FBBF24; /* 10.6:1 */

  --color-border-subtle:      #1A2333;
  --color-border-default:     #2A3850;
  --color-border-emphasis:    #3B4A63;
  --color-border-interactive: #3B82F6;

  --color-success-subtle: #052E24;
  --color-warning-subtle: #2E2008;
  --color-error-subtle:   #2E1110;
  --color-info-subtle:    #14233F;

  /* brand-primary stays #2563EB: white text on it = 5.17:1, valid on dark too */
  --color-tenant-accent-strong: var(--color-brand-primary-light); /* lighter for text on dark */
}