/**
 * TechGig / TechMonk Design System
 * Derived from theme4 brand tokens (logo: techmonk-logo-mobile-header.svg)
 */

:root {
  --brand-red-600: #E30009;
  --brand-red-500: #ED1C24;
  --brand-red-400: #FF3B30;
  --brand-red-100: #FFE9E2;
  --brand-red-50:  #FFF5F2;

  --brand-ink:        #191B1F;
  --brand-ink-soft:   #2A2D32;
  --brand-ink-muted:  #5F666E;
  --brand-ink-subtle: #727272;

  --brand-border:       #DEDEDE;
  --brand-border-light: #F0F0F0;

  --brand-white:     #FFFFFF;
  --brand-bg-soft:   #F8FAFC;
  --brand-bg-muted:  #F1F5F9;

  --partner-500: #FF8200;
  --partner-rgb: 255, 130, 0;

  --primary:        var(--brand-red-600);
  --primary-hover:  #C40008;
  --primary-light:  var(--brand-red-100);
  --primary-subtle: var(--brand-red-50);
  --primary-rgb:    227, 0, 9;

  --navy:        var(--brand-ink);
  --text:        var(--brand-ink);
  --text-muted:  var(--brand-ink-muted);
  --text-subtle: var(--brand-ink-subtle);

  --border:      var(--brand-border);
  --bg:          var(--brand-white);
  --bg-soft:     var(--brand-bg-soft);
  --bg-muted:    var(--brand-bg-muted);

  --primary-dark: var(--primary-hover);

  --font-sans: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --font-size-xs:   0.75rem;
  --font-size-sm:   0.875rem;
  --font-size-base: 1rem;
  --font-size-lg:   1.125rem;
  --font-size-xl:   1.25rem;
  --font-size-2xl:  32px;
  --font-size-h1:   40px;
  --font-size-h2:   32px;
  --font-size-h3:   24px;
  --font-size-h4:   20px;
  --font-size-h5:   18px;
  --font-size-h6:   16px;
  --font-size-hero: 40px;
  --font-size-hero-lead: 18px;
  --font-size-p: 14px;

  --font-weight-medium:   500;
  --font-weight-semibold: 600;
  --font-weight-bold:     700;
  --font-weight-extrabold: 800;

  --line-height-tight:  1.15;
  --line-height-ratio:  1.5;
  --line-height-h1:     60px;
  --line-height-h2:     48px;
  --line-height-h3:     36px;
  --line-height-h4:     30px;
  --line-height-h5:     27px;
  --line-height-h6:     24px;
  --line-height-p:      21px;
  --line-height-hero-lead: 27px;
  --line-height-normal: 21px;
  --line-height-relaxed: 1.75;

  --letter-spacing-label: 0.08em;

  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;

  --radius-sm:   8px;
  --radius-md:   12px;
  --radius:      16px;
  --radius-lg:   24px;
  --radius-full: 999px;

  --shadow-sm: 0 2px 8px rgba(25, 27, 31, 0.04);
  --shadow:    0 4px 24px rgba(25, 27, 31, 0.06);
  --shadow-lg: 0 12px 40px rgba(25, 27, 31, 0.10);
  --shadow-primary: 0 8px 24px rgba(var(--primary-rgb), 0.28);

  --transition-fast: 0.15s ease;
  --transition-base: 0.25s ease;

  --gradient-primary: linear-gradient(90deg, var(--primary), var(--brand-red-400));
  --gradient-hero-overlay: linear-gradient(105deg, rgba(255,255,255,0.97) 42%, rgba(255,255,255,0.75) 68%, rgba(255,255,255,0.35) 100%);
  --gradient-cta: linear-gradient(135deg, var(--brand-ink) 0%, var(--brand-ink-soft) 100%);
  --gradient-mission: linear-gradient(135deg, rgba(var(--primary-rgb), 0.08) 0%, rgba(25, 27, 31, 0.04) 100%);
}

.text-brand { color: var(--primary) !important; }
.text-partner { color: var(--partner-500) !important; }
.bg-brand-subtle { background: var(--primary-subtle) !important; }
.bg-brand-light { background: var(--primary-light) !important; }
.border-brand { border-color: rgba(var(--primary-rgb), 0.25) !important; }

/* Professional inline warning message (Bootstrap warning tokens) */
.warning-message {
  color: var(--bs-warning-text-emphasis, #854d0e);
  background-color: var(--bs-warning-bg-subtle, #fffbeb);
  border: 1px solid var(--bs-warning-border-subtle, #fde68a);
  border-left: 3px solid var(--bs-warning, #f59e0b);
  border-radius: var(--radius-sm, 8px);
  padding: 0.5rem 0.7rem;
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.01em;
  margin: 0;
  width: 100%;
  display: flex;
  align-items: flex-start;
  gap: 0.45rem;
}
.warning-message i {
  color: var(--bs-warning, #f59e0b);
  font-size: 0.95rem;
  line-height: 1.35;
  flex-shrink: 0;
}
.warning-message span {
  flex: 1;
  min-width: 0;
}

body.tgaip-layout p {
  font-size: var(--font-size-p, 14px);
  line-height: var(--line-height-p, 21px);
}

body.tgaip-layout p.hero-lead {
  font-size: var(--font-size-hero-lead, 18px);
  line-height: var(--line-height-hero-lead, 27px);
}

body.tgaip-layout ul,
body.tgaip-layout ol,
body.tgaip-layout li {
  font-size: var(--font-size-p, 14px);
  line-height: var(--line-height-p, 21px);
}

body.tgaip-layout h1 {
  font-size: var(--font-size-h1, 40px);
  line-height: var(--line-height-h1, 60px);
}
body.tgaip-layout h2 {
  font-size: var(--font-size-h2, 32px);
  line-height: var(--line-height-h2, 48px);
}
body.tgaip-layout h3 {
  font-size: var(--font-size-h3, 24px);
  line-height: var(--line-height-h3, 36px);
}
body.tgaip-layout h4 {
  font-size: var(--font-size-h4, 20px);
  line-height: var(--line-height-h4, 30px);
}
body.tgaip-layout h5 {
  font-size: var(--font-size-h5, 18px);
  line-height: var(--line-height-h5, 27px);
}
body.tgaip-layout h6 {
  font-size: var(--font-size-h6, 16px);
  line-height: var(--line-height-h6, 24px);
}