@charset "utf-8";
/* The Punctuation Guide - Tokens (2026) */
/* Scope: design tokens and font-face declarations only. */

/* ==========================================================================
   Font Faces
   --------------------------------------------------------------------------
   Self-hosted fonts used throughout the site.
   ========================================================================== */

@font-face {
  font-family: 'Century Supra';
  src: url('../fonts/century_supra_a_regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Century Supra';
  src: url('../fonts/century_supra_a_bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Century Supra';
  src: url('../fonts/century_supra_a_italic.woff2') format('woff2');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Century Supra';
  src: url('../fonts/century_supra_a_bold_italic.woff2') format('woff2');
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Concourse';
  src: url('../fonts/concourse_3_regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Concourse';
  src: url('../fonts/concourse_3_bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Concourse';
  src: url('../fonts/concourse_3_italic.woff2') format('woff2');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Concourse';
  src: url('../fonts/concourse_3_bold_italic.woff2') format('woff2');
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Valkyrie A';
  src: url('../fonts/valkyrie_a_regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Valkyrie A';
  src: url('../fonts/valkyrie_a_bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Valkyrie A';
  src: url('../fonts/valkyrie_a_italic.woff2') format('woff2');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Valkyrie A';
  src: url('../fonts/valkyrie_a_bold_italic.woff2') format('woff2');
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Heliotrope';
  src: url('../fonts/heliotrope_3_regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Heliotrope';
  src: url('../fonts/heliotrope_3_bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Heliotrope';
  src: url('../fonts/heliotrope_3_italic.woff2') format('woff2');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Heliotrope';
  src: url('../fonts/heliotrope_3_bold_italic.woff2') format('woff2');
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Triplicate A Code';
  src: url('../fonts/triplicate_a_code_regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Triplicate A Code';
  src: url('../fonts/triplicate_a_code_bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Triplicate A Code';
  src: url('../fonts/triplicate_a_code_italic.woff2') format('woff2');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Triplicate A Code';
  src: url('../fonts/triplicate_a_code_bold_italic.woff2') format('woff2');
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

/* ==========================================================================
   Design Tokens
   --------------------------------------------------------------------------
   Source-of-truth values for color, typography, spacing, and motion.
   ========================================================================== */

:root {
  /* Brand colors */
  --color-primary: #FFD530;
  --color-primary-dark: #E5BF2B;

  /* Text colors */
  --color-text: #1a1a1a;
  --color-text-dark: #2E2E2E;
  --color-text-muted: #5a5a5a;
  --color-text-light: #666666;
  --color-text-nav: #5a5a5a;

  /* Background colors */
  --color-bg-light: #F7F7F7;
  --color-bg-nav: #E8E8E8;
  --color-bg-example: #F0F0F0;
  --color-bg-hover: #EBEBEB;

  /* Border colors */
  --color-border: #888888;
  --color-border-light: #E0E0E0;

  /* Dark theme colors */
  --color-dark-bg: #2F2F2F;
  --color-dark-nav: #1C1C1C;
  --color-dark-example: #202020;

  /* Spacing scale */
  --spacing-xs: 8px;
  --spacing-sm: 12px;
  --spacing-md: 24px;
  --spacing-lg: 48px;

  /* Motion */
  --transition-fast: 0.2s ease;
}