/* Beyond Bright Creative — generated from tokens.json */
:root, [data-theme="brand"] {
  --paper: #fffaf8; /* The paper. A barely pink white for page, card and panel grounds, and the light word on hot pink, green and oxblood. Oxblood ink on it (14.9:1). */
  --oxblood: #4a0e14; /* The ink. Body copy, headings, every 1px line, the hard print shadow. Paired with lilac it is the dark pair: primary buttons, the Project stamp, the Open bar, the web strip on the business card. 14.9:1 on paper. */
  --pink-wash: #ffe2eb; /* The light pink. Page header bands, the title band across the top of a client card, tinted panels. Oxblood ink on it (12.7:1). Hot pink script on it is 3.4:1, so script there runs 48px and up. */
  --hot-pink: #DF0E7F; /* The signature, and it does a lot of the work. The script wordmark, the Retainer and Founder stamps, Email service labels, the pink CTA, the Open bar on hover, one half of the edge stripe. 4.50:1 against paper either way, so it carries small text now. Never on bubblegum (2.5:1) and never with oxblood words (3.3:1): paper is the only ink it takes. */
  --lilac: #e8d3fa; /* The lilac wash. Pairs with pink-wash as the soft set: header bands, card bands, tinted panels. Also oxblood's partner the other way round, as words on oxblood (11.1:1) for the primary button, the Project stamp, the Open bar and the web strip. Oxblood ink on it is 11.1:1 too. Never against green. */
  --purple: #8d4acc; /* A secondary, alongside green. Fills, stamps, tags and display type: the Scheduled tag, one half of the repeat caps with lilac. Paper words on it (5.1:1). FLAG: not for small words ON oxblood (2.9:1), and never beside pistachio or green. */
  --bubblegum: #fba5d5; /* The mid pink. Half of the edge stripe with hot pink, warning panels, loud social grounds. Oxblood ink on it (8.4:1), and oxblood is the only ink it takes. */
  --pistachio: #c9f05c; /* An accent, not a ground. The Done tag, success panels, the email header stripe with green, the odd card band. Oxblood ink on it (11.8:1). Sits 178 degrees from purple, which is why the two are kept apart rather than paired. */
  --teal: #005C52; /* The teal, the cool counterpoint. Social service labels, links, the focus ring, the badge and the email stripe with pistachio. 7.7:1 on paper either way, so fine at any size; paper and pistachio both read on it. Can be a ground under the light logo. Never on hot pink, purple or oxblood, all under 2:1. */
  --green: var(--teal); /* Parked: an alias of teal, which replaced it. Kept so older files still resolve. Not for new work. */
  --white: var(--paper); /* Parked: an alias of paper, which replaced it as the ground. Kept so older files still resolve. Not for new work. */
  --brown: var(--oxblood); /* Parked: an alias of oxblood, which replaced it as the ink. Kept so older files still resolve. Not for new work. */
  --pale-pink: var(--pink-wash); /* Parked: an alias of pink-wash, which took its jobs. Kept so older files still resolve, including the pale-pink Tag tone and Callout variant. Not for new work. */
  --sky: var(--paper); /* Parked: an alias of paper. The Open bar is oxblood with lilac words now. Kept so older files still resolve. Not for new work. */
  --cream: var(--paper); /* Parked: an alias of paper, the current ground. Kept so older files still resolve. Not for new work. */
  --blush: var(--pink-wash); /* Parked: an alias of pink-wash, the current tinted panel. Kept so older files still resolve. Not for new work. */
  --surface: var(--paper); /* Page ground. Pair with ink. */
  --surface-raised: var(--paper); /* Cards, menus, inputs, the nav. Same paper as surface: a 1px oxblood line lifts them, never a tint. */
  --surface-tint: var(--pink-wash); /* The page header band and the one tinted panel on a page: a notice, a callout. Pair with ink. */
  --surface-inverse: var(--oxblood); /* An oxblood panel for a footer, a stamp block or the Open bar. Pair with on-action (lilac) or ink-inverse. */
  --surface-band: var(--pink-wash); /* The title band across the top of a client card: the name on the left, the type stamp on the right, a 1px oxblood line under it. Pair with ink. */
  --surface-action: var(--oxblood); /* The Open bar: the whole bottom strip of a clickable card is the button. Lilac words (on-action). Fills accent with ink-inverse words on hover. */
  --on-action: var(--lilac); /* Words on surface-action and on oxblood stamps and buttons. 11.1:1. */
  --ink: var(--oxblood); /* Body copy, labels and controls on any paper, pink-wash, bubblegum, pistachio or lilac ground. */
  --ink-heading: var(--oxblood); /* Headlines and caps on pale grounds. */
  --ink-muted: var(--oxblood); /* Captions, empty states and folio details. Same oxblood; set them italic or smaller rather than lighter. The system has no tints. */
  --ink-inverse: var(--paper); /* Text on hot pink, purple, green and oxblood. */
  --ink-link: var(--teal); /* Links. 7.7:1 on paper, fine at any size. */
  --accent: var(--hot-pink); /* The pop: Retainer stamps, the Open bar hover fill, the pink CTA, script words. Pair with on-accent. */
  --on-accent: var(--paper); /* Anything on hot pink. Paper, 4.50:1, fine at any size. */
  --primary: var(--oxblood); /* The primary button and the Project stamp. Pair with on-primary. */
  --on-primary: var(--lilac); /* Text on primary. 11.1:1. */
  --secondary: var(--teal); /* Social labels, the teal button and badges. Pair with on-secondary. This token is teal; purple is the other secondary colour. */
  --on-secondary: var(--pistachio); /* Words on secondary: pistachio on a teal badge, 6.1:1. */
  --border: var(--oxblood); /* Every line. 1px, always. */
  --border-soft: var(--bubblegum); /* Row dividers in tables where a full oxblood line is too much. On working pages a 1px oxblood line is the default. */
  --ring: var(--teal); /* Focus ring, 2px with a 2px gap. */
  --stripe-a: var(--bubblegum); /* First colour of the edge stripe: bubblegum. Occasional, for letterhead and card edges. */
  --stripe-b: var(--hot-pink); /* Second colour of the edge stripe: hot pink. */
  --stripe-loud-a: var(--oxblood); /* First colour of the loud stripe: oxblood. Rare, for the fun moments only. */
  --stripe-loud-b: var(--lilac); /* Second colour of the loud stripe: lilac. */
  --success: var(--pistachio); /* Confirmed, paid, booked, Done. A pistachio fill with an oxblood word (11.8:1). Always with the word: colour alone never carries the status. */
  --warning: var(--bubblegum); /* Heads up. A bubblegum panel with a hot pink stamp. Always with a word. */
  --danger: var(--hot-pink); /* Errors and losses. A hot pink border or stamp, the word in oxblood. */
  --shadow-print: none; /* None. The system has no shadows. Kept so older files still resolve. */
  --shadow-pop: none; /* None. The system has no shadows. Kept so older files still resolve. */
  --shadow-lift: none; /* None. The system has no shadows. Kept so older files still resolve. */
}
:root {
  --space-1: calc(4px * var(--s)); /* Hairline gaps: between a stamp and its border, icon to label. */
  --space-2: calc(8px * var(--s)); /* Tight padding inside tags and stamps; the awning-stripe half pitch. */
  --space-3: calc(12px * var(--s)); /* Button vertical padding; gap between stacked form fields. */
  --space-4: calc(16px * var(--s)); /* Default gap and inline padding; awning-stripe pitch. */
  --space-5: calc(24px * var(--s)); /* Card padding; paragraph spacing. */
  --space-6: calc(32px * var(--s)); /* Section padding inside cards and panels. */
  --space-7: calc(48px * var(--s)); /* Gap between page sections; deck slide margins. */
  --space-8: calc(64px * var(--s)); /* Hero padding; the top and bottom of a page. */
  --space-9: calc(96px * var(--s)); /* The big breath between website sections. */
  --radius-none: 0px; /* Square, 0. Only for things that bleed to an edge: a full-width stripe band, a strip that runs off the page. */
  --radius-sm: 2px; /* The radius. 2px, the one corner in the system, on everything: cards, tags, stamps, notices, inputs, buttons, image frames. Barely there, just enough to stop a corner looking knife-cut. */
  --radius-md: 2px; /* Resolves to the one radius, 2px. Kept so older files still resolve. */
  --radius-lg: 2px; /* Resolves to the one radius, 2px. Kept so older files still resolve. */
  --radius-pill: 2px; /* Resolves to the one radius, 2px. There are no pills any more. Kept so older files still resolve. */
  --line: 1px; /* Every line: card and button outlines, badge strokes, awning rules, table rules, inputs. Uniform on purpose. */
  --line-hair: 1px; /* Alias of line, kept for older files. */
  --line-ink: 1px; /* Alias of line, kept for older files. */
  --line-poster: 1px; /* Alias of line, kept for older files. */
  --stripe-width: calc(72px * var(--s)); /* Width of one stripe in a hero band. 34px for edge stripes on letterhead, cards and email headers. Stripes are an occasional fun moment, not everyday chrome. */
  --band-height: calc(64px * var(--s)); /* Height of a stripe band at the top and bottom of a hero. 12 to 24px as an edge stripe on letterhead, cards and email headers. */
  --font-display: "Sanremo Caps", Futura, "Trebuchet MS", "Arial Black", sans-serif;
  --font-script: "Cocktail Club", "Brush Script MT", cursive;
  --font-sans: "Instrument Sans", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
}
.display-xl {
  font-family: var(--font-display);
  font-size: calc(96px * var(--s));
  line-height: 0.95;
  font-weight: 300;
  letter-spacing: 0.01em;
  font-style: normal;
}
.display-lg {
  font-family: var(--font-display);
  font-size: calc(78px * var(--s));
  line-height: 0.95;
  font-weight: 300;
  letter-spacing: 0em;
  font-style: normal;
}
.headline {
  font-family: var(--font-display);
  font-size: calc(40px * var(--s));
  line-height: 1.05;
  font-weight: 300;
  letter-spacing: 0.015em;
  font-style: normal;
}
.title {
  font-family: var(--font-display);
  font-size: calc(26px * var(--s));
  line-height: 1.1;
  font-weight: 300;
  letter-spacing: 0.02em;
  font-style: normal;
}
.menu-item {
  font-family: var(--font-display);
  font-size: calc(20px * var(--s));
  line-height: 1.2;
  font-weight: 300;
  letter-spacing: 0.04em;
  font-style: normal;
}
.script-lg {
  font-family: var(--font-script);
  font-size: calc(48px * var(--s));
  line-height: 1.1;
  font-weight: 400;
  letter-spacing: 0;
  font-style: normal;
}
.script-sm {
  font-family: var(--font-script);
  font-size: calc(26px * var(--s));
  line-height: 1.2;
  font-weight: 400;
  letter-spacing: 0;
  font-style: normal;
}
.subhead {
  font-family: var(--font-sans);
  font-size: calc(20px * var(--s));
  line-height: calc(28px * var(--s));
  font-weight: 500;
  letter-spacing: 0;
  font-style: normal;
}
.body-lg {
  font-family: var(--font-sans);
  font-size: calc(18px * var(--s));
  line-height: calc(28px * var(--s));
  font-weight: 400;
  letter-spacing: 0;
  font-style: normal;
}
.body {
  font-family: var(--font-sans);
  font-size: calc(16px * var(--s));
  line-height: calc(24px * var(--s));
  font-weight: 400;
  letter-spacing: 0;
  font-style: normal;
}
.body-sm {
  font-family: var(--font-sans);
  font-size: calc(14px * var(--s));
  line-height: calc(20px * var(--s));
  font-weight: 400;
  letter-spacing: 0;
  font-style: normal;
}
.tool-name {
  font-family: var(--font-sans);
  font-size: calc(14px * var(--s));
  line-height: calc(18px * var(--s));
  font-weight: 500;
  letter-spacing: 0;
  font-style: normal;
}
.card-title {
  font-family: var(--font-sans);
  font-size: calc(18px * var(--s));
  line-height: 1.25;
  font-weight: 600;
  letter-spacing: 0.06em;
  font-style: normal;
}
.nav-link {
  font-family: var(--font-sans);
  font-size: calc(16px * var(--s));
  line-height: calc(20px * var(--s));
  font-weight: 700;
  letter-spacing: 0.01em;
  font-style: normal;
}
.button {
  font-family: var(--font-sans);
  font-size: calc(13px * var(--s));
  line-height: calc(16px * var(--s));
  font-weight: 600;
  letter-spacing: 0.12em;
  font-style: normal;
}
.label {
  font-family: var(--font-sans);
  font-size: calc(12px * var(--s));
  line-height: calc(16px * var(--s));
  font-weight: 500;
  letter-spacing: 0.1em;
  font-style: normal;
}
.micro-label {
  font-family: var(--font-sans);
  font-size: calc(10px * var(--s));
  line-height: calc(14px * var(--s));
  font-weight: 500;
  letter-spacing: 0.12em;
  font-style: normal;
}
.caption {
  font-family: var(--font-sans);
  font-size: calc(13px * var(--s));
  line-height: calc(18px * var(--s));
  font-weight: 400;
  letter-spacing: 0;
  font-style: italic;
}
@font-face {
  font-family: "Sanremo Caps";
  src: url("fonts/SanremoCaps-LighterSquatRough.woff2") format("woff2");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Cocktail Club";
  src: url("fonts/CocktailClub-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Cocktail Club";
  src: url("fonts/CocktailClub-Oblique.woff2") format("woff2");
  font-weight: 400;
  font-style: oblique;
  font-display: swap;
}
@font-face {
  font-family: "Cocktail Club Upright";
  src: url("fonts/CocktailClub-Upright.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Cocktail Club Thin";
  src: url("fonts/CocktailClub-ObliqueThin.woff2") format("woff2");
  font-weight: 300;
  font-style: oblique;
  font-display: swap;
}
@font-face {
  font-family: "Cocktail Club Thin 2";
  src: url("fonts/CocktailClub-Oblique2Thin.woff2") format("woff2");
  font-weight: 300;
  font-style: oblique;
  font-display: swap;
}
@font-face {
  font-family: "Instrument Sans";
  src: url("fonts/InstrumentSans-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Instrument Sans";
  src: url("fonts/InstrumentSans-Italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Instrument Sans";
  src: url("fonts/InstrumentSans-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Instrument Sans";
  src: url("fonts/InstrumentSans-MediumItalic.woff2") format("woff2");
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Instrument Sans";
  src: url("fonts/InstrumentSans-SemiBold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Instrument Sans";
  src: url("fonts/InstrumentSans-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Instrument Sans";
  src: url("fonts/InstrumentSans-BoldItalic.woff2") format("woff2");
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}