/**
 * myTQM — Digital Total Quality Management Systems
 * Brand Design System Variables
 *
 * Reference: myTQM Brand Guidelines v1.1 (March 2026)
 * DO NOT modify these values without approval from dean@myTQM.co.uk
 *
 * Last Updated: 29 March 2026
 */

:root {
  /* ========================================
     PRIMARY BRAND COLORS (Section 3)
     ======================================== */

  --mytqm-deep-navy: #0B1D3A;
  --mytqm-electric-teal: #00C4A0;
  --mytqm-teal-mid: #007A6B;

  /* RGB values for rgba() usage */
  --mytqm-deep-navy-rgb: 11, 29, 58;
  --mytqm-electric-teal-rgb: 0, 196, 160;
  --mytqm-teal-mid-rgb: 0, 122, 107;

  /* ========================================
     SECONDARY COLORS (Section 3)
     ======================================== */

  --mytqm-sky-blue: #3CBFDE;
  --mytqm-slate: #4A6080;
  --mytqm-text-dim: #7B9CB8;

  /* ========================================
     SURFACE & BACKGROUND COLORS (Section 3)
     ======================================== */

  --mytqm-light-mint: #F0F7F6;
  --mytqm-off-white: #E8F4FF;
  --mytqm-dark-surface: #0E1A2A;
  --mytqm-pure-white: #FFFFFF;

  /* ========================================
     STATUS COLORS — UI ONLY (Section 5)
     IMPORTANT: Never use as brand colors
     ======================================== */

  --mytqm-status-success: #00C4A0;      /* Electric Teal - audit passed, confirmed */
  --mytqm-status-info: #3CBFDE;         /* Sky Blue - active tasks, alerts */
  --mytqm-status-warning: #F0A04A;      /* Amber - overdue, action needed */
  --mytqm-status-error: #F07070;        /* Red - failures, critical alerts */
  --mytqm-status-neutral: #4A6080;      /* Slate - draft, inactive */

  /* ========================================
     TYPOGRAPHY (Section 4)
     Font: DM Sans (Google Fonts)
     ======================================== */

  --mytqm-font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI',
                       'Helvetica Neue', Arial, sans-serif;

  /* Font weights */
  --mytqm-font-light: 300;
  --mytqm-font-regular: 400;
  --mytqm-font-medium: 500;
  --mytqm-font-semibold: 600;
  --mytqm-font-bold: 700;

  /* Type scale — Digital (Section 4) */
  --mytqm-text-display: 3rem;          /* 48-64px, Bold 700, line-height 1.1 */
  --mytqm-text-h1: 2.25rem;            /* 36-42px, Bold 700, line-height 1.15 */
  --mytqm-text-h2: 1.625rem;           /* 26-30px, Medium 500, line-height 1.25 */
  --mytqm-text-h3: 1.125rem;           /* 18-22px, Medium 500, line-height 1.3 */
  --mytqm-text-body-large: 1rem;       /* 16-18px, Regular 400, line-height 1.7 */
  --mytqm-text-body: 0.875rem;         /* 14-16px, Regular 400, line-height 1.65 */
  --mytqm-text-label: 0.6875rem;       /* 11-13px, Medium 500, line-height 1.4 */
  --mytqm-text-caption: 0.625rem;      /* 10-12px, Light 300, line-height 1.5 */

  /* ========================================
     UI COMPONENT SPECS (Section 5)
     ======================================== */

  /* Border radius */
  --mytqm-radius-card: 0.625rem;       /* 10px - cards, large inputs */
  --mytqm-radius-input: 0.375rem;      /* 6px - inputs, action buttons */
  --mytqm-radius-pill: 1.25rem;        /* 20px - status pills, badges */

  /* Border weight */
  --mytqm-border-width: 1px;           /* Standard border */
  --mytqm-border-focus: 2px;           /* Keyboard focus outline */

  /* Surface depth (white overlay opacity for dark bg card hierarchy) */
  --mytqm-overlay-level-1: rgba(255, 255, 255, 0.03);
  --mytqm-overlay-level-2: rgba(255, 255, 255, 0.05);

  /* Interactive target sizes (WCAG 2.5.5) */
  --mytqm-target-min-height: 2.75rem;  /* 44px minimum */

  /* Icon sizing */
  --mytqm-icon-inline: 1rem;           /* 16px - inline with text */
  --mytqm-icon-standalone: 1.25rem;    /* 20px - standalone icons */
  --mytqm-icon-decorative: 1.5rem;     /* 24px - maximum decorative */

  /* ========================================
     ACCESSIBILITY (Section 5)
     ======================================== */

  /* Keyboard focus - Electric Teal 2px outline */
  --mytqm-focus-outline: 0.125rem solid var(--mytqm-electric-teal);
  --mytqm-focus-offset: 0.125rem;

  /* ========================================
     LOGO USAGE (Section 2)
     ======================================== */

  /* Minimum logo sizes */
  --mytqm-logo-min-width-screen: 140px;
  --mytqm-logo-min-width-print: 32mm;
  --mytqm-icon-min-size-screen: 24px;
  --mytqm-icon-min-size-print: 8mm;

  /* ========================================
     BUTTON STYLES
     Primary CTA (Section 5)
     ======================================== */

  /* DO: Electric Teal fill, Deep Navy text */
  --mytqm-btn-primary-bg: var(--mytqm-electric-teal);
  --mytqm-btn-primary-text: var(--mytqm-deep-navy);
  --mytqm-btn-primary-hover-bg: #00AB8F;  /* Slightly darker teal */

  /* DON'T: Never reverse (dark bg, teal text) */

  /* ========================================
     CHART COLORS (Section 5)
     ======================================== */

  --mytqm-chart-primary: var(--mytqm-sky-blue);      /* Sky Blue #3CBFDE */
  --mytqm-chart-secondary: var(--mytqm-electric-teal); /* Electric Teal #00C4A0 */
  --mytqm-chart-warning: var(--mytqm-status-warning); /* Amber #F0A04A */
}

/* ========================================
   TYPOGRAPHY CLASSES
   ======================================== */

.mytqm-font {
  font-family: var(--mytqm-font-family);
}

.mytqm-display {
  font-size: var(--mytqm-text-display);
  font-weight: var(--mytqm-font-bold);
  line-height: 1.1;
  letter-spacing: -0.03125rem; /* -0.5px */
}

.mytqm-h1 {
  font-size: var(--mytqm-text-h1);
  font-weight: var(--mytqm-font-bold);
  line-height: 1.15;
  letter-spacing: -0.01875rem; /* -0.3px */
}

.mytqm-h2 {
  font-size: var(--mytqm-text-h2);
  font-weight: var(--mytqm-font-medium);
  line-height: 1.25;
  letter-spacing: -0.0125rem; /* -0.2px */
}

.mytqm-h3 {
  font-size: var(--mytqm-text-h3);
  font-weight: var(--mytqm-font-medium);
  line-height: 1.3;
  letter-spacing: 0;
}

.mytqm-body {
  font-size: var(--mytqm-text-body);
  font-weight: var(--mytqm-font-regular);
  line-height: 1.65;
  letter-spacing: 0;
}

.mytqm-label {
  font-size: var(--mytqm-text-label);
  font-weight: var(--mytqm-font-medium);
  line-height: 1.4;
  letter-spacing: 0.03125rem; /* +0.5px */
  text-transform: uppercase;
}

/* ========================================
   ACCESSIBILITY UTILITIES
   ======================================== */

/* Keyboard focus styles */
*:focus-visible {
  outline: var(--mytqm-focus-outline);
  outline-offset: var(--mytqm-focus-offset);
}

/* Minimum interactive target size (WCAG 2.5.5) */
button, a[href], input, select, textarea {
  min-height: var(--mytqm-target-min-height);
}

/* ========================================
   COMPONENT EXAMPLES
   ======================================== */

/* Card with correct border radius and surface depth */
.mytqm-card {
  background: var(--mytqm-pure-white);
  border-radius: var(--mytqm-radius-card);
  border: var(--mytqm-border-width) solid rgba(var(--mytqm-deep-navy-rgb), 0.1);
}

.mytqm-card-dark {
  background: var(--mytqm-dark-surface);
  background-image: linear-gradient(var(--mytqm-overlay-level-1), var(--mytqm-overlay-level-1));
  border-radius: var(--mytqm-radius-card);
  border: var(--mytqm-border-width) solid rgba(var(--mytqm-electric-teal-rgb), 0.2);
}

/* Primary CTA button */
.mytqm-btn-primary {
  background-color: var(--mytqm-btn-primary-bg);
  color: var(--mytqm-btn-primary-text);
  border-radius: var(--mytqm-radius-input);
  border: none;
  padding: 0.75rem 1.5rem;
  font-weight: var(--mytqm-font-medium);
  min-height: var(--mytqm-target-min-height);
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.mytqm-btn-primary:hover {
  background-color: var(--mytqm-btn-primary-hover-bg);
}

/* Status pill/badge */
.mytqm-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.25rem 0.75rem;
  border-radius: var(--mytqm-radius-pill);
  font-size: var(--mytqm-text-label);
  font-weight: var(--mytqm-font-medium);
  text-transform: uppercase;
  letter-spacing: 0.03125rem;
}

.mytqm-status-pill.success {
  background-color: rgba(var(--mytqm-electric-teal-rgb), 0.1);
  color: var(--mytqm-status-success);
}

.mytqm-status-pill.warning {
  background-color: rgba(240, 160, 74, 0.1);
  color: var(--mytqm-status-warning);
}

.mytqm-status-pill.error {
  background-color: rgba(240, 112, 112, 0.1);
  color: var(--mytqm-status-error);
}

/* ========================================
   BRAND COMPLIANCE NOTES
   ======================================== */

/**
 * IMPORTANT RULES:
 *
 * 1. Never use drop shadows — use border highlights and contrast only
 * 2. Never use status colors as brand colors (only for UI states)
 * 3. Never convey status through color alone — pair with icon/label
 * 4. All interactive elements must meet 44px min height (WCAG 2.5.5)
 * 5. Never use 2px or heavier borders (except focus outlines)
 * 6. Primary CTA = Electric Teal bg + Deep Navy text (never reverse)
 * 7. Minimum logo width: 140px screen, 32mm print
 * 8. Font: DM Sans only, fallback to system sans-serif
 *
 * For questions or exceptions: dean@myTQM.co.uk
 * Brand Guidelines: docs/myTQM_Brand_Guidelines_Scotland_v1.1 (1).pdf
 */