/*
  Design tokens (MB-1): the named CSS custom properties every starter and block stylesheet reads. Block CSS uses these
  names only, never a hex value. A site overrides them in its own tokens file (e.g. wwwroot/css/site/tokens.css, linked
  after this one), so the blocks take the site's colours, type and spacing without being edited.
  The starter values are deliberately plain; every text/ground pair here is contrast-checked (text 4.5:1, controls 3:1).
  Layers: 1. raw palette (--c-*), 2. roles (--color-*, --font-*, --fs-*, --space-*, --radius-*), 3. parts (buttons,
  eyebrow, card), 4. section colours (--theme-<key>-*: read by css/shared/themes.css for the band--<key> classes).
*/
:root {
  /* 1. Palette */
  --c-white: #ffffff;
  --c-black: #111111;
  --c-ink: #1a1a1a;
  --c-grey-700: #4a4a4a;
  --c-grey-300: #c4c4c4;
  --c-grey-200: #d0d0d0;
  --c-grey-100: #f0f0f0;
  --c-blue: #0b57d0;
  --c-blue-dark: #0842a0;
  --c-brand: #1f3a5f;
  --c-brand-tint: #eef3f9;
  --c-brand-soft: #d6e2f0;
  --c-accent: #ffd23f;

  /* 2. Roles on the page's own ground */
  --color-page: var(--c-white);
  --color-text: var(--c-ink);
  --color-heading: var(--c-black);
  --color-muted: var(--c-grey-700);
  --color-link: var(--c-blue);
  --color-link-hover: var(--c-blue-dark);
  --color-focus: var(--c-blue);
  --color-focus-inverse: var(--c-white);
  --color-hairline: var(--c-grey-200);
  --color-border: var(--c-grey-700);          /* control borders: 3:1 or more */
  --color-surface-quiet: var(--c-grey-100);
  --color-eyebrow: var(--c-grey-700);

  --font-body: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-display: var(--font-body);
  --font-mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --fw-light: 300;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  --fs-display: clamp(2.5rem, 5vw, 4rem);     /* hero heading */
  --fs-h1: clamp(2rem, 4vw, 3rem);
  --fs-h2: clamp(1.75rem, 3vw, 2.25rem);
  --fs-h3: 1.375rem;
  --fs-h4: 1.125rem;
  --fs-body-lg: 1.125rem;
  --fs-body: 1rem;
  --fs-body-sm: 0.875rem;
  --fs-label: 0.8125rem;
  --lh-display: 1.08;
  --lh-heading: 1.2;
  --lh-body: 1.5;
  --lh-label: 1.3;
  --ls-label: 0.06em;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --page-gutter: clamp(16px, 4vw, 48px);      /* side padding of a band's content */
  --section-space: clamp(48px, 7vw, 96px);    /* top and bottom padding of a band */
  --container-max: 70rem;                     /* content width */
  --container-text: 42rem;                    /* one reading column */
  --grid-gap: var(--space-6);
  --tap-min: 44px;                            /* smallest tap target */

  --radius-none: 0;
  --radius-sm: 4px;
  --radius-card: 12px;
  --radius-media: 8px;
  --radius-pill: 999px;
  --border-width: 1px;
  --border-width-heavy: 2px;

  --motion-fast: 0.2s;
  --motion-ease: ease;

  /* 3. Parts. --btn-1-* is the primary pill, --btn-2-* the secondary; band classes swap them per ground. */
  --btn-font: var(--font-body);
  --btn-fs: var(--fs-body);
  --btn-fw: var(--fw-semibold);
  --btn-radius: var(--radius-pill);
  --btn-padding: 0.65em 1.4em;
  --btn-1-bg: var(--c-brand);
  --btn-1-fg: var(--c-white);
  --btn-1-border: var(--c-brand);
  --btn-1-hover-bg: var(--c-black);
  --btn-1-hover-fg: var(--c-white);
  --btn-2-bg: transparent;
  --btn-2-fg: var(--color-heading);
  --btn-2-border: var(--color-border);
  --btn-2-hover-bg: var(--color-heading);
  --btn-2-hover-fg: var(--color-page);

  --eyebrow-font: var(--font-body);
  --eyebrow-fs: var(--fs-label);
  --eyebrow-fw: var(--fw-bold);
  --eyebrow-ls: var(--ls-label);
  --eyebrow-transform: uppercase;
  --eyebrow-color: var(--color-eyebrow);
  --eyebrow-bg: transparent;
  --eyebrow-border: transparent;
  --eyebrow-radius: var(--radius-pill);
  --eyebrow-padding: 0;
  /* .eyebrow--pill (or a site making every eyebrow a pill) uses these: */
  --eyebrow-pill-bg: transparent;
  --eyebrow-pill-border: currentColor;
  --eyebrow-pill-padding: 0.3em 0.9em;

  --card-bg: transparent;                     /* cards take their band's colours; a site may give them a ground */
  --card-border: var(--color-hairline);
  --card-radius: var(--radius-card);
  --card-padding: var(--space-6);

  /* 4. Section colours: one set per key of the "Section colour" list (Code/Presets/PresetKeys.cs).
     bg = ground, text, heading, link, focus, eyebrow and the two pills. */
  --theme-plain-bg: var(--color-page);
  --theme-plain-text: var(--color-text);
  --theme-plain-heading: var(--color-heading);
  --theme-plain-link: var(--color-link);
  --theme-plain-focus: var(--color-focus);
  --theme-plain-eyebrow: var(--color-eyebrow);

  --theme-light-bg: var(--c-brand-tint);
  --theme-light-text: var(--c-ink);
  --theme-light-heading: var(--c-black);
  --theme-light-link: var(--c-blue-dark);
  --theme-light-focus: var(--c-blue-dark);
  --theme-light-eyebrow: var(--c-brand);

  --theme-muted-bg: var(--c-grey-100);
  --theme-muted-text: var(--c-ink);
  --theme-muted-heading: var(--c-black);
  --theme-muted-link: var(--c-blue-dark);
  --theme-muted-focus: var(--c-blue-dark);
  --theme-muted-eyebrow: var(--c-grey-700);

  --theme-dark-bg: var(--c-brand);
  --theme-dark-text: var(--c-white);
  --theme-dark-heading: var(--c-white);
  --theme-dark-link: var(--c-white);
  --theme-dark-focus: var(--c-white);
  --theme-dark-eyebrow: var(--c-brand-soft);

  /* MB-130: the Gallery viewer's "Over the page" look: its layer over the page (shown at 90 %) and its round arrows. */
  --gallery-viewer-over: var(--theme-dark-bg);

  --theme-deep-bg: var(--c-black);
  --theme-deep-text: var(--c-white);
  --theme-deep-heading: var(--c-white);
  --theme-deep-link: var(--c-white);
  --theme-deep-focus: var(--c-white);
  --theme-deep-eyebrow: var(--c-accent);

  --theme-accent-bg: var(--c-accent);
  --theme-accent-text: var(--c-black);
  --theme-accent-icon: brightness(0);      /* MB-142: an icon on the accent in the text colour; brightness(0) invert(1) when the text is white */
  --theme-accent-heading: var(--c-black);
  --theme-accent-link: var(--c-black);
  --theme-accent-focus: var(--c-black);
  --theme-accent-eyebrow: var(--c-black);

  /* Pills on light grounds (plain, light, muted) use the defaults above; on dark grounds: */
  --theme-inverse-btn-1-bg: var(--c-white);
  --theme-inverse-btn-1-fg: var(--c-black);
  --theme-inverse-btn-1-hover-bg: var(--c-accent);
  --theme-inverse-btn-1-hover-fg: var(--c-black);
  /* and on the accent ground: */
  --theme-accent-btn-1-bg: var(--c-black);
  --theme-accent-btn-1-fg: var(--c-white);
  --theme-accent-btn-1-hover-bg: var(--c-brand);
  --theme-accent-btn-1-hover-fg: var(--c-white);
}