/**
 * Brand Stylesheet — Brad Wenner Digital
 * Auto-generated from brand.yml via scripts/build.py
 * Version: 1.0.0
 *
 * DO NOT EDIT THIS FILE DIRECTLY
 * Edit brand.yml and run: uv run scripts/build.py css
 */

:root {
  /* ============================================
     COLORS
     ============================================ */

  /* Primary */
  --brand-primary: #dfff11;
  --brand-primary-rgb: 223, 255, 17;

  /* Secondary */
  --brand-secondary: #ffffff;
  --brand-secondary-rgb: 255, 255, 255;

  /* Text */
  --brand-text: #000000;
  --brand-text-rgb: 0, 0, 0;

  /* Background */
  --brand-background: #ffffff;
  --brand-background-rgb: 255, 255, 255;

  /* Surface & Chrome */
  --brand-surface: #ffffff;
  --brand-on-surface: #000000;
  --brand-chrome-border: rgba(0,0,0,0.1);
  --brand-chrome-tint: rgba(0,0,0,0.03);
  --brand-chrome-shadow: rgba(0,0,0,0.2);

  /* Heading Color */
  --brand-heading-color: #000000;
  --brand-heading-color-rgb: 0, 0, 0;

  /* Section Color */
  --brand-section-color: #000000;
  --brand-section-color-rgb: 0, 0, 0;

  /* Grayscale */
  --brand-gray-very-dark: #2b2b2b;
  --brand-gray-very-dark-rgb: 43, 43, 43;
  --brand-gray-dark: #505050;
  --brand-gray-dark-rgb: 80, 80, 80;
  --brand-gray-medium: #808080;
  --brand-gray-medium-rgb: 128, 128, 128;
  --brand-gray-medium-light: #a9a9a9;
  --brand-gray-medium-light-rgb: 169, 169, 169;
  --brand-gray-light: #d3d3d3;
  --brand-gray-light-rgb: 211, 211, 211;

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

  /* Font Families */
  --font-logo: Krungthep;
  --font-heading: Mulish;
  --font-body: Mulish;
  --font-monospace: Inconsolata;
  --font-caption: Inconsolata;

  /* Type Scale */
  --text-h1-size: 46px;
  --text-h1-weight: 800;
  --text-h1-line-height: 1.15;
  --text-h1-letter-spacing: -0.02em;
  --text-h2-size: 28px;
  --text-h2-weight: 800;
  --text-h2-line-height: 1.15;
  --text-h2-letter-spacing: -0.02em;
  --text-h3-size: 24px;
  --text-h3-weight: 800;
  --text-h3-line-height: 1.15;
  --text-h3-letter-spacing: -0.02em;
  --text-body-size: 17px;
  --text-body-weight: 400;
  --text-body-line-height: 1.6;
  --text-small-size: 14px;
  --text-small-weight: 400;
  --text-small-line-height: 1.5;
  --text-caption-size: 12px;
  --text-caption-weight: 400;
  --text-caption-line-height: 1.4;

  /* ============================================
     STYLES
     ============================================ */

  /* divider */
  --style-divider-border-style: dotted;
  --style-divider-border-width: 2px;
  --style-divider-color: #dfff11;
  --style-divider-margin: 2rem 0;
  --style-divider-opacity: 0.6;

  /* accent_rule */
  --style-accent-rule-border-style: solid;
  --style-accent-rule-border-width: 4px;
  --style-accent-rule-color: #dfff11;

  /* link */
  --style-link-font-weight: bold;
  --style-link-background: #dfff11;
  --style-link-text-color: #000000;
  --style-link-padding: .15em;
  --style-link-display: inline;
  --style-link-text-decoration: none;

  /* card */
  --style-card-border-radius: 8px;
  --style-card-padding: 1.5rem;
  --style-card-shadow: 0 2px 8px rgba(0,0,0,0.1);
  --style-card-background: #ffffff;
}

/* ============================================
   FONT-FACE DECLARATIONS
   ============================================ */

@font-face {
  font-family: 'Krungthep';
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src: url('./fonts/krungthep.woff2') format('woff2'),\n       url('./fonts/krungthep.ttf') format('truetype');
}

@font-face {
  font-family: 'Mulish';
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src: url('./fonts/mulish-regular.woff2') format('woff2'),\n       url('./fonts/mulish-variable.ttf') format('truetype');
}

@font-face {
  font-family: 'Mulish';
  font-weight: 400;
  font-style: italic;
  font-display: swap;
  src: url('./fonts/mulish-regular.woff2') format('woff2'),\n       url('./fonts/mulish-variable.ttf') format('truetype');
}

@font-face {
  font-family: 'Mulish';
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  src: url('./fonts/mulish-regular.woff2') format('woff2'),\n       url('./fonts/mulish-variable.ttf') format('truetype');
}

@font-face {
  font-family: 'Mulish';
  font-weight: 700;
  font-style: italic;
  font-display: swap;
  src: url('./fonts/mulish-regular.woff2') format('woff2'),\n       url('./fonts/mulish-variable.ttf') format('truetype');
}

@font-face {
  font-family: 'Mulish';
  font-weight: 800;
  font-style: normal;
  font-display: swap;
  src: url('./fonts/mulish-regular.woff2') format('woff2'),\n       url('./fonts/mulish-variable.ttf') format('truetype');
}

@font-face {
  font-family: 'Mulish';
  font-weight: 800;
  font-style: italic;
  font-display: swap;
  src: url('./fonts/mulish-regular.woff2') format('woff2'),\n       url('./fonts/mulish-variable.ttf') format('truetype');
}

@font-face {
  font-family: 'Mulish';
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src: url('./fonts/mulish-regular.woff2') format('woff2'),\n       url('./fonts/mulish-variable.ttf') format('truetype');
}

@font-face {
  font-family: 'Mulish';
  font-weight: 400;
  font-style: italic;
  font-display: swap;
  src: url('./fonts/mulish-regular.woff2') format('woff2'),\n       url('./fonts/mulish-variable.ttf') format('truetype');
}

@font-face {
  font-family: 'Mulish';
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  src: url('./fonts/mulish-regular.woff2') format('woff2'),\n       url('./fonts/mulish-variable.ttf') format('truetype');
}

@font-face {
  font-family: 'Mulish';
  font-weight: 700;
  font-style: italic;
  font-display: swap;
  src: url('./fonts/mulish-regular.woff2') format('woff2'),\n       url('./fonts/mulish-variable.ttf') format('truetype');
}

@font-face {
  font-family: 'Inconsolata';
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src: url('./fonts/inconsolata.woff2') format('woff2'),\n       url('./fonts/inconsolata-variable.ttf') format('truetype');
}

@font-face {
  font-family: 'Inconsolata';
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  src: url('./fonts/inconsolata.woff2') format('woff2'),\n       url('./fonts/inconsolata-variable.ttf') format('truetype');
}

@font-face {
  font-family: 'Inconsolata';
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src: url('./fonts/inconsolata.woff2') format('woff2'),\n       url('./fonts/inconsolata-variable.ttf') format('truetype');
}

@font-face {
  font-family: 'Inconsolata';
  font-weight: 600;
  font-style: normal;
  font-display: swap;
  src: url('./fonts/inconsolata.woff2') format('woff2'),\n       url('./fonts/inconsolata-variable.ttf') format('truetype');
}

/* ============================================
   UTILITY CLASSES
   ============================================ */

/* Color Utilities */
.text-primary { color: var(--brand-primary); }
.bg-primary { background-color: var(--brand-primary); }
.border-primary { border-color: var(--brand-primary); }
.text-secondary { color: var(--brand-secondary); }
.bg-secondary { background-color: var(--brand-secondary); }
.border-secondary { border-color: var(--brand-secondary); }
.text-base { color: var(--brand-text); }
.bg-text { background-color: var(--brand-text); }
.border-text { border-color: var(--brand-text); }
.bg-background { background-color: var(--brand-background); }
.text-gray-very-dark { color: var(--brand-gray-very-dark); }
.bg-gray-very-dark { background-color: var(--brand-gray-very-dark); }
.text-gray-dark { color: var(--brand-gray-dark); }
.bg-gray-dark { background-color: var(--brand-gray-dark); }
.text-gray-medium { color: var(--brand-gray-medium); }
.bg-gray-medium { background-color: var(--brand-gray-medium); }
.text-gray-medium-light { color: var(--brand-gray-medium-light); }
.bg-gray-medium-light { background-color: var(--brand-gray-medium-light); }
.text-gray-light { color: var(--brand-gray-light); }
.bg-gray-light { background-color: var(--brand-gray-light); }

/* Typography Utilities */
.text-h1 {
  font-size: var(--text-h1-size);
  font-weight: var(--text-h1-weight);
  line-height: var(--text-h1-line-height);
  letter-spacing: var(--text-h1-letter-spacing);
}
.text-h2 {
  font-size: var(--text-h2-size);
  font-weight: var(--text-h2-weight);
  line-height: var(--text-h2-line-height);
  letter-spacing: var(--text-h2-letter-spacing);
}
.text-h3 {
  font-size: var(--text-h3-size);
  font-weight: var(--text-h3-weight);
  line-height: var(--text-h3-line-height);
  letter-spacing: var(--text-h3-letter-spacing);
}
.text-body {
  font-size: var(--text-body-size);
  font-weight: var(--text-body-weight);
  line-height: var(--text-body-line-height);
}
.text-small {
  font-size: var(--text-small-size);
  font-weight: var(--text-small-weight);
  line-height: var(--text-small-line-height);
}
.text-caption {
  font-size: var(--text-caption-size);
  font-weight: var(--text-caption-weight);
  line-height: var(--text-caption-line-height);
}

/* Font Family Utilities */
.font-logo { font-family: var(--font-logo); }
.font-heading { font-family: var(--font-heading); }
.font-body { font-family: var(--font-body); }
.font-monospace { font-family: var(--font-monospace); }
.font-caption { font-family: var(--font-caption); }

/* Style Utilities */
.style-divider {
  border-style: var(--style-divider-border-style);
  border-width: var(--style-divider-border-width);
  border-color: var(--style-divider-color);
  margin: var(--style-divider-margin);
  opacity: var(--style-divider-opacity);
}
.style-accent-rule {
  border-style: var(--style-accent-rule-border-style);
  border-width: var(--style-accent-rule-border-width);
  border-color: var(--style-accent-rule-color);
}
.style-link {
  font-weight: var(--style-link-font-weight);
  background-color: var(--style-link-background);
  color: var(--style-link-text-color);
  padding: var(--style-link-padding);
  display: var(--style-link-display);
  text-decoration: var(--style-link-text-decoration);
}
.style-card {
  border-radius: var(--style-card-border-radius);
  padding: var(--style-card-padding);
  box-shadow: var(--style-card-shadow);
  background-color: var(--style-card-background);
}

/* ============================================
   INVERTED MODE
   ============================================ */

.brand-inverted {
  --brand-surface: #1a1a1a;
  --brand-on-surface: #ffffff;
  --brand-background: #1a1a1a;
  --brand-background-rgb: 26, 26, 26;
  --brand-text: #ffffff;
  --brand-text-rgb: 255, 255, 255;
  --brand-secondary: #1a1a1a;
  --brand-secondary-rgb: 26, 26, 26;
  --brand-heading-color: #dfff11;
  --brand-heading-color-rgb: 223, 255, 17;
  --brand-section-color: #ffffff;
  --brand-section-color-rgb: 255, 255, 255;
  --brand-chrome-border: rgba(255,255,255,0.12);
  --brand-chrome-tint: rgba(255,255,255,0.05);
  --brand-chrome-shadow: rgba(0,0,0,0.4);
}