/* A&J Computers — design tokens
   Drop into the custom child theme (enqueue this file) and reference the variables
   in custom CSS / BB global styles. Hex values match the design reference. */

:root {
  /* ---- Brand ---- */
  --aj-blue:        #004280;  /* primary */
  --aj-blue-deep:   #00305c;  /* utility bar, gradients */
  --aj-navy:        #0d1b2a;  /* footer */
  --aj-blue-light:  #1565a8;
  --aj-red:         #7A1613;  /* accent / key CTAs */
  --aj-red-hover:   #5f110e;
  --aj-red-light:   #9a2420;

  /* ---- Service accents (one hue per offering) ---- */
  --aj-indigo:      #463f8c;  /* AI */
  --aj-indigo-btn:  #5b4ea8;
  --aj-indigo-btnh: #4a3f8e;
  --aj-indigo-tint: #ece9f6;
  --aj-ai-hero-1:   #10204a;  /* AI dark hero gradient start */
  --aj-ai-hero-2:   #1b1f52;  /* AI dark hero gradient end */

  --aj-purple:      #6b3aa0;  /* Cloud */
  --aj-purple-tint: #f1ebf8;

  --aj-green:       #0a6b4f;  /* Websites & Web Apps */
  --aj-green-hover: #085740;
  --aj-green-tint:  #e7f4ef;

  --aj-teal:        #0a6b66;  /* HIPAA */
  --aj-teal-hover:  #085450;
  --aj-teal-tint:   #e3f2ef;

  --aj-amber:       #9a5a00;  /* Risk / audits */
  --aj-amber-hover: #7a4700;
  --aj-amber-tint:  #f8f0e4;

  /* ---- Neutrals ---- */
  --aj-ink:         #16191d;  /* headings */
  --aj-body:        #46515f;
  --aj-body-soft:   #5a6675;
  --aj-muted:       #6b7787;
  --aj-muted-2:     #8b97a6;
  --aj-faint:       #9aa6b4;
  --aj-border:      #e4e9f0;
  --aj-bg-soft:     #f5f8fb;
  --aj-bg-hero:     #f5f9fd;
  --aj-white:       #ffffff;

  /* ---- Blog category colors (fg / bg) ---- */
  --aj-cat-cyber-fg: #7A1613; --aj-cat-cyber-bg: #f6ebea;
  --aj-cat-voip-fg:  #004280; --aj-cat-voip-bg:  #e9f1f9;
  --aj-cat-net-fg:   #0a6b4f; --aj-cat-net-bg:   #e7f4ef;
  --aj-cat-m365-fg:  #6b3aa0; --aj-cat-m365-bg:  #f1ebf8;
  --aj-cat-mit-fg:   #9a5a00; --aj-cat-mit-bg:   #f8f0e4;

  /* ---- Typography ---- */
  --aj-font-display: 'Archivo Expanded', 'Archivo', system-ui, sans-serif; /* hero H1, big CTA H2 */
  --aj-font-heading: 'Archivo', system-ui, sans-serif;                      /* section H2, card H3 */
  --aj-font-body:    'Public Sans', system-ui, sans-serif;                  /* body / UI */
  /* Wordmark only: client's 'Micro Extended' (Bold + Regular) */

  --aj-eyebrow-size: 13px;
  --aj-eyebrow-ls:   .16em;     /* uppercase, weight 700 */

  /* ---- Layout / spacing ---- */
  --aj-container:    1240px;
  --aj-gutter:       28px;
  --aj-section-y:    84px;
  --aj-card-pad:     28px;
  --aj-radius-card:  16px;
  --aj-radius-btn:   9px;
  --aj-radius-band:  22px;
  --aj-border-w:     1px;
}

/* Accent utility classes — let one template serve every service page.
   Apply to a section/row wrapper; modules read these via currentColor or nested rules. */
.aj-accent-blue   { --aj-accent: var(--aj-blue);   --aj-accent-hover: var(--aj-blue-deep);  --aj-accent-tint: #e9f1f9; }
.aj-accent-red    { --aj-accent: var(--aj-red);    --aj-accent-hover: var(--aj-red-hover);  --aj-accent-tint: var(--aj-cat-cyber-bg); }
.aj-accent-indigo { --aj-accent: var(--aj-indigo); --aj-accent-hover: var(--aj-indigo-btnh);--aj-accent-tint: var(--aj-indigo-tint); }
.aj-accent-green  { --aj-accent: var(--aj-green);  --aj-accent-hover: var(--aj-green-hover); --aj-accent-tint: var(--aj-green-tint); }
.aj-accent-teal   { --aj-accent: var(--aj-teal);   --aj-accent-hover: var(--aj-teal-hover);  --aj-accent-tint: var(--aj-teal-tint); }
.aj-accent-amber  { --aj-accent: var(--aj-amber);  --aj-accent-hover: var(--aj-amber-hover); --aj-accent-tint: var(--aj-amber-tint); }