/* AYC Network — generated from tokens.json */
:root, [data-theme="light"] {
  --signal-red: #e73632; /* Retained identity red (D04). A signal, not a button: evidence numbers, the logo, campaign covers, one highlight per chart. Fails 4.5:1 as small text on white — use action-red for links and controls. */
  --ink: #0a0a0a; /* Primary text and the deep brand neutral. Text on white (19.3:1), paper (17.4:1) and amber (9.4:1); ink panels for advertiser work. */
  --charcoal: #1f1f1f; /* Retained identity neutral. Secondary dark fills and device bezels. */
  --soft-white: #f5f5f5; /* Retained identity neutral. Quiet fills on white. */
  --grey: #9e9e9e; /* Retained identity grey. Decorative only — fails for body text on white (2.6:1); never use for copy. */
  --terracotta: #c4643a; /* Warm accent. Icons, rules, second chart series and venue accents. Not for small text on white. */
  --amber: #f2994a; /* Warm accent and the warning hue. Ink text on amber (9.4:1); never white text on it. */
  --white: #ffffff; /* Default page and card surface; text on action-red, espresso and ink. */
  --paper: #f4f0e9; /* Proposed refinement (D05). The warm signature surface: 70–85% of venue work, heroes, footers. Ink text 17.4:1. */
  --action-red: #bc2926; /* Proposed refinement (D05). The interactive red: primary buttons, links, focus ring, selected states. White text on it 6.3:1; as text on white and paper. */
  --cream: #fbf9f5; /* Warm ramp, lightest. Raised surfaces and chart cards on paper. */
  --linen: #ebe5da; /* Warm ramp. Sunken surfaces, soft borders, chart gridlines and tracks. */
  --sand: #d9d0c1; /* Warm ramp. Strong borders, input outlines, inactive chart series. */
  --stone: #a89d8c; /* Warm ramp. Tertiary text and axis labels at 12px+ on white — large or non-essential text only (below 4.5:1). */
  --taupe: #6b6256; /* Warm ramp. Secondary text on white, paper and cream. */
  --umber: #3d352d; /* Warm ramp. Neutral badge text on linen; dark warm details. */
  --espresso: #2a211b; /* Warm ramp. Dark sections, footers and fine-dining surfaces. White text 15.1:1. */
  --espresso-deep: #1a1410; /* Warm ramp, darkest. Website background behind photography; shadow base colour. */
  --terracotta-soft: #f3e2d6; /* Tint. Terracotta badge ground and soft highlights; terracotta-deep text on it. */
  --amber-soft: #fdeedd; /* Tint. Amber badge and warning ground. */
  --red-soft: #fbe3e1; /* Tint. Red badge, error and danger ground; action-red text on it. */
  --terracotta-deep: #9c4b27; /* Tint. Terracotta text on terracotta-soft. */
  --success: #3f7d4e; /* Semantic. Success states, always with a word or icon. As text on white and success-soft. */
  --success-soft: #e3efe5; /* Semantic. Success ground. */
  --warning: #f2994a; /* Semantic. Warning states; ink text on it, never white. Always with a label. */
  --warning-soft: #fdeedd; /* Semantic. Warning ground. */
  --danger: #bc2926; /* Semantic. Errors and destructive confirmations — the same red as action-red, so always pair it with a label or icon. */
  --danger-soft: #fbe3e1; /* Semantic. Error ground behind danger text. */
  --info: #4a5f7a; /* Semantic. Informational badges and notes; as text on white and info-soft. */
  --info-soft: #e4e9ef; /* Semantic. Info ground. */
  --text-primary: var(--ink); /* Body copy and headings on white, paper, cream and linen. */
  --text-secondary: var(--taupe); /* Supporting copy, captions and leads on white, paper and cream. */
  --text-tertiary: var(--stone); /* Labels and metadata only (12px bold tracked, or 24px+) — below 4.5:1 on white. */
  --text-on-dark: var(--white); /* Text on espresso, ink, action-red and photography with a protect gradient. */
  --text-on-dark-muted: #d6cfc5; /* Secondary text on espresso and ink. */
  --text-brand: var(--action-red); /* Brand-coloured text accents on white and paper. */
  --text-link: var(--action-red); /* Links on white and paper; underline on hover. */
  --surface-page: var(--white); /* Default page background. */
  --surface-warm: var(--paper); /* Warm sections and venue work. */
  --surface-cream: var(--cream); /* Soft raised panels on paper. */
  --surface-card: var(--white); /* Cards. */
  --surface-raised: var(--cream); /* Raised panels and chart cards. */
  --surface-dark: var(--espresso); /* Dark sections (evidence, footers). */
  --surface-ink: var(--ink); /* Advertiser and investor panels; the dark third card. */
  --surface-sunken: var(--linen); /* Wells, tracks and sunken areas. */
  --border-hairline: rgba(10,10,10,.08); /* Default 1px card and divider hairline. */
  --border-soft: var(--linen); /* Soft dividers on white. */
  --border-strong: var(--sand); /* Input and control outlines. */
  --border-focus: var(--action-red); /* Focus outline colour (the focus-ring in bundle.css draws white + action-red). */
  --action-primary: var(--action-red); /* Primary button fill — one per surface. */
  --action-primary-hover: #a52320; /* Primary button hover. */
  --action-primary-pressed: #8f1e1b; /* Primary button pressed. */
  --action-secondary: var(--ink); /* Secondary button fill. */
  --action-on-primary: var(--white); /* Label on primary buttons (6.3:1). */
  --glass-light: rgba(255,255,255,.52); /* Glass fill, light tone — controls and chrome over photography or pattern only, never content cards. Ink text. */
  --glass-warm: rgba(244,240,233,.58); /* Glass fill, warm tone — frosted nav over photography. Ink text. */
  --glass-dark: rgba(26,20,16,.42); /* Glass fill, dark tone — media controls over imagery. White text. */
  --glass-red: rgba(188,41,38,.55); /* Glass fill, red tone — one floating action over pattern. White text. */
  --glass-stroke: rgba(255,255,255,.6); /* Glass edge on light tones. */
  --glass-stroke-dark: rgba(255,255,255,.18); /* Glass edge on dark tones. */
  --surface-frosted: rgba(244,240,233,.82); /* Frosted paper behind the sticky TopNav. */
  --surface-frosted-dark: rgba(42,33,27,.78); /* Frosted espresso behind the dark TopNav. */
  --shadow-none: none; /* Default — let surfaces do the work. */
  --shadow-hairline: 0 0 0 1px rgba(10,10,10,.08); /* Cards on white. */
  --shadow-card: 0 1px 2px rgba(26,20,16,.06),0 8px 24px -12px rgba(26,20,16,.18); /* Card lift on hover only. */
  --shadow-float: 0 12px 40px -12px rgba(26,20,16,.28); /* Dialogs, popovers, toasts. */
  --shadow-product: 3px 5px 30px rgba(26,20,16,.22); /* The one product shadow: Frame, Phone and Desktop mockups. */
  --glass-highlight: inset 0 1px 0 rgba(255,255,255,.75),inset 0 -1px 0 rgba(255,255,255,.12),inset 0 0 0 1px rgba(255,255,255,.28); /* Inner edge of light and warm glass. */
  --glass-highlight-dark: inset 0 1px 0 rgba(255,255,255,.28),inset 0 0 0 1px rgba(255,255,255,.1); /* Inner edge of dark and red glass. */
  --glass-shadow: 0 10px 36px -10px rgba(26,20,16,.32),0 2px 6px -2px rgba(26,20,16,.12); /* Soft float under glass. */
}
:root {
  --space-1: 4px; /* Hairline gaps, icon-to-text in badges. */
  --space-2: 8px; /* Gap between touch targets; tight stacks. */
  --space-3: 12px; /* Control padding, card grid gaps. */
  --space-4: 16px; /* Default gap and small card padding. */
  --space-5: 24px; /* Card padding, gutters. */
  --space-6: 32px; /* Large card padding, block gaps. */
  --space-7: 48px; /* Gap between groups within a section. */
  --space-8: 64px; /* Large section internals. */
  --space-9: 96px; /* Section vertical padding (desktop). */
  --space-10: 128px; /* Hero and cover breathing room. */
  --section-y: 96px; /* Vertical padding of a page section, desktop. */
  --section-y-m: 56px; /* Vertical padding of a page section, mobile. */
  --tile-pad: 80px; /* Inner padding of a full-bleed Tile. */
  --card-pad: 24px; /* Default Card padding. */
  --gutter: 24px; /* Grid gutter. */
  --container-text: 760px; /* Max measure for running text. */
  --container-page: 1200px; /* Default page container. */
  --container-wide: 1440px; /* Wide layouts and edge-to-edge tiles. */
  --target-min: 48px; /* Minimum touch target. */
  --target-tablet: 56px; /* Touch target on the Frame and tablets. */
  --target-gap: 8px; /* Minimum space between targets. */
  --radius-none: 0; /* Tiles, photography, editorial blocks. */
  --radius-sm: 6px; /* Small chips and inline marks. */
  --radius-control: 8px; /* Inputs, selects and small controls. */
  --radius-card: 12px; /* Cards. */
  --radius-lg: 18px; /* Large cards and media frames. */
  --radius-pill: 9999px; /* Primary actions, tags and chips. */
  --radius-glass: 22px; /* Glass panels. */
  --gradient-campaign: linear-gradient(135deg,#e73632 0%,#0a0a0a 100%); /* Red → Ink. Campaign covers. */
  --gradient-ember: linear-gradient(135deg,#e73632 0%,#c4643a 100%); /* Signal Red → Terracotta. */
  --gradient-sunset: linear-gradient(160deg,#f2994a 0%,#c4643a 48%,#bc2926 100%); /* Amber → Terracotta → Action Red. */
  --gradient-dusk: linear-gradient(180deg,#c4643a 0%,#5a2a20 55%,#2a211b 100%); /* Terracotta → Espresso. Evening campaigns. */
  --gradient-espresso: linear-gradient(180deg,#352a22 0%,#1a1410 100%); /* Espresso → deep. Dark sections. */
  --gradient-ink: radial-gradient(120% 90% at 30% 0%,#2e2e2e 0%,#0a0a0a 60%); /* Ink spotlight. Investor and advertiser covers. */
  --gradient-warm: linear-gradient(180deg,#f4f0e9 0%,#ebe5da 100%); /* Paper → Linen. */
  --gradient-candlelight: radial-gradient(90% 80% at 50% 35%,#fdeedd 0%,#f4f0e9 55%,#ebe5da 100%); /* Warm radial on paper. */
  --gradient-table: radial-gradient(80% 70% at 50% 40%,#4a3a30 0%,#2a211b 55%,#1a1410 100%); /* Fine-dining radial. */
  --gradient-saffron: linear-gradient(135deg,#fdeedd 0%,#f2994a 100%); /* Amber soft → Amber. */
  --gradient-protect-bottom: linear-gradient(180deg,rgba(26,20,16,0) 35%,rgba(26,20,16,.78) 100%); /* Protects copy set over photography (bottom). */
  --gradient-protect-top: linear-gradient(0deg,rgba(26,20,16,0) 55%,rgba(26,20,16,.55) 100%); /* Protects a nav over photography (top). */
  --blur-frosted: saturate(180%) blur(20px); /* Frosted TopNav. */
  --glass-blur: blur(24px) saturate(180%); /* Glass panels. */
  --glass-blur-thin: blur(12px) saturate(160%); /* Thin glass (small controls). */
  --ease-standard: cubic-bezier(.2,.8,.2,1); /* Hover, press and state changes. */
  --ease-out: cubic-bezier(.16,1,.3,1); /* Reveals and entrances. */
  --ease-in: cubic-bezier(.7,0,.84,0); /* Exits. */
  --duration-fast: 120ms; /* Press and colour steps. */
  --duration-base: 220ms; /* Hover and state transitions. */
  --duration-slow: 420ms; /* Panels and dialogs. */
  --duration-reveal: 700ms; /* Tiles fade up 16px on scroll. */
  --press-scale: .97; /* Buttons scale to this on press. */
  --hover-opacity: .85; /* Hover on images and quiet links. */
  --weight-regular: 400; /* Reading. */
  --weight-medium: 500; /* Emphasis and buttons. */
  --weight-bold: 700; /* Headings. */
  --weight-black: 900; /* One giant number. */
  --text-display: 96px; /* Display. */
  --text-h1: 64px; /* H1. */
  --text-h2: 40px; /* H2. */
  --text-h3: 24px; /* H3. */
  --text-lead: 22px; /* Lead. */
  --text-body: 18px; /* Body. */
  --text-body-sm: 16px; /* Small body. */
  --text-caption: 14px; /* Caption. */
  --text-label: 12px; /* Label. */
  --text-display-m: 48px; /* Display, mobile. */
  --text-h1-m: 40px; /* H1, mobile. */
  --text-h2-m: 30px; /* H2, mobile. */
  --text-h3-m: 22px; /* H3, mobile. */
  --text-body-m: 17px; /* Body, mobile. */
  --leading-display: 1.02; /* Display. */
  --leading-h1: 1.08; /* H1. */
  --leading-h2: 1.15; /* H2. */
  --leading-h3: 1.2; /* H3. */
  --leading-body: 1.6; /* Body. */
  --leading-tight: 1.25; /* Tight multi-line UI. */
  --leading-label: 1.4; /* Labels. */
  --tracking-display: -0.025em; /* Display. */
  --tracking-h1: -0.02em; /* H1. */
  --tracking-h2: -0.015em; /* H2. */
  --tracking-h3: -0.01em; /* H3. */
  --tracking-body: 0; /* Body. */
  --tracking-label: 0.08em; /* Uppercase labels. */
  --font-sans: "Satoshi", "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "SF Mono", ui-monospace, Menlo, Consolas, monospace;
  --text-type-display: 700 96px/1.02 var(--font-sans); /* One per surface: covers, hero statements. */
  --text-type-h1: 700 64px/1.08 var(--font-sans); /* Page titles. */
  --text-type-h2: 700 40px/1.15 var(--font-sans); /* Section headings. */
  --text-type-h3: 700 24px/1.2 var(--font-sans); /* Card and tile headings. */
  --text-type-lead: 400 22px/1.45 var(--font-sans); /* Sub-heads and intro paragraphs, in text-secondary. */
  --text-type-body: 400 18px/1.6 var(--font-sans); /* Body copy, max 760px measure. */
  --text-type-body-sm: 400 16px/1.5 var(--font-sans); /* Dense UI copy and lists. */
  --text-type-caption: 400 14px/1.45 var(--font-sans); /* Captions, qualifiers and footnotes. */
  --text-type-label: 700 12px/1.4 var(--font-sans); /* Eyebrows, badges and tags — uppercase, tracked. */
  --text-type-button: 500 16px/1 var(--font-sans); /* Button labels, sentence case, verb first. */
  --text-type-number: 900 72px/1 var(--font-sans); /* Evidence numbers — Black, one per surface, always dated and qualified. */
  --text-type-display-m: 700 48px/1.02 var(--font-sans);
  --text-type-h1-m: 700 40px/1.08 var(--font-sans);
  --text-type-h2-m: 700 30px/1.15 var(--font-sans);
  --text-type-h3-m: 700 22px/1.2 var(--font-sans);
  --text-type-body-m: 400 17px/1.6 var(--font-sans);
  --text-type-mono: 400 14px/1.45 var(--font-mono); /* Token names, codes and tabular figures in docs. */
}
.type-display {
  font-family: var(--font-sans);
  font-size: 96px;
  line-height: 1.02;
  font-weight: 700;
  letter-spacing: -0.025em;
}
.type-h1 {
  font-family: var(--font-sans);
  font-size: 64px;
  line-height: 1.08;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.type-h2 {
  font-family: var(--font-sans);
  font-size: 40px;
  line-height: 1.15;
  font-weight: 700;
  letter-spacing: -0.015em;
}
.type-h3 {
  font-family: var(--font-sans);
  font-size: 24px;
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.type-lead {
  font-family: var(--font-sans);
  font-size: 22px;
  line-height: 1.45;
  font-weight: 400;
  letter-spacing: 0;
}
.type-body {
  font-family: var(--font-sans);
  font-size: 18px;
  line-height: 1.6;
  font-weight: 400;
  letter-spacing: 0;
}
.type-body-sm {
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.5;
  font-weight: 400;
  letter-spacing: 0;
}
.type-caption {
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.45;
  font-weight: 400;
  letter-spacing: 0;
}
.type-label {
  font-family: var(--font-sans);
  font-size: 12px;
  line-height: 1.4;
  font-weight: 700;
  letter-spacing: 0.08em;
}
.type-button {
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1;
  font-weight: 500;
  letter-spacing: 0;
}
.type-number {
  font-family: var(--font-sans);
  font-size: 72px;
  line-height: 1;
  font-weight: 900;
  letter-spacing: -0.03em;
}
.type-display-m {
  font-family: var(--font-sans);
  font-size: 48px;
  line-height: 1.02;
  font-weight: 700;
  letter-spacing: -0.025em;
}
.type-h1-m {
  font-family: var(--font-sans);
  font-size: 40px;
  line-height: 1.08;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.type-h2-m {
  font-family: var(--font-sans);
  font-size: 30px;
  line-height: 1.15;
  font-weight: 700;
  letter-spacing: -0.015em;
}
.type-h3-m {
  font-family: var(--font-sans);
  font-size: 22px;
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.type-body-m {
  font-family: var(--font-sans);
  font-size: 17px;
  line-height: 1.6;
  font-weight: 400;
  letter-spacing: 0;
}
.type-mono {
  font-family: var(--font-mono);
  font-size: 14px;
  line-height: 1.45;
  font-weight: 400;
  letter-spacing: 0;
}
@font-face {
  font-family: "Satoshi";
  src: url("fonts/Satoshi-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Satoshi";
  src: url("fonts/Satoshi-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Satoshi";
  src: url("fonts/Satoshi-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Satoshi";
  src: url("fonts/Satoshi-Black.woff2") format("woff2");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}
