/* Bloom's own design tokens, read from its public component CSS. Their values, not my guesses. */
/* Regression to hand-typed colours and radii is the fault this file exists to stop. */
/* One correction, 31 October 2026: Bloom's bundled stylesheet defines --color-black and --color-white
   TWICE, first as #000 and #fff (its Tailwind scale) and then, later and so winning, as the triplets
   0, 0, 0 and 255, 255, 255. Every one of its own component tokens is written rgba(var(--color-black), X),
   which only resolves against the triplet, so the hex copy made border-black, background-black-15 and
   their whole family resolve to nothing: the Design panel's tiles came out with no border and grey
   borders drawn in currentColor. The triplets are what the sheet carries now. */
:root {
  --background-color-beige-dark: rgba(var(--color-beige-dark), 1);
  --background-color-light-grey: var(--color-background-light-grey);
  --border-active: 1px solid var(--color-border-active);
  --border-radius: 4px;
  --border-radius-large: 8px;
  --border-regular: 1px solid var(--color-border);
  --border-weight: 1px;
  --box-shadow: 0px 24px 48px rgba(var(--color-black), .25);
  --color-amber-100: oklch(96.2% .059 95.617);
  --color-amber-200: oklch(92.4% .12 95.746);
  --color-amber-50: oklch(98.7% .022 95.277);
  --color-amber-700: oklch(55.5% .163 48.998);
  --color-background-black: rgba(var(--color-black), 1);
  --color-background-black-15: rgba(var(--color-black), .15);
  --color-background-black-25: rgba(var(--color-black), .25);
  --color-background-black-5: rgba(var(--color-black), .05);
  --color-background-black-50: rgba(var(--color-black), .5);
  --color-background-dark-grey: rgba(var(--color-dark-grey), 1);
  --color-background-darker-grey: rgba(var(--color-darker-grey), 1);
  --color-background-light-grey: rgba(var(--color-light-grey), 1);
  --color-background-lighter-grey: rgba(var(--color-lighter-grey), 1);
  --color-background-midgrey: rgba(var(--color-mid-grey), 1);
  --color-background-purple: rgba(var(--color-purple), 1);
  --color-background-red: rgba(var(--color-red), 1);
  --color-background-white: rgba(var(--color-white), 1);
  --color-background-white-15: rgba(var(--color-white), .15);
  --color-background-white-5: rgba(var(--color-white), .05);
  --color-background-white-50: rgba(var(--color-white), .5);
  --color-beige: 244, 243, 237;
  --color-beige-dark: 205, 190, 153;
  --color-beige-extra-light: 253, 253, 252;
  --color-beige-light: 249, 249, 246;
  --color-black: 0, 0, 0;
  --color-blue: 67, 196, 224;
  --color-blue-dark: 0, 145, 176;
  --color-blue-extra-light: 245, 252, 253;
  --color-blue-light: 227, 246, 250;
  --color-border: rgba(var(--color-mid-grey), 1);
  --color-border-active: rgba(var(--color-black), 1);
  --color-border-black: rgba(var(--color-black), 1);
  --color-border-black-15: rgba(var(--color-black), .15);
  --color-border-black-25: rgba(var(--color-black), .25);
  --color-border-black-5: rgba(var(--color-black), .05);
  --color-border-black-50: rgba(var(--color-black), .5);
  --color-border-lighter-grey: rgba(var(--color-lighter-grey), 1);
  --color-border-white: rgba(var(--color-white), 1);
  --color-border-white-15: rgba(var(--color-white), .15);
  --color-border-white-5: rgba(var(--color-white), .05);
  --color-border-white-50: rgba(var(--color-white), .5);
  --color-cyan-100: oklch(95.6% .045 203.388);
  --color-cyan-200: oklch(91.7% .08 205.041);
  --color-cyan-50: oklch(98.4% .019 200.873);
  --color-cyan-700: oklch(52% .105 223.128);
  --color-danger: rgba(var(--color-red), 1);
  --color-danger-dark: rgba(var(--color-red-dark), 1);
  --color-dark-grey: 136, 136, 136;
  --color-darker-grey: 34, 34, 34;
  --color-gray-300: oklch(87.2% .01 258.338);
  --color-gray-50: oklch(98.5% .002 247.839);
  --color-gray-500: oklch(55.1% .027 264.364);
  --color-gray-600: oklch(44.6% .03 256.802);
  --color-gray-900: oklch(21% .034 264.665);
  --color-green: 110, 194, 80;
  --color-green-100: oklch(96.2% .044 156.743);
  --color-green-200: oklch(92.5% .084 155.995);
  --color-green-50: oklch(98.2% .018 155.826);
  --color-green-700: oklch(52.7% .154 150.069);
  --color-green-dark: 39, 149, 22;
  --color-green-extra-light: 239, 255, 233;
  --color-green-light: 219, 240, 211;
  --color-headline-black: var(--color-text-black);
  --color-headline-black-15: var(--color-text-black);
  --color-headline-black-5: var(--color-text-black);
  --color-headline-black-50: var(--color-text-black);
  --color-headline-white: var(--color-text-white);
  --color-headline-white-15: var(--color-text-white);
  --color-headline-white-5: var(--color-text-white);
  --color-headline-white-50: var(--color-text-white);
  --color-info: rgba(var(--color-blue), 1);
  --color-info-dark: rgba(var(--color-blue-dark), 1);
  --color-input-appearance: rgba(var(--color-white), 1);
  --color-light-grey: 242, 242, 242;
  --color-lighter-grey: 250, 250, 250;
  --color-mid-grey: 224, 224, 224;
  --color-neutral-100: oklch(97% 0 none);
  --color-neutral-400: oklch(70.8% 0 none);
  --color-neutral-500: oklch(55.6% 0 none);
  --color-neutral-600: oklch(43.9% 0 none);
  --color-neutral-800: oklch(26.9% 0 none);
  --color-neutral-900: oklch(20.5% 0 none);
  --color-orange: 255, 168, 0;
  --color-orange-dark: 184, 99, 0;
  --color-orange-extra-light: 255, 247, 232;
  --color-orange-light: 255, 233, 191;
  --color-primary: rgba(var(--color-red), 1);
  --color-primary-dark: rgba(var(--color-red-dark), 1);
  --color-primary-disabled: #ffe3e9;
  --color-purple: 136, 80, 255;
  --color-purple-dark: 94, 41, 205;
  --color-purple-extra-light: 244, 239, 255;
  --color-purple-light: 225, 211, 255;
  --color-red: 255, 50, 90;
  --color-red-100: oklch(93.6% .032 17.717);
  --color-red-200: oklch(88.5% .062 18.334);
  --color-red-50: oklch(97.1% .013 17.38);
  --color-red-700: oklch(50.5% .213 27.518);
  --color-red-dark: 200, 0, 72;
  --color-red-extra-light: 255, 245, 247;
  --color-red-light: 255, 227, 233;
  --color-success: rgba(var(--color-green), 1);
  --color-success-light: rgba(var(--color-green-light), 1);
  --color-text-black: rgba(var(--color-black), 1);
  --color-text-black-15: rgba(var(--color-black), .15);
  --color-text-black-5: rgba(var(--color-black), .05);
  --color-text-black-50: rgba(var(--color-black), .5);
  --color-text-body: rgba(var(--color-black), 1);
  --color-text-cta-black: rgba(var(--color-black), 1);
  --color-text-cta-black-15: rgba(var(--color-black), .15);
  --color-text-cta-white: rgba(var(--color-white), 1);
  --color-text-cta-white-15: rgba(var(--color-white), .15);
  --color-text-grey: #888;
  --color-text-lighter-grey: rgba(var(--color-lighter-grey), 1);
  --color-text-red: rgba(var(--color-red), 1);
  --color-text-white: rgba(var(--color-white), 1);
  --color-text-white-50: rgba(var(--color-white), .5);
  --color-warning: rgba(var(--color-orange), 1);
  --color-warning-dark: rgba(var(--color-orange-dark), 1);
  --color-white: 255, 255, 255;
  /* Their sheet writes these as self-references because it declares the real values in another file it
     ships beside this one. Vendored on its own, a self-reference is invalid, so --font-regular,
     --font-medium and --font-accent resolved to NOTHING at :root and only the `.bloom` block in
     static/css/bloom-components.css put them right. A client page that does not wear `.bloom` therefore
     had no stack at all. The two families this studio actually serves, and the name of the accent cut it
     substitutes for, are stated here instead. The --font-brand-* names below are left as their own
     self-references: they are Bloom's own marketing faces, nothing here uses them, and inventing a value
     for a face this studio does not serve would be worse than leaving theirs alone. Found by the
     independent pass over the portal chrome, 4 November 2026. */
  --font-accent: "Sharp Grotesk Medium";
  --font-medium: "Work Sans Medium";
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  --font-regular: "Work Sans";
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --font-signature: "Herr Von Muellerhoff", cursive;
  --font-size-lg: 1.125rem;
  --font-size-sm: .875rem;
  --font-size-xs: .75rem;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;
  --font-weight-normal: 400;
  --font-weight-semibold: 600;
  --radius-2xl: 1rem;
  --radius-3xl: 1.5rem;
  --radius-4xl: 2rem;
  --radius-lg: .5rem;
  --radius-md: .375rem;
  --radius-sm: .25rem;
  --radius-xl: .75rem;
  --spacing: .25rem;
  --text-base: 1rem;
  --text-base--line-height: calc(1.5 / 1);
  --text-xl: 1.25rem;
  --text-xl--line-height: calc(1.75 / 1.25);
}

/* The two faces, moved here from the component sheet so a page that needs the type and none of the
   utilities (the public sheet) can link the token sheet alone. Bloom ships "Work Sans" and "Work Sans
   Medium" as two families, not one family in two weights: their `.font-medium` is font-family:
   var(--font-medium), so a heading of theirs computes to "Work Sans Medium". Both faces are served from
   our own disk rather than a CDN, because the studio has to work on the LAN with no way out. */
@font-face {
  font-family: "Work Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/static/fonts/WorkSans-Regular.woff2") format("woff2");
}

@font-face {
  font-family: "Work Sans Medium";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/static/fonts/WorkSans-Medium.woff2") format("woff2");
}

/* Their signature face, which is what Auto Countersign is written in on Settings > Templates > Contracts:
   their --font-signature is "Herr Von Muellerhoff", cursive, read off their own root variables and off the
   computed font of the signature box itself. The file is vendored beside the other two for the same reason
   they are: the studio has to work on the LAN with no way out. Open Font License. */
@font-face {
  font-family: "Herr Von Muellerhoff";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/static/fonts/HerrVonMuellerhoff-Regular.woff2") format("woff2");
}

/* BLOOM'S ACCENT CUT, SUBSTITUTED WITH OUR OWN AND UNDER ITS OWN NAME (5 November 2026). `--font-accent`
   names "Sharp Grotesk Medium", which Bloom licenses and serves from its own CDN and this studio does not
   redistribute. Naming a face the studio does not serve is not a substitution, it is a silent fallback:
   the dashboard's greeting, its storage figures and every other accent line were being painted in the
   browser's own DEFAULT face - DejaVu Sans in the harness, and whatever the visitor's system default is
   anywhere else - while both sides of every parity table read `fontFamily: "Sharp Grotesk Medium"` and
   passed. Registering this studio's own Medium cut under the accent's name is what makes the declaration
   true: the family still computes to Bloom's name, so no declared value moves, and the letters are our own
   cut, which the rendered box and the platform's own font read both show (scripts/tgp_parity_face.py). */
@font-face {
  font-family: "Sharp Grotesk Medium";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/static/fonts/WorkSans-Medium.woff2") format("woff2");
}

/* Their client portal's own submit, read off their live doors on 4 November 2026: rgb(51, 51, 51) with
   rgba(51, 51, 51, .25) 0 4px 12px beneath it. It is not one of the tokens above, so it is stated here once
   rather than retyped wherever a door draws that button. */
:root { --color-cta-dark-ink: 51, 51, 51; }

/* BLOOM'S FIVE PROJECT STATUSES, stated once here for the same reason the CTA ink above is (7 November
   2026). They are not in dembrandt's token extraction, because the extraction walks the pages our rebuild
   is measured against and the status editor is none of them; they were read off Bloom's own editor at
   app.bloom.io/portal/projects/bookings, where the five are listed as editable labels each beside its own
   swatch: Pending #FCA600, Booked #0CAAF3, Processing #8652E0, Completed #6EC250, Canceled #FF4F24. They
   fill the status pill on the All Projects list and the dot on the Contracts, Licences and Galleries
   lists. Stated here rather than typed twice in two sheets, and so `tgp_parity_tokens_table.py` reads
   them as the tokens they are. (Completed is also Bloom's --color-green, which the extraction does carry;
   it is named here with its siblings so the five read as one set.) */
:root { --color-status-pending: #FCA600; --color-status-booked: #0CAAF3;
        --color-status-processing: #8652E0; --color-status-completed: #6EC250;
        --color-status-canceled: #FF4F24; }