/* ============================================================================
   THEME TOKENS — single source of truth for all design-system custom properties
   ----------------------------------------------------------------------------
   This file holds ONLY token definitions (CSS custom properties). Every other
   stylesheet (app.css, Web.styles.css) and component consumes these via
   var(--bf-*). At runtime, app-utils.js overrides --bf-primary and the
   --bf-primary-N tints to track the active theme.

   Loaded first in index.html so the tokens exist before any consuming rules.
   ============================================================================ */

/* Theme variable defaults (overridden at runtime by theme.js / app-utils.js)
   Adjusted to lighter defaults for admin theme */
:root {
  /* Brand accent — kept ONLY for buttons, highlights and status indicators */
  --bf-primary: #82bc00; /* brand color */
  --bf-primary-rgb: 130, 188, 0; /* brand channels — base for soft tints */
  --bf-primary-dark: #6fa000; /* slightly darker shade */
  --bf-primary-text: #111827; /* dark text on light-green brand surfaces (matches Retail) */
  --bf-primary-contrast: var(--bf-primary-text);

  /* ===========================================
     NEUTRAL PALETTE — primary system colours
     (enterprise grey / dark / white theme)
     =========================================== */
  --bf-dark: #222222;            /* header, footer, dark brand surfaces */
  --bf-dark-2: #2b2b2b;          /* slightly elevated dark surface */
  --bf-dark-3: #333333;          /* dark borders / hover on dark */
  --bf-light-gray: #d3d3d3;      /* prominent light-grey bands (e.g. CTA) */
  --bf-surface: #f5f5f5;         /* default section background */
  --bf-surface-2: #ececec;       /* alternate light surface */
  --bf-white: #ffffff;
  --bf-border: #cccccc;          /* default border colour */
  --bf-border-soft: #e5e5e5;     /* subtle hairline borders */

  /* Text colours on neutral surfaces */
  --bf-text: #222222;            /* default body text */
  --bf-text-muted: #5c5c5c;      /* secondary text */
  --bf-text-on-dark: #f5f5f5;    /* text on dark surfaces */
  --bf-text-on-dark-muted: rgba(245, 245, 245, 0.72);

  /* ===========================================
     SEMANTIC STATUS PALETTE
     success / warning / danger / info.
       base   = text & border weight (≈ Tailwind 600)
       strong = solid-fill weight    (≈ Tailwind 500)
       rgb    = solid-fill channels  → build soft tints with
                rgba(var(--bf-*-rgb), <alpha>)
     Values mirror the Tailwind status classes still used in pages,
     so anything that migrates to these tokens looks identical.
     =========================================== */
  --bf-success: #16a34a;          /* green-600 */
  --bf-success-strong: #22c55e;   /* green-500 */
  --bf-success-rgb: 34, 197, 94;

  --bf-warning: #d97706;          /* amber-600 */
  --bf-warning-strong: #f59e0b;   /* amber-500 */
  --bf-warning-rgb: 245, 158, 11;

  --bf-danger: #dc2626;           /* red-600 — danger text & borders */
  --bf-danger-strong: #ef4444;    /* red-500 — solid danger fills (icon bg) */
  --bf-danger-rgb: 239, 68, 68;   /* red-500 channels — soft danger tints */
  --bf-danger-on-dark: #f87171;   /* red-400 — danger text/fills on dark surfaces */
  --bf-danger-on-dark-soft: #fca5a5; /* red-300 — softer danger text on dark */

  --bf-info: #2563eb;             /* blue-600 */
  --bf-info-strong: #3b82f6;      /* blue-500 */
  --bf-info-rgb: 59, 130, 246;

  /* ===========================================
     TYPOGRAPHY
     =========================================== */
  --bf-font-sans: Inter, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;

  /* ===========================================
     SPACING SCALE
     =========================================== */
  --bf-space-1: 0.25rem;
  --bf-space-2: 0.5rem;
  --bf-space-3: 0.75rem;
  --bf-space-4: 1rem;
  --bf-space-6: 1.5rem;
  --bf-space-8: 2rem;
  --bf-space-12: 3rem;
  --bf-space-16: 4rem;

  /* ===========================================
     BORDER RADIUS
     =========================================== */
  --bf-radius-sm: 0.5rem;
  --bf-radius: 0.75rem;
  --bf-radius-lg: 1rem;
  --bf-radius-xl: 1.25rem;
  --bf-radius-pill: 9999px;

  /* ===========================================
     SHADOWS
     =========================================== */
  --bf-shadow-sm: 0 1px 2px rgba(17, 24, 39, 0.05);
  --bf-shadow: 0 4px 16px rgba(17, 24, 39, 0.06);
  --bf-shadow-md: 0 8px 24px rgba(17, 24, 39, 0.08);
  --bf-shadow-lg: 0 16px 40px rgba(17, 24, 39, 0.12);

  /* Header height (kept in sync with .app-header) */
  --bf-header-height: 4rem;
}

/* Override Bootstrap's --bs-black so the framework's "black" tracks the theme */
:root {
  --bs-black: #231f20;
}

/* Helper for light tints using color-mix where available */
@supports (color: color-mix(in srgb, var(--bf-primary) 10%, white)) {
  :root {
    --bf-primary-50: color-mix(in srgb, var(--bf-primary) 6%, white);
    --bf-primary-100: color-mix(in srgb, var(--bf-primary) 12%, white);
    --bf-primary-200: color-mix(in srgb, var(--bf-primary) 24%, white);
    --bf-primary-300: color-mix(in srgb, var(--bf-primary) 36%, white);
    --bf-primary-400: color-mix(in srgb, var(--bf-primary) 48%, white);
    --bf-primary-500: color-mix(in srgb, var(--bf-primary) 64%, white);
    --bf-primary-600: var(--bf-primary);
    --bf-primary-700: var(--bf-primary-dark);
    --bf-primary-800: color-mix(in srgb, var(--bf-primary) 82%, black);
    --bf-primary-900: color-mix(in srgb, var(--bf-primary) 92%, black);
  }
}

/* Fallback hard-coded tints if color-mix not supported */
@supports not (color: color-mix(in srgb, var(--bf-primary) 10%, white)) {
  :root {
    --bf-primary-50: rgba(var(--bf-primary-rgb), 0.06);
    --bf-primary-100: rgba(var(--bf-primary-rgb), 0.12);
    --bf-primary-200: rgba(var(--bf-primary-rgb), 0.24);
    --bf-primary-300: rgba(var(--bf-primary-rgb), 0.36);
    --bf-primary-400: rgba(var(--bf-primary-rgb), 0.48);
    --bf-primary-500: rgba(var(--bf-primary-rgb), 0.64);
    --bf-primary-600: var(--bf-primary);
    --bf-primary-700: var(--bf-primary-dark);
    --bf-primary-800: rgba(var(--bf-primary-rgb), 0.82);
    --bf-primary-900: rgba(var(--bf-primary-rgb), 0.92);
  }
}

/* Public footer surface tokens (alias the dark-brand surface) */
:root {
  --bf-public-footer: var(--bf-dark);
  --bf-public-footer-text: var(--bf-text-on-dark);
}