/* Jay Ambe PG — generated from tokens.json */
:root, [data-theme="light"] {
  --navy: #0b2d4a; /* Brand Navy Blue (#0B2D4A): trust, stability, professional. The lead brand colour: logo wordmark, reverse-logo panels, signage boards, social avatars. Reach it through surface-inverse or ink-heading in UI. */
  --gold: #d4af37; /* Brand Gold (#D4AF37): warmth, premium, hospitality. Roof accent, PG letters, hairline rules, icon strokes. Only 1.95:1 on cream: never text or a meaning-carrying icon on cream. 6.7:1 on navy, so gold text is fine on navy. */
  --cream: #f9f6ef; /* Brand Cream (#F9F6EF): clean, modern, welcoming. The light page ground and the text colour on navy. Reach it through surface or ink-inverse in UI. */
  --charcoal: #2e2e2e; /* Brand Charcoal (#2E2E2E): neutral, balance, readability. Body copy on cream (12.6:1). Never place on navy: 1.04:1, it disappears. */
  --surface: var(--cream); /* Page and card ground. Cream in light, navy in the reverse theme. */
  --surface-inverse: var(--navy); /* Contrasting panel set against surface: reverse-logo panels, banners, footers. */
  --ink: var(--charcoal); /* Body copy on surface. Charcoal on cream 12.6:1; cream on navy 13.1:1. */
  --ink-heading: var(--navy); /* Headings and the wordmark colour on surface. Navy on cream 13.1:1; cream on navy 13.1:1. */
  --ink-inverse: var(--cream); /* Text on surface-inverse, 13.1:1 in both themes. */
  --accent: var(--gold); /* Gold accents: hairline rules beside PG, roof strokes, icon strokes. As text, only on navy grounds (surface in the reverse theme, surface-inverse in light). */
  --on-accent: var(--navy); /* Text or marks placed on a gold fill: navy on gold 6.7:1. */
  --rule: var(--gold); /* The thin gold lines that flank PG in the lockup and divide sections. Decorative only: on cream it is 1.95:1, so never rely on it alone to separate controls. */
}
[data-theme="dark"] {
  --surface: var(--navy);
  --surface-inverse: var(--cream);
  --ink: var(--cream);
  --ink-heading: var(--cream);
  --ink-inverse: var(--navy);
  --accent: var(--gold);
  --on-accent: var(--navy);
  --rule: var(--gold);
}
:root {
  --radius-md: 8px; /* Reverse-logo panel corners on the board. */
  --radius-lg: 16px; /* Rounded-square social/app icon tile. */
  --radius-full: 9999px; /* Circular social avatar. */
  --font-display: "Cinzel", "Trajan Pro", Georgia, serif;
  --font-sans: "Montserrat", system-ui, sans-serif;
  --text-wordmark: 600 48px/1 var(--font-display); /* Primary font, Trajan / Cinzel: elegant, strong, trustworthy. Brand name and big headlines only, set in capitals. Size as measured on the board's typography panel. */
  --text-tagline: 500 14px/20px var(--font-sans); /* The tagline under the lockup. Uppercase, very wide tracking. */
  --text-eyebrow: 500 12px/16px var(--font-sans); /* Section labels. Uppercase, wide tracking, ink-heading. */
  --text-heading: 600 18px/24px var(--font-sans); /* Profile names and card titles in Montserrat (as on the social profile mock-up). */
  --text-label: 500 13px/18px var(--font-sans); /* Item names: logo variant names, brand-element captions, font names. */
  --text-body: 400 12px/18px var(--font-sans); /* Secondary font, Montserrat: clean, modern and highly readable. 12px is the board's print scale; a web body size has not been set. */
}
.wordmark {
  font-family: var(--font-display);
  font-size: 48px;
  line-height: 1;
  font-weight: 600;
  letter-spacing: 0;
}
.tagline {
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
  letter-spacing: 0.35em;
}
.eyebrow {
  font-family: var(--font-sans);
  font-size: 12px;
  line-height: 16px;
  font-weight: 500;
  letter-spacing: 0.2em;
}
.heading {
  font-family: var(--font-sans);
  font-size: 18px;
  line-height: 24px;
  font-weight: 600;
  letter-spacing: 0;
}
.label {
  font-family: var(--font-sans);
  font-size: 13px;
  line-height: 18px;
  font-weight: 500;
  letter-spacing: 0;
}
.body {
  font-family: var(--font-sans);
  font-size: 12px;
  line-height: 18px;
  font-weight: 400;
  letter-spacing: 0;
}