/* Light Theme Variables */
:root {
  /* Font Families */
  --fontO: 'Fira Sans', sans-serif;
  --fontB: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  --font-brand: var(--fontO);
  --font-body: var(--fontB);

  /* Layout */
  --contentW: 1200px;
  --contentM: 880px;

  /* Primary Colors */
  --primary-color: #0d9488;
  --primary-hover: #0f766e;
  --on-primary: #ffffff;

  /* Text Colors */
  --text-primary: #222222;
  --text-secondary: #575762;
  --text-muted: #b2b2be;
  --text-disabled: rgba(28, 30, 34, 0.38);
  --text-light: #ffffff;
  --text-content: #222222;

  /* Background Colors */
  --bg-primary: #FFFFFF;
  --bg-primary-rgb: 255, 255, 255;
  --bg-secondary: #f5f5f5;
  --bg-tertiary: var(--bg-secondary);
  --pg-background: #DAE0E6;
  --bg-bottom: var(--bg-primary);
  --trust-banner: var(--primary-color);
  --bg-second: var(--bg-primary);
  --alert-header: #1F2833;

  /* Border Colors */
  --border-color: #e2e2e2;
  --border-color-light: #f0f0f0;

  /* Scrollbar Colors */
  --scrollbar-track: var(--bg-secondary);
  --scrollbar-thumb: var(--text-muted);
  --scrollbar-thumb-hover: var(--text-secondary);

  /* Semantic Colors */
  --success-color: #16a34a;
  --warning-color: #ca8a04;
  --info-color: #2563eb;
  --error-color: #dc2626;
  --on-error: #FFFFFF;

  /* Overlays & Shadows */
  --overlay-bg: rgba(0, 0, 0, 0.5);
  --box-shadow: rgba(17, 17, 26, 0.2) 0px 0px 16px;

  /* Social Colors */
  --color-facebook: #1877F2;
  --bg-facebook: #1877f21a;
  --color-instagram: #E1306C;
  --bg-instagram: #e1306c1a;
  --color-threads: #000000;
  --bg-threads: #0000001a;
  --color-google: #4285F4;
  --bg-google: #4285f41a;
  --color-whatsapp: #25D366;
  --bg-whatsapp: #25d3661a;
  --color-twitter: #1DA1F2;
  --bg-twitter: #1da1f21a;
  --color-telegram: #0088cc;
  --bg-telegram: #0088cc1a;
  --color-pinterest: #E60023;
  --bg-pinterest: #e600231a;
  --color-linkedin: #0a66c2;
  --bg-linkedin: #0a66c21a;
  --color-email: #EA4335;
  --bg-email: #ea43351a;

  /* Category & Theme Colors */
  --color-cyan: #06b6d4;
  --bg-cyan: #cffafe;

  --color-blue: #2563eb;
  --bg-blue: #dbeafe;

  --color-purple: #9333ea;
  --bg-purple: #f3e8ff;

  --color-pink: #db2777;
  --bg-pink: #fce7f3;

  --color-red: #dc2626;
  --bg-red: #fee2e2;

  --color-orange: #ea580c;
  --bg-orange: #ffedd5;

  --color-yellow: #ca8a04;
  --bg-yellow: #fef9c3;

  --color-green: #16a34a;
  --bg-green: #dcfce7;

  /* Helper Aliases */
  --color-indigo: var(--color-cyan);
  --bg-indigo: var(--bg-cyan);
  --color-teal: var(--color-cyan);
  --bg-teal: var(--bg-cyan);
  --bg-default: #f1f5f9;
}

/* Dark Theme Variables */
:root.dark-theme {
  /* Primary Colors */
  --primary-color: #0d9488;
  --primary-hover: #14b8a6;
  --on-primary: #ffffff;

  /* Text Colors */
  --text-primary: #fffdfc;
  --text-secondary: #f9f9fb;
  --text-muted: #878A8C;
  --text-disabled: rgba(242, 242, 242, 0.38);
  --text-light: #000000;
  --text-content: #D7DADC;

  /* Background Colors */
  --bg-primary: #22262f;
  --bg-secondary: #2D313B;
  --bg-tertiary: #161C24;
  --pg-background: #030303;
  --bg-bottom: var(--bg-secondary);
  --trust-banner: var(--bg-secondary);
  --bg-second: var(--bg-secondary);
  --alert-header: var(--bg-secondary);

  /* Border Colors */
  --border-color: #35393E;
  --border-color-light: #3A3D42;
  --border-color-dark: #474748;

  /* Scrollbar Colors */
  --scrollbar-track: var(--bg-secondary);
  --scrollbar-thumb: #424242;
  --scrollbar-thumb-hover: #4f4f4f;

  /* Semantic Colors */
  --accent-blue: #1D9BF0;
  --success-color: #16a34a;
  --warning-color: #ca8a04;
  --info-color: #2563eb;
  --error-color: #dc2626;
  --on-error: #000000;

  /* Overlays & Shadows */
  --box-shadow: rgba(0, 0, 0, 0.2) 0px 0px 16px;
  --overlay-bg: rgba(18, 18, 18, 0.8);

  /* Social Colors */
  --color-threads: #ffffff;
  --bg-threads: rgba(255, 255, 255, 0.14);
  --color-twitter: #f8fafc;
  --bg-twitter: rgba(248, 250, 252, 0.14);

  /* Category & Theme Colors */
  --color-cyan: #06b6d4;
  --bg-cyan: rgba(6, 182, 212, 0.16);

  --color-blue: #2563eb;
  --bg-blue: rgba(37, 99, 235, 0.16);

  --color-purple: #9333ea;
  --bg-purple: rgba(147, 51, 234, 0.16);

  --color-pink: #db2777;
  --bg-pink: rgba(219, 39, 119, 0.16);

  --color-red: #dc2626;
  --bg-red: rgba(220, 38, 38, 0.16);

  --color-orange: #ea580c;
  --bg-orange: rgba(234, 88, 12, 0.16);

  --color-yellow: #ca8a04;
  --bg-yellow: rgba(202, 138, 4, 0.16);

  --color-green: #16a34a;
  --bg-green: rgba(22, 163, 74, 0.16);

  /* Helper Aliases */
  --color-indigo: var(--color-cyan);
  --bg-indigo: var(--bg-cyan);
  --color-teal: var(--color-cyan);
  --bg-teal: var(--bg-cyan);
}

/* Global CSS */
body {
  font-family: var(--fontB);
  font-size: 17px;
  background-color: var(--bg-primary);
  text-transform: none;
  padding: 0;
  margin: 0;
  font-weight: 400;
  line-height: 1.5;
}

.sitTtl {
  font-family: var(--fontO);
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin-block: .67em;
  font-weight: 400;
  line-height: 1.4;
  color: currentColor;
}

h1 {
  font-size: 2rem;
}

h2 {
  font-size: 1.8rem;
}

h3 {
  font-size: 1.7rem;
}

h4 {
  font-size: 1.6rem;
}

h5 {
  font-size: 1.5rem;
}

h6 {
  font-size: 1.4rem;
}

img {
  display: block;
  position: relative;
  max-width: 100%;
  height: auto;
}

figure figcaption {
  font-size: 13.6px;
  text-align: center;
  display: block;
  margin-top: 4px;
  line-height: 1.3;
  opacity: .8;
}

/* conTnt CSS */
.conTnt img {
  display: inline-block;
  border-radius: 3px;
  height: auto !important;
}