/* ============================================================
   Tech Made Simple by Ken Smith — brand layer
   ------------------------------------------------------------
   Loaded AFTER custom.css, so it only overrides design tokens.
   custom.css keeps the historical --gold-* variable names for the
   primary brand colour, so overriding them here re-skins every
   component in the app (public pages AND admin) in one place.

   Re-skin by editing this file only. Do not fork custom.css.

   Source of truth: TechMadeSimple-Brand-Guidelines.docx v1.0, May 2026
   (Google Drive > Tech_Made_Simple_by_Ken_Smith > Brand)

   The guideline colours, verbatim:
     Deep Teal   #0D7377   primary
     Warm Amber  #D4820A   accent
     Dark        #1A2E2E
     Body Text   #444444
     Background  #F5F5F5

   The guideline rules this file enforces:
     - Teal dominates, amber accents. Never equal proportions.
     - Amber is for highlights and calls to action only.
     - Never both colours together on a dark background.
     - White is the primary background; #F5F5F5 is secondary surfaces.
     - Arial throughout. Do not substitute.
   ============================================================ */

:root {
  /* --- Deep Teal: the primary. Buttons, links, headings, active states. --- */
  --gold:            #0D7377;
  --gold-hover:      #0A5A5D;   /* darker, hover/pressed */
  --gold-champagne:  #16A0A5;   /* lighter, link hover on dark */
  --gold-bronze:     #0A5A5D;
  --gold-tint:       rgba(13, 115, 119, 0.10);
  --gold-glow:       rgba(13, 115, 119, 0.18);
  --border-gold:     rgba(13, 115, 119, 0.35);

  /* --- Warm Amber: accent only. Sparing, intentional. --- */
  --amber:           #D4820A;
  --amber-tint:      rgba(212, 130, 10, 0.12);

  /* --- Surfaces ---
     Guideline: white is the primary background, #F5F5F5 secondary.
     The marketing site honours that literally (white page, grey bands).
     The admin app uses #F5F5F5 as its chrome so white content cards
     have something to sit on - that is the "secondary surface" case. */
  --bg-primary:      #F5F5F5;
  --bg-secondary:    #FFFFFF;
  --bg-tertiary:     #E7F0F0;   /* faint teal wash */
  --bg-card:         #FFFFFF;
  --bg-card-hover:   #E7F0F0;
  --bg-input:        #FFFFFF;
  --bg-overlay:      rgba(26, 46, 46, 0.55);
  --card-bg:         #FFFFFF;

  /* --- Ink --- */
  --text-primary:    #1A2E2E;   /* Dark */
  --text-muted:      #444444;   /* Body Text */
  --text-secondary:  #444444;
  /* The guidelines specify #888888 for captions. On white at 14px that is a
     3.54:1 contrast ratio and fails WCAG AA, which needs 4.5:1. Darkened to
     the nearest passing grey. Revert to #888888 if the brand takes priority. */
  --text-subtle:     #6B7272;   /* was #888888 */
  --text-tertiary:   #6B7272;
  --text-inverse:    #FFFFFF;

  /* --- Borders --- */
  --border:          #DCE4E4;
  --border-light:    #E7F0F0;
  --border-subtle:   #E7F0F0;

  /* --- Status. Success leans teal so it sits inside the palette. --- */
  --success:         #0D7377;
  --success-bg:      rgba(13, 115, 119, 0.10);
  --warning:         #D4820A;
  --warning-bg:      rgba(212, 130, 10, 0.12);

  /* --- Typography: Arial, per the guidelines. --- */
  --font-family: Arial, Helvetica, "Helvetica Neue", sans-serif;

  /* --- Brand extras used by the homepage --- */
  --teal:            #0D7377;
  --teal-deep:       #0A5A5D;
  --teal-darkest:    #1A2E2E;
  --teal-light:      #16A0A5;
  /* Measured: #B06D08 is 4.17:1 on white, #A66508 is 4.7:1 on white but only
     4.29:1 on the #F5F5F5 bands. #9C5F07 clears AA on BOTH surfaces
     (5.2:1 white, 4.7:1 grey) and still reads as the same amber. */
  --amber-deep:      #9C5F07;
  --surface-grey:    #F5F5F5;
  --radius:          10px;
  --radius-lg:       16px;
  --shadow-sm:       0 1px 2px rgba(26, 46, 46, .06), 0 2px 8px rgba(26, 46, 46, .05);
  --shadow-md:       0 8px 24px rgba(26, 46, 46, .10);
  --shadow-lg:       0 20px 48px rgba(26, 46, 46, .14);
}

/* Arial has no variable weights, so the semibold token would render as
   regular in some browsers. Push it to bold to keep headings solid. */
:root {
  --font-weight-semibold: 700;
}

body,
button,
input,
select,
textarea {
  font-family: var(--font-family);
}