@font-face { font-family: "Codec Pro"; src: url("/assets/fonts/CodecPro-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Codec Pro"; src: url("/assets/fonts/CodecPro-News.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Codec Pro"; src: url("/assets/fonts/CodecPro-Bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Codec Pro"; src: url("/assets/fonts/CodecPro-ExtraBold.woff2") format("woff2"); font-weight: 800; font-style: normal; font-display: swap; }
@font-face { font-family: "Codec Pro"; src: url("/assets/fonts/CodecPro-Heavy.woff2") format("woff2"); font-weight: 900; font-style: normal; font-display: swap; }

/* brand/tokens.css - CSS variables derived from tokens.js */
:root {
  --font: "Codec Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  --font-brand: var(--font);
  --font-body: var(--font);
  --font-display: var(--font);
  /* Brand colors from official logo */
  --cp-ink: #000000;
  --cp-teal: #09A895;
  
  /* UI backgrounds (dark, calm, trustworthy) */
  --cp-bg: #000000;
  --cp-surface: #0E0F11;
  --cp-card: #0E0F11;
  --cp-card-border: rgba(255, 255, 255, 0.10);
  --cp-line: rgba(248, 250, 252, 0.10);
  --cp-line-strong: rgba(248, 250, 252, 0.14);

  /* Text colors */
  --cp-text: #F8FAFC;
  --cp-text-muted: rgba(248, 250, 252, 0.72);
  --cp-text-faint: rgba(248, 250, 252, 0.55);
  --cp-text-on-primary: #FFFFFF;

  /* Semantic colors */
  --cp-primary: #09A895;
  --cp-primary-dark: #087F73;
  --cp-accent: #000000;
  --cp-teal-soft: rgba(9, 168, 149, 0.12);
  --cp-danger: #F87171;
  --cp-success: #34D399;
  --cp-warn: #FCA5A5;

  --cp-r-sm: 10px;
  --cp-r-md: 16px;
  --cp-r-lg: 22px;
  --cp-r-pill: 999px;

  --cp-s-xs: 6px;
  --cp-s-sm: 10px;
  --cp-s-md: 16px;
  --cp-s-lg: 24px;
  --cp-s-xl: 32px;

  --cp-h1: 28px;
  --cp-h2: 22px;
  --cp-body: 16px;
  --cp-small: 13px;
  --cp-weight-bold: 700;
  --cp-weight-semi: 600;
  --cp-weight-regular: 400;

  --cp-shadow: 0 18px 48px rgba(0, 0, 0, 0.45);

  --cp-hero: linear-gradient(140deg, rgba(9, 168, 149, 0.18), rgba(8, 8, 10, 0.28), #000000);
}