/*
 * SpotrOS Enterprise Color System
 * ================================
 * Three-tier token architecture: Primitives → Semantic → Component
 *
 * RULES:
 * 1. Components NEVER reference primitives directly — use semantic tokens
 * 2. To rebrand, change primitives only — semantics cascade automatically
 * 3. NEVER use white text on amber-600 — use amber-800 bg or navy text
 * 4. All text/interactive colors are WCAG 2.1 AA compliant (4.5:1 minimum)
 *
 * Generated: 2026-03-17
 */

/* ==============================================
   TIER 1 — BRAND PRIMITIVES
   Raw color values. Never used directly in components.
   Only referenced by semantic tokens below.
   Change these to rebrand the entire site.
   ============================================== */
:root {
  /* ── Teal ──────────────────────────────────── */
  --color-teal-900: #073F45;
  --color-teal-800: #0A5C65;
  --color-teal-700: #0D7E8A;   /* ← brand primary (4.81:1 on white) */
  --color-teal-600: #1095A3;
  --color-teal-500: #17A7B7;   /* legacy — decorative only, fails 4.5:1 */
  --color-teal-400: #3BBFCC;
  --color-teal-300: #6DD4DC;
  --color-teal-200: #A8E6EB;
  --color-teal-100: #D4F2F5;
  --color-teal-50:  #EEF9FA;

  /* ── Amber ─────────────────────────────────── */
  --color-amber-900: #7C3D0A;
  --color-amber-800: #B45309;   /* ← accent for text/buttons (5.02:1 on white) */
  --color-amber-700: #C4681A;
  --color-amber-600: #E8922A;   /* decorative/bg only — 2.45:1 on white */
  --color-amber-500: #F0A84D;
  --color-amber-400: #F5C07A;
  --color-amber-300: #F8D4A0;
  --color-amber-200: #FCE8CC;
  --color-amber-100: #FEF4E8;
  --color-amber-50:  #FFFAF4;

  /* ── Navy ──────────────────────────────────── */
  --color-navy-900: #0F1C2E;   /* ← darkest text (17.13:1 on white) */
  --color-navy-800: #1A2E47;
  --color-navy-700: #243D5F;
  --color-navy-600: #2E4D78;
  --color-navy-500: #3D6291;

  /* ── Gray ──────────────────────────────────── */
  --color-gray-900: #111827;
  --color-gray-800: #1F2937;
  --color-gray-700: #374151;
  --color-gray-600: #4B5563;   /* secondary text (7.56:1 on white) */
  --color-gray-500: #6B7280;   /* muted text (4.83:1 on white) */
  --color-gray-400: #9CA3AF;   /* decorative only — fails 4.5:1 */
  --color-gray-300: #D1D5DB;
  --color-gray-200: #E5E7EB;
  --color-gray-100: #F3F4F6;
  --color-gray-50:  #F9FAFB;

  /* ── Neutrals ──────────────────────────────── */
  --color-white:      #FFFFFF;
  --color-warm-white: #F8F6F2;

  /* ── Status ────────────────────────────────── */
  --color-success-700: #15803D;
  --color-success-600: #16A34A;
  --color-success-100: #DCFCE7;

  --color-error-700: #B91C1C;
  --color-error-600: #DC2626;
  --color-error-100: #FEE2E2;

  --color-warning-700: #B45309;
  --color-warning-600: #D97706;
  --color-warning-100: #FEF3C7;
}


/* ==============================================
   TIER 2 — SEMANTIC TOKENS
   These reference primitives and define PURPOSE.
   Components use these — never primitives directly.
   ============================================== */
:root {
  /* ── Brand ─────────────────────────────────── */
  --brand-primary:        var(--color-teal-700);
  --brand-primary-hover:  var(--color-teal-800);
  --brand-primary-light:  var(--color-teal-50);
  --brand-accent:         var(--color-amber-800);    /* WCAG-safe for text */
  --brand-accent-hover:   var(--color-amber-900);
  --brand-accent-light:   var(--color-amber-50);
  --brand-accent-bg:      var(--color-amber-600);    /* bg/decorative only */

  /* ── Text ──────────────────────────────────── */
  --text-primary:         var(--color-navy-900);     /* 17.13:1 on white */
  --text-secondary:       var(--color-gray-600);     /*  7.56:1 on white */
  --text-muted:           var(--color-gray-500);     /*  4.83:1 on white */
  --text-inverse:         var(--color-white);
  --text-brand:           var(--color-teal-700);     /*  4.81:1 on white */
  --text-accent:          var(--color-amber-800);    /*  5.02:1 on white */

  /* Text on dark backgrounds (--bg-dark: navy-900 #0F1C2E) */
  --text-on-dark:         var(--color-gray-300);     /* #D1D5DB — 10.28:1 on navy-900 */
  --text-on-dark-muted:   var(--color-gray-400);     /* #9CA3AF —  6.26:1 on navy-900 */

  /* ── Backgrounds ───────────────────────────── */
  --bg-page:              var(--color-white);
  --bg-subtle:            var(--color-gray-50);
  --bg-warm:              var(--color-warm-white);
  --bg-brand:             var(--color-teal-700);
  --bg-brand-dark:        var(--color-teal-800);
  --bg-accent:            var(--color-amber-600);    /* use dark text on this */
  --bg-dark:              var(--color-navy-900);

  /* ── Borders ───────────────────────────────── */
  --border-light:         var(--color-gray-200);
  --border-medium:        var(--color-gray-300);
  --border-brand:         var(--color-teal-700);
  --border-accent:        var(--color-amber-800);

  /* ── Interactive ───────────────────────────── */
  --interactive-primary:       var(--color-teal-700);
  --interactive-primary-hover: var(--color-teal-800);
  --interactive-primary-focus: var(--color-teal-600);
  --interactive-accent:        var(--color-amber-800);
  --interactive-accent-hover:  var(--color-amber-900);

  /* ── Amber Button Variants (WCAG-compliant) ── */
  --btn-amber-bg:          var(--color-amber-800);   /* #B45309 */
  --btn-amber-text:        var(--color-white);       /* white on amber-800 = 5.02:1 */
  --btn-amber-bg-light:    var(--color-amber-600);   /* #E8922A */
  --btn-amber-text-dark:   var(--color-navy-900);    /* navy on amber-600 = 7.00:1 */
  --btn-amber-hover:       var(--color-amber-900);
  /* Rule: NEVER use white text on amber-600.
     ALWAYS use amber-800 bg OR navy text on amber-600. */

  /* ── Status ────────────────────────────────── */
  --status-success:        var(--color-success-700);  /* 5.02:1 on white */
  --status-success-bg:     var(--color-success-100);
  --status-error:          var(--color-error-600);
  --status-error-bg:       var(--color-error-100);
  --status-warning:        var(--color-warning-600);
  --status-warning-bg:     var(--color-warning-100);

  /* ── Legacy aliases — resolves var(--primary) / var(--primary-soft)
     used in keyword, signage, local, and pos-detail templates ── */
  --primary:       var(--brand-primary);
  --primary-hover: var(--brand-primary-hover);
  --primary-soft:  var(--brand-primary-light);
  --primary-light: var(--color-teal-50);
  --border:        var(--border-light);
  --radius-full:   9999px;
  --radius-xl:     var(--radius-xl, 1.25rem);
  --radius-md:     var(--radius-md, 0.75rem);
  --radius-sm:     var(--radius-sm, 0.5rem);

  /* ── Shadows ───────────────────────────────── */
  --shadow-color:          rgba(15, 28, 46, 0.08);
  --shadow-sm:  0 1px 3px  var(--shadow-color);
  --shadow-md:  0 4px 12px var(--shadow-color);
  --shadow-lg:  0 8px 24px var(--shadow-color);
  --shadow-xl:  0 16px 48px var(--shadow-color);
  --shadow-brand: 0 8px 40px rgba(13, 126, 138, 0.25);
}


/* ==============================================
   TIER 3 — DARK MODE (future-proofing)
   Defined but not activated.
   Uncomment the inner block to enable.
   ============================================== */
@media (prefers-color-scheme: dark) {
  /* Dark mode tokens — uncomment to activate:
  :root {
    --bg-page:         var(--color-navy-900);
    --bg-subtle:       var(--color-navy-800);
    --bg-dark:         var(--color-gray-900);
    --text-primary:    var(--color-gray-50);
    --text-secondary:  var(--color-gray-300);
    --text-muted:      var(--color-gray-400);
    --border-light:    var(--color-navy-700);
    --border-medium:   var(--color-navy-600);
    --shadow-color:    rgba(0, 0, 0, 0.3);
  }
  */
}