/**
 * Brand Stylesheet — Dungeon Church
 * 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: #ff2600;
  --brand-primary-rgb: 255, 38, 0;

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

  /* Text */
  --brand-text: #979797;
  --brand-text-rgb: 151, 151, 151;

  /* Background */
  --brand-background: #151719;
  --brand-background-rgb: 21, 23, 25;

  /* Surface & Chrome */
  --brand-surface: #151719;
  --brand-on-surface: #979797;
  --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);

  /* Heading Color */
  --brand-heading-color: #ff2600;
  --brand-heading-color-rgb: 255, 38, 0;

  /* Section Color */
  --brand-section-color: #ffffff;
  --brand-section-color-rgb: 255, 255, 255;

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

  /* Font Families */
  --font-logo: Waning Star;
  --font-heading: Waning Star;
  --font-nav: Bebas Neue;
  --font-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;

  /* Type Scale */
  --text-h1-size: 36px;
  --text-h1-weight: 300;
  --text-h1-line-height: 1.1;
  --text-h1-letter-spacing: -0.02em;
  --text-h2-size: 28px;
  --text-h2-weight: 300;
  --text-h2-line-height: 1.2;
  --text-h2-letter-spacing: -0.01em;
  --text-h3-size: 22px;
  --text-h3-weight: 300;
  --text-h3-line-height: 1.3;
  --text-nav-size: 16px;
  --text-nav-weight: 400;
  --text-nav-line-height: 1.2;
  --text-nav-letter-spacing: 0.05em;
  --text-body-size: 16px;
  --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
     ============================================ */

  /* button_primary */
  --style-button-primary-background: #ff2600;
  --style-button-primary-text-color: #ffffff;
  --style-button-primary-border-radius: 4px;
  --style-button-primary-font-weight: 400;

  /* button_secondary */
  --style-button-secondary-border-style: solid;
  --style-button-secondary-border-width: 1px;
  --style-button-secondary-color: #ffffff;
  --style-button-secondary-text-color: #ffffff;
  --style-button-secondary-border-radius: 8px;
}

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

@font-face {
  font-family: 'Waning Star';
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src: url('./fonts/waning-star.woff2') format('woff2'),
       url('./fonts/waning-star.ttf') format('truetype');
}

@font-face {
  font-family: 'Waning Star';
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src: url('./fonts/waning-star.woff2') format('woff2'),
       url('./fonts/waning-star.ttf') format('truetype');
}

@font-face {
  font-family: 'Bebas Neue';
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src: url('./fonts/bebas-neue.woff2') format('woff2'),
       url('./fonts/bebas-neue.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); }

/* 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);
}
.text-nav {
  font-size: var(--text-nav-size);
  font-weight: var(--text-nav-weight);
  line-height: var(--text-nav-line-height);
  letter-spacing: var(--text-nav-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-nav { font-family: var(--font-nav); }
.font-body { font-family: var(--font-body); }

/* Style Utilities */
.style-button-primary {
  background-color: var(--style-button-primary-background);
  color: var(--style-button-primary-text-color);
  border-radius: var(--style-button-primary-border-radius);
  font-weight: var(--style-button-primary-font-weight);
}
.style-button-secondary {
  border-style: var(--style-button-secondary-border-style);
  border-width: var(--style-button-secondary-border-width);
  border-color: var(--style-button-secondary-color);
  color: var(--style-button-secondary-text-color);
  border-radius: var(--style-button-secondary-border-radius);
}

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

.brand-inverted {
  --brand-surface: #ffffff;
  --brand-on-surface: #616161;
  --brand-background: #ffffff;
  --brand-background-rgb: 255, 255, 255;
  --brand-text: #616161;
  --brand-text-rgb: 97, 97, 97;
  --brand-secondary: #171717;
  --brand-secondary-rgb: 23, 23, 23;
  --brand-heading-color: #000000;
  --brand-heading-color-rgb: 0, 0, 0;
  --brand-section-color: #171717;
  --brand-section-color-rgb: 23, 23, 23;
  --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);
}