/* 722web design tokens.
 *
 * The single source of visual truth. Every surface -- admin console, portal,
 * builder chrome, login pages -- consumes these and nothing else. No screen
 * defines its own colours, spacing or type scale.
 *
 * There is no serif anywhere in this file, by design.
 */

:root {
  /* --- Typography ------------------------------------------------------ */
  --font-sans: Inter, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica,
    Arial, sans-serif;
  --font-heading: var(--font-sans);
  /* 2.202.0. Every eyebrow and every subheading. The body font unless a
     theme says otherwise (themes/theme.py), which is what a published page
     drew them in before they had fonts of their own. */
  --font-eyebrow: var(--font-sans);
  --font-subheading: var(--font-sans);
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
    "Liberation Mono", monospace;

  --text-xs: 0.75rem;
  --text-sm: 0.8125rem;
  --text-base: 0.875rem;
  --text-md: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.375rem;
  --text-2xl: 1.75rem;

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;

  --leading-tight: 1.25;
  --leading-normal: 1.5;

  /* --- Colour ---------------------------------------------------------- */
  --color-canvas: #f6f7f9;
  --color-surface: #ffffff;
  --color-surface-sunken: #f1f3f6;
  --color-border: #dfe3e9;
  --color-border-strong: #7c8798;

  --color-text: #16202c;
  --color-text-muted: #64707f;
  --color-text-inverse: #ffffff;
  /* 2.340.0. Words on the accent; a site's theme sets its own. */
  --color-on-accent: #ffffff;
  /* 2.346.0. The words on a block's own light or dark colour; a site's theme
     stylesheet gives its own (themes.theme.inks). */
  --color-ink-on-light: #16202c;
  --color-ink-on-dark: #f6f7f9;
  /* 2.337.0. Continue with Apple's button, black as Apple asks. */
  --color-apple: #000000;

  /* The brand teal: ArtistryBlocks blue, Kelly's own (2.376.0; #0065CB,
     the 7w mark's blue, from 2.318.0). Used for surfaces where text sits ON
     it rather than in it. White on it measures 4.56:1; as text it is 4.10:1
     on the sunken surface, under AA, so small text is --color-accent's. */
  --color-brand: #008292;

  /* 2.376.0. Every button on the console and the portal, in the brand teal
     (Kelly: "change all the buttons ... to the ArtistryBlocks blue color").
     A site's theme sets its own to its accent (themes.theme.theme_css), so
     a customer's buttons on the canvas and the published page stay theirs. */
  --color-button: #008292;
  --color-button-hover: #006f7b;

  /* Accent text. Darker than the brand teal so it clears AA on every surface
     the design puts it on, including the sunken one (4.97:1 there). */
  --color-accent: #00747f;
  /* What reads on the accent. Named rather than assumed white: a site whose
     accent is a pale yellow needs dark text on it, and a menu drawn in the
     accent is the place that shows up first. */
  --color-accent-ink: #ffffff;
  --color-accent-hover: #006f7b;
  --color-accent-subtle: #e5f3f4;

  --color-danger: #b3251f;
  --color-danger-hover: #961e19;
  --color-danger-subtle: #fdeceb;

  --color-success: #1a6b45;
  --color-success-subtle: #e8f4ee;

  --color-warning: #8a5a06;
  --color-warning-subtle: #fdf3e0;
  /* Added for the warning button. The subtle and text pair already existed for
     badges; a filled button needs somewhere to go on hover. */
  --color-warning-hover: #6f4805;

  /* Google's own colours, for the search-result preview only. Not theme
     colours and not for anything else: the point of that preview is that it
     looks like the thing it is previewing, so it does not follow the
     customer's palette or ours. Named here because a component may carry no
     literal colours, and this is the one place the rule needs an exception
     rather than a way around it. */
  /* A picture opened over the page. Not a theme colour: the point of a
     backdrop is that it is the same dark whatever the site looks like, so a
     photograph is judged against nothing but itself. */
  /* Over a hero photograph, when the placement asks for it. Not a theme
     colour: a scrim is the same darkness whatever the site looks like. */
  --hero-scrim: rgba(15, 23, 42, 0.45);

  --lightbox-backdrop: rgba(15, 23, 42, 0.92);
  --lightbox-ink: #f6f7f9;

  --serp-url: #202124;
  --serp-title: #1a0dab;
  --serp-text: #4d5156;

  --color-focus-ring: #5cb0b9;

  /* 2.219.0. A document's type tile in a Documents block, in the colour its
     programs are known by. Not theme colours: a PDF reads as a PDF whatever
     the site looks like. Each is dark enough for white type on it. */
  --doctype-pdf: #b42318;
  --doctype-doc: #175cd3;
  --doctype-sheet: #087443;
  --doctype-slides: #b54708;
  --doctype-archive: #6941c6;
  --doctype-text: #475467;

  /* --- Spacing (4px base) ---------------------------------------------- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;

  /* --- The room above and below a block -------------------------------- */
  /* The three steps of the Top and Bottom Spacing settings. Tight is 1.5rem
     because that is what the Pricing block always had -- the one block whose
     first and last elements carried no margin of their own, and so the one
     that already looked the way every block now does. Each step doubles the
     last, so the difference between them reads as a choice. */
  --block-space-tight: var(--space-5);
  --block-space-relaxed: var(--space-7);
  --block-space-roomy: 6rem;
  /* 2.235.0. How far a block set to Slight Overlap is drawn over the block
     beside it (Kelly: "slight bleed"). */
  --block-overlap: var(--space-5);

  /* --- The nav bar's height -------------------------------------------- */
  /* Assigned rather than left to a fallback. Seven rules reserved space for
     a bar that stays at the top, and every one of them read
     `var(--navbar-height, 4rem)` against a variable nothing ever set -- so
     the reserved space was a guess that happened to be written down in seven
     places.

     It is a real measurement because the bar's row of controls is given this
     as a minimum height, rather than being whatever its contents came to. */
  --navbar-height: 4rem;

  /* The thin row of small links above those controls, when a bar carries one.
     Made true the same way, by a minimum height on the row itself.

     This comment used to say the small links row "sits outside the bar and
     stays in the flow while the bar is fixed", which was a description of a
     fault rather than a decision: a sticky bar took its controls out of the
     flow and left the row behind, so the row rendered under the bar and then
     scrolled away from it. The row is inside the bar from 2.148.0, and the
     space a sticky bar reserves is these two added together. */
  --navbar-utility-height: 2.25rem;

  /* --- Radius ---------------------------------------------------------- */
  --radius-sm: 3px;
  --radius-md: 6px;
  --radius-lg: 10px;

  /* --- Elevation ------------------------------------------------------- */
  --shadow-sm: 0 1px 2px rgba(22, 32, 44, 0.06);
  --shadow-md: 0 2px 8px rgba(22, 32, 44, 0.08);
  --shadow-lg: 0 8px 28px rgba(22, 32, 44, 0.14);

  /* --- Layout ---------------------------------------------------------- */
  --header-height: 56px;
  --content-max: 1200px;

  /* --- Motion ---------------------------------------------------------- */
  --transition-fast: 120ms ease;
}