/* ═══════════════════════════════════════════════════════════════
   TOKENS.CSS — Single source of truth for brand & UI colours
   Loaded by the storefront, admin and auth layouts BEFORE any
   other stylesheet. Bootstrap's Sass build mirrors the primary
   values in resources/sass/_variables.scss (Sass needs literals).
═══════════════════════════════════════════════════════════════ */
:root {
    /* ── Primary (navy) ────────────────────────────────────────── */
    --color-primary:            #061738;
    --color-primary-rgb:        6, 23, 56;
    --color-primary-hover:      #1a3a7a;   /* lighter — hover */
    --color-primary-hover-rgb:  26, 58, 122;
    --color-primary-active:     #030d22;   /* darker — pressed / deep surfaces */
    --color-primary-active-rgb: 3, 13, 34;
    --color-primary-light:      #eef2f9;   /* subtle tinted background */
    --color-primary-border:     #c9d3e6;   /* tinted border for selected items */
    --color-on-primary:         #ffffff;

    /* ── Accent (gold — matches the logo) ──────────────────────── *
     * Use on dark/primary surfaces or as decoration. On white, use
     * --color-accent-text for any text (AA 5:1).                     */
    --color-accent:             #D1A84A;
    --color-accent-rgb:         209, 168, 74;
    --color-accent-dark:        #a8832e;
    --color-accent-light:       #e8c87a;
    --color-accent-text:        #8a6a1f;
    --color-accent-pale:        rgba(209, 168, 74, .07);
    --color-accent-soft:        rgba(209, 168, 74, .14);

    /* ── Neutrals ──────────────────────────────────────────────── */
    --color-bg:                 #F5F6F8;
    --color-surface:            #FFFFFF;
    --color-surface-2:          #F8F9FB;
    --color-text:               #0F172A;
    --color-text-2:             #334155;
    --color-text-muted:         #5F6B7A;
    --color-border:             #E5E7EB;
    --color-border-strong:      #CBD5E1;

    /* ── Semantic ──────────────────────────────────────────────── */
    --color-success:            #15803d;
    --color-success-rgb:        22, 163, 74;
    --color-warning:            #b45309;
    --color-warning-rgb:        217, 119, 6;
    --color-danger:             #dc2626;
    --color-danger-rgb:         220, 38, 38;
    --color-info:               #0e7490;
    --color-info-rgb:           8, 145, 178;

    /* ── Focus ring ────────────────────────────────────────────── */
    --color-focus-ring:         rgba(6, 23, 56, .22);

    /* ── Bootstrap 5.3 runtime overrides (CDN build on storefront) ── */
    --bs-primary:               var(--color-primary);
    --bs-primary-rgb:           var(--color-primary-rgb);
    --bs-primary-text-emphasis: var(--color-primary);
    --bs-primary-bg-subtle:     var(--color-primary-light);
    --bs-primary-border-subtle: var(--color-primary-border);
    --bs-link-color:            var(--color-primary);
    --bs-link-color-rgb:        var(--color-primary-rgb);
    --bs-link-hover-color:      var(--color-primary-hover);
    --bs-link-hover-color-rgb:  var(--color-primary-hover-rgb);
    --bs-focus-ring-color:      var(--color-focus-ring);
    --bs-body-color:            var(--color-text);
    --bs-secondary-color:       var(--color-text-muted);
    --bs-border-color:          var(--color-border);
}