:root {
  /* ===== BASE PALETTE ===== */

  /* Pink (brand) */
  --pink-50:  #FDF0F5;
  --pink-100: #FBD9E6;
  --pink-200: #F6B0CB;
  --pink-300: #EE7FA9;
  --pink-400: #E04B87;
  --pink-500: #D02A75;
  --pink-600: #C8186A;  /* primary: 5.5:1 with white */
  --pink-700: #A8125A;
  --pink-800: #860E49;
  --pink-900: #640A37;

  /* Grey (neutrals) */
  --grey-0:   #FFFFFF;
  --grey-50:  #F8F8F9;
  --grey-100: #F0F0F2;
  --grey-200: #E2E2E6;
  --grey-300: #C9C9CF;
  --grey-400: #A3A3AB;
  --grey-500: #71717A;  /* lightest grey allowed for text: 4.8:1 */
  --grey-600: #5C5C66;
  --grey-700: #45454E;
  --grey-800: #2E2E35;
  --grey-900: #18181C;

  /* Alert ramps */
  --green-50: #EDF8F1;  --green-200: #8FD5AB;  --green-600: #1A7A49;
  --amber-50: #FFF7E6;  --amber-200: #FBD06A;  --amber-600: #9A6500;
  --red-50:   #FEF1F0;  --red-200:   #F8A49D;  --red-600:   #B4261B;
  --blue-50:  #EEF5FD;  --blue-200:  #9FC6F3;  --blue-600:  #1F62B5;
}


/* ==========================================================================
   SCOPED THEMES
   Everything below is declared on :root AND on any element with a
   data-weave-theme attribute. A token that points to another token
   (e.g. --dataviz-1 → --color-primary) is worked out where it is declared,
   so re-declaring them on the themed container makes them pick up that
   theme's values instead of the page's.

   To theme part of a page:
     <section data-weave-theme="ocean"> … </section>
     [data-weave-theme="ocean"] { --color-primary: var(--blue-600); … }
   Load the theme file after tokens.css: both selectors weigh the same,
   so the one that comes later wins.
   ========================================================================== */
:root,
[data-weave-theme] {

  /* ===== SEMANTIC TOKENS (components use these) ===== */

  /* Primary scale: the only colours a theme needs to set.
     Focus rings, selected items, the field focus ring and the pink parts
     of toasts all point to these, so they follow the theme automatically. */
  --color-primary:         var(--pink-600);
  --color-primary-hover:   var(--pink-700);
  --color-primary-pressed: var(--pink-800);
  --color-primary-subtle:  var(--pink-50);
  --color-primary-subtle-pressed: var(--pink-100);  /* Outline button while pressed (pink-50 on hover) */
  --color-primary-soft:    var(--pink-200);  /* light tint: field focus ring, pink on dark toasts */
  --color-primary-on-dark: var(--pink-300);  /* pink edges and rings on dark surfaces (Outline button border) */
  --color-primary-text:    var(--pink-700);  /* pink text on white, e.g. the Outline button */
  --color-on-primary:      var(--grey-0);

  /* Follow the primary scale */
  --color-primary-text-on-dark: var(--color-primary-soft);  /* pink text on dark surfaces (Outline button label) */

  /* Primary button. Solid by default; a theme can point these to the light
     tints for "soft" buttons. */
  --button-primary-bg:         var(--color-primary);
  --button-primary-bg-hover:   var(--color-primary-hover);
  --button-primary-bg-pressed: var(--color-primary-pressed);
  --button-primary-text:       var(--color-on-primary);

  /* Danger: actions that delete or destroy (an action, not a status).
     Point to the error colours for now, so they can change separately later. */
  --color-danger:        var(--color-error);         /* Delete button text, edge and fill */
  --color-danger-bg:     var(--color-error-bg);      /* Delete button hover and pressed */
  --color-danger-border: var(--color-error-border);  /* pressed ring and tint on Delete buttons */

  /* Selected items (menus, lists, presets) and focus: follow the primary scale */
  --color-selected-bg:         var(--color-primary-subtle);
  --color-selected-bg-hover:   var(--color-primary-subtle-pressed);  /* a selected item while hovered (selectable tags) */
  --color-selected-text:       var(--color-primary-text);  /* text and checks on the selected background */
  --color-focus-ring:          var(--color-primary);
  --color-focus-ring-on-dark:  var(--color-primary-on-dark);  /* on dark surfaces (6.95:1 on grey-900) */
  --color-focus-ring-inverse:  var(--grey-0);    /* white ring for inverse links (footer) */

  /* Text */
  --color-text:           var(--grey-900);
  --color-text-secondary: var(--grey-700);  /* descriptions, body text in components, icons */
  --color-text-nav:       var(--grey-800);  /* sidebar links and vertical tabs */
  --color-text-muted:     var(--grey-600);
  --color-text-subtle:    var(--grey-500);
  --color-text-faint:     var(--grey-400);  /* present but de-emphasised, not disabled: other months' days in a calendar */
  --color-text-disabled:  var(--grey-400);
  --color-text-disabled-subtle: var(--grey-300);  /* unavailable calendar days (also struck through) */
  --color-text-inverse:   var(--grey-0);    /* on dark surfaces */
  --color-text-inverse-pressed: var(--grey-200);  /* inverse link while pressed */

  /* Interaction backgrounds (neutral items: ghost buttons, menu items, rows) */
  --color-hover-bg:   var(--grey-100);
  --color-pressed-bg: var(--grey-200);
  --color-hover-bg-on-dark:   var(--grey-800);  /* hover on dark surfaces */
  --color-pressed-bg-on-dark: var(--grey-700);  /* pressed on dark surfaces */
  --color-disabled-bg: var(--grey-100);  /* disabled buttons, checkboxes, radios and tags */

  /* Surfaces and borders */
  --color-surface:         var(--grey-0);
  --color-surface-muted:   var(--grey-50);
  --color-surface-subtle:  var(--grey-100);  /* fixed grey fills: placeholders, neutral badge, counts, key hints */
  --color-surface-strong:  var(--grey-200);  /* fills that sit on grey: group counts, disabled toggle track, "+N" hover */
  --color-surface-inverse: var(--grey-800);  /* tooltips, toasts */
  --color-surface-inverse-strong: var(--grey-900);  /* dark panels (.ds-surface-dark) */
  --color-surface-inverse-raised: var(--grey-600);  /* things on a dark tooltip, e.g. a key hint */
  --color-surface-brand:   var(--pink-900);  /* the footer */
  --color-overlay:         color-mix(in srgb, var(--grey-900) 40%, transparent);  /* behind modals and drawers */
  --color-border:          var(--grey-200);
  --color-border-medium:   var(--grey-300);  /* between border and strong: selectable tag edge, tab hover bar */
  --color-border-strong:   var(--grey-400);
  --color-border-strong-hover: var(--grey-500);  /* strong borders on hover: Secondary button, selectable tag */
  --color-border-disabled: var(--grey-300);  /* disabled fields, checkboxes and radios */

  /* Masks: only the opacity is read, so any solid colour works */
  --mask-solid: var(--grey-900);  /* the solid part of fade-out edges on scrolling lists */

  /* Fields (text inputs, dropdowns, date pickers): one shared style */
  --field-border:     var(--grey-500);  /* the lightest grey with 3:1 on white (4.8:1) */
  --field-border-hover:  var(--grey-700);  /* field edge on hover (also the off toggle track) */
  --field-border-active: var(--grey-900);  /* field edge while its menu or calendar is open */
  --field-focus-ring: var(--color-primary-soft);  /* 3px ring round a focused field, with a primary border */

  /* Skeletons (grey placeholders while content loads) */
  --skeleton-base:      var(--grey-100);  /* the shapes */
  --skeleton-highlight: var(--grey-50);   /* the shimmer band */
  --skeleton-pulse:     var(--grey-200);  /* reduced motion: shapes fade between base and this */
  --skeleton-icon:      var(--grey-300);  /* the image icon */

  /* Alerts: bg / border / text+icon */
  --color-success-bg: var(--green-50); --color-success-border: var(--green-200); --color-success: var(--green-600);
  --color-warning-bg: var(--amber-50); --color-warning-border: var(--amber-200); --color-warning: var(--amber-600);
  --color-error-bg:   var(--red-50);   --color-error-border:   var(--red-200);   --color-error:   var(--red-600);
  --color-info-bg:    var(--blue-50);  --color-info-border:    var(--blue-200);  --color-info:    var(--blue-600);

  /* Data visualisation (in this order) */
  --dataviz-1: var(--color-primary);  /* pink (pink-600, #C8186A) */
  --dataviz-2: #1F62B5;  /* blue */
  --dataviz-3: #0E8A8A;  /* teal */
  --dataviz-4: #C98500;  /* amber */
  --dataviz-5: #7B3FC4;  /* purple */
  --dataviz-6: #1A7A49;  /* green */
  --dataviz-7: #D9620B;  /* orange (3.68:1 on white) */
  --dataviz-8: #D33A3A;  /* red (4.73:1 on white) */

  /* Light and dark shade of each data colour, for text on a coloured
     background (e.g. avatar initials, category tags). Dark on its own
     light shade is always 4.5:1 or more. */
  --dataviz-1-light: #FBD9E6;  --dataviz-1-dark: #A8125A;  /* pink   5.58:1 */
  --dataviz-2-light: #DCEAFB;  --dataviz-2-dark: #1F62B5;  /* blue   4.95:1 */
  --dataviz-3-light: #D5F0EF;  --dataviz-3-dark: #0B6E6E;  /* teal   5.06:1 */
  --dataviz-4-light: #FCEBC4;  --dataviz-4-dark: #7A5000;  /* amber  5.99:1 */
  --dataviz-5-light: #ECE2F8;  --dataviz-5-dark: #6A33AD;  /* purple 6.25:1 */
  --dataviz-6-light: #D6F0E0;  --dataviz-6-dark: #14613A;  /* green  6.21:1 */
  --dataviz-7-light: #FDE2CC;  --dataviz-7-dark: #9A4205;  /* orange 5.36:1 */
  --dataviz-8-light: #FBDADA;  --dataviz-8-dark: #A42424;  /* red    5.65:1 */

  /* Avatars: initials colours (the dataviz shades, like the category tags) */
  --avatar-1-bg: var(--dataviz-1-light);  --avatar-1-text: var(--dataviz-1-dark);  /* pink */
  --avatar-2-bg: var(--dataviz-2-light);  --avatar-2-text: var(--dataviz-2-dark);  /* blue */
  --avatar-3-bg: var(--dataviz-3-light);  --avatar-3-text: var(--dataviz-3-dark);  /* teal */
  --avatar-4-bg: var(--dataviz-4-light);  --avatar-4-text: var(--dataviz-4-dark);  /* amber */
  --avatar-5-bg: var(--dataviz-5-light);  --avatar-5-text: var(--dataviz-5-dark);  /* purple */
  --avatar-6-bg: var(--dataviz-6-light);  --avatar-6-text: var(--dataviz-6-dark);  /* green */

  /* Tags: a soft background and dark text for each colour, all 4.5:1 or
     more. Status colours always mean the same thing; the category colours
     (the data visualisation set, so they match charts) mean nothing on
     their own and only tell categories apart. */
  --tag-neutral-bg: var(--grey-100);        --tag-neutral-text: var(--grey-900);
  --tag-info-bg:    var(--color-info-bg);    --tag-info-text:    var(--color-info);
  --tag-success-bg: var(--color-success-bg); --tag-success-text: var(--color-success);
  --tag-warning-bg: var(--color-warning-bg); --tag-warning-text: var(--color-warning);
  --tag-error-bg:   var(--color-error-bg);   --tag-error-text:   var(--color-error);
  --tag-pink-bg:   var(--dataviz-1-light);  --tag-pink-text:   var(--dataviz-1-dark);
  --tag-purple-bg: var(--dataviz-5-light);  --tag-purple-text: var(--dataviz-5-dark);
  --tag-blue-bg:   var(--dataviz-2-light);  --tag-blue-text:   var(--dataviz-2-dark);
  --tag-teal-bg:   var(--dataviz-3-light);  --tag-teal-text:   var(--dataviz-3-dark);
  --tag-green-bg:  var(--dataviz-6-light);  --tag-green-text:  var(--dataviz-6-dark);
  --tag-yellow-bg: var(--dataviz-4-light);  --tag-yellow-text: var(--dataviz-4-dark);
  --tag-orange-bg: var(--dataviz-7-light);  --tag-orange-text: var(--dataviz-7-dark);
  --tag-red-bg:    var(--dataviz-8-light);  --tag-red-text:    var(--dataviz-8-dark);

  /* Toasts: a dark surface (the same grey-800 as tooltips), so the status
     icons, the action and the focus ring use light tints. Ratios on grey-800:
     text 13.48:1, action pink-200 7.69:1, close grey-300 8.17:1; icons
     green-200 7.88:1, blue-200 7.60:1, amber-200 9.20:1, red-200 6.92:1. */
  --toast-bg:            var(--grey-800);
  --toast-text:          var(--grey-0);
  --toast-action:        var(--color-primary-soft);
  --toast-action-hover:  var(--color-primary-subtle-pressed);
  --toast-close:         var(--grey-300);
  --toast-button-hover:  var(--grey-700);   /* behind the action and the close button on hover */
  --toast-focus-ring:    var(--color-primary-soft);   /* rings on the dark toast */
  --toast-icon-success:  var(--green-200);
  --toast-icon-info:     var(--blue-200);
  --toast-icon-warning:  var(--amber-200);
  --toast-icon-error:    var(--red-200);


  /* ==========================================================================
     NON-COLOUR TOKENS
     Every other file uses these with var(--token-name), never raw values.
     ========================================================================== */

  /* ===== SPACING: 4px scale =====
     Every space is a multiple of 4px. The number is the multiplier:
     --space-2 = 2 × 4 = 8px, --space-4 = 4 × 4 = 16px, and so on.
     Values are in rem (1rem = 16px at the browser's default text size),
     so spacing grows along with text when someone enlarges it. */
  --space-0:  0;
  --space-1:  0.25rem;  /* 4px */
  --space-2:  0.5rem;   /* 8px */
  --space-3:  0.75rem;  /* 12px */
  --space-4:  1rem;     /* 16px */
  --space-5:  1.25rem;  /* 20px */
  --space-6:  1.5rem;   /* 24px */
  --space-8:  2rem;     /* 32px */
  --space-10: 2.5rem;   /* 40px */
  --space-12: 3rem;     /* 48px */
  --space-16: 4rem;     /* 64px */
  --space-20: 5rem;     /* 80px */
  --space-24: 6rem;     /* 96px */

  /* Off-scale values, ONLY for the "Don't" examples on the Spacing page.
     Never use these in the product. */
  --space-example-off-scale-a: 15px;
  --space-example-off-scale-b: 22px;
  --space-example-nudge:       1px;  /* a "by eye" tweak that still leaves the icon off-centre */

  /* ===== TYPOGRAPHY ===== */
  /* Inter is loaded from Google Fonts in the <head> of every page.
     The rest are fallbacks while it loads (or if it can't). */
  --font-family-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto,
                      "Helvetica Neue", Arial, sans-serif;
  --font-family-mono: ui-monospace, "SFMono-Regular", Consolas,
                      "Liberation Mono", monospace;
  /* What each font is for (components use these) */
  --font-heading: var(--font-family-sans);
  --font-body:    var(--font-family-sans);
  --font-code:    var(--font-family-mono);
  /* Only for "Don't" examples on the Typography page. Never use in the product. */
  --font-family-serif-example: Georgia, "Times New Roman", serif;

  /* Font sizes. Text sizes and line heights are in rem (1rem = the
     browser's text size, usually 16px), so text grows when someone
     makes it bigger in their browser settings. (WCAG 1.4.4) */
  /* Font sizes */
  --font-size-xs:  0.75rem;
  --font-size-sm:  0.875rem;
  --font-size-md:  1rem;  /* body text */
  --font-size-lg:  1.25rem;
  --font-size-xl:  1.5rem;
  --font-size-2xl: 2rem;
  --font-size-3xl: 2.5rem;

  /* Font weights */
  --font-weight-regular:  400;
  --font-weight-medium:   500;
  --font-weight-semibold: 600;
  --font-weight-bold:     700;

  /* Line heights (unitless = multiplied by the font size) */
  --line-height-tight:  1.2;  /* headings */
  --line-height-snug:   1.3;  /* card titles */
  --line-height-normal: 1.5;  /* body text */
  --line-height-none:   1;    /* line height = font size (big specimens) */

  /* Letter spacing */
  --letter-spacing-tight: -0.02em;  /* Display, H1 */
  --letter-spacing-snug:  -0.01em;  /* H2 */
  --letter-spacing-none:   0;       /* everything else */
  --letter-spacing-wide:   0.06em;  /* small uppercase labels */

  /* Underlined links: gap between the text and its underline */
  --link-underline-offset: 3px;

  /* Comfortable line length for reading: about 60–75 characters */
  --layout-measure: 65ch;

  /* ===== TYPE SCALE — responsive =====
     Every text style has a size, line height, weight and letter spacing.
     Styles that change with screen size have a value for each breakpoint:
       -mobile  up to 767px
       -tablet  768px and up
       -desktop 1024px and up
       -xl      1440px and up
     The media queries at the bottom of this file switch --type-<style>-size
     and --type-<style>-line-height to the right one. In CSS, always use
     those two (not the -mobile/-tablet… ones), e.g.
       font-size: var(--type-h1-size);
       line-height: var(--type-h1-line-height);
     Ready-made classes for each style are in components.css (.ds-text-h1…). */

  /* Breakpoints, for reference and for main.js.
     (CSS can't use var() inside @media, so the media queries below repeat
     these numbers. Change both together.) */
  --breakpoint-tablet:  768px;
  --breakpoint-desktop: 1024px;
  --breakpoint-xl:      1440px;

  /* Display: Bold */
  --type-display-size-mobile:         2.5rem;
  --type-display-line-height-mobile:  3rem;
  --type-display-size-tablet:         3rem;
  --type-display-line-height-tablet:  3.5rem;
  --type-display-size-desktop:        3.5rem;
  --type-display-line-height-desktop: 4rem;
  --type-display-size-xl:             4rem;
  --type-display-line-height-xl:      4.5rem;
  --type-display-weight:         var(--font-weight-bold);
  --type-display-letter-spacing: var(--letter-spacing-tight);

  /* H1: Bold */
  --type-h1-size-mobile:         2rem;
  --type-h1-line-height-mobile:  2.5rem;
  --type-h1-size-tablet:         2.25rem;
  --type-h1-line-height-tablet:  2.75rem;
  --type-h1-size-desktop:        2.5rem;
  --type-h1-line-height-desktop: 3rem;
  --type-h1-size-xl:             3rem;
  --type-h1-line-height-xl:      3.5rem;
  --type-h1-weight:         var(--font-weight-bold);
  --type-h1-letter-spacing: var(--letter-spacing-tight);

  /* H2: Bold */
  --type-h2-size-mobile:         1.75rem;
  --type-h2-line-height-mobile:  2.25rem;
  --type-h2-size-tablet:         2rem;
  --type-h2-line-height-tablet:  2.5rem;
  --type-h2-size-desktop:        2rem;
  --type-h2-line-height-desktop: 2.5rem;
  --type-h2-size-xl:             2.25rem;
  --type-h2-line-height-xl:      2.75rem;
  --type-h2-weight:         var(--font-weight-bold);
  --type-h2-letter-spacing: var(--letter-spacing-snug);

  /* H3: Semibold */
  --type-h3-size-mobile:         1.5rem;
  --type-h3-line-height-mobile:  2rem;
  --type-h3-size-tablet:         1.5rem;
  --type-h3-line-height-tablet:  2rem;
  --type-h3-size-desktop:        1.75rem;
  --type-h3-line-height-desktop: 2.25rem;
  --type-h3-size-xl:             1.75rem;
  --type-h3-line-height-xl:      2.25rem;
  --type-h3-weight:         var(--font-weight-semibold);
  --type-h3-letter-spacing: var(--letter-spacing-none);

  /* H4: Semibold */
  --type-h4-size-mobile:         1.25rem;
  --type-h4-line-height-mobile:  1.75rem;
  --type-h4-size-tablet:         1.25rem;
  --type-h4-line-height-tablet:  1.75rem;
  --type-h4-size-desktop:        1.5rem;
  --type-h4-line-height-desktop: 2rem;
  --type-h4-size-xl:             1.5rem;
  --type-h4-line-height-xl:      2rem;
  --type-h4-weight:         var(--font-weight-semibold);
  --type-h4-letter-spacing: var(--letter-spacing-none);

  /* Subheadline: Semibold */
  --type-subheadline-size-mobile:         1.125rem;
  --type-subheadline-line-height-mobile:  1.75rem;
  --type-subheadline-size-tablet:         1.125rem;
  --type-subheadline-line-height-tablet:  1.75rem;
  --type-subheadline-size-desktop:        1.25rem;
  --type-subheadline-line-height-desktop: 1.75rem;
  --type-subheadline-size-xl:             1.25rem;
  --type-subheadline-line-height-xl:      1.75rem;
  --type-subheadline-weight:         var(--font-weight-semibold);
  --type-subheadline-letter-spacing: var(--letter-spacing-none);

  /* The styles below are the same on every screen size */

  /* Body large: Regular */
  --type-body-large-size:           1.125rem;
  --type-body-large-line-height:    1.75rem;
  --type-body-large-weight:         var(--font-weight-regular);
  --type-body-large-letter-spacing: var(--letter-spacing-none);

  /* Body: Regular */
  --type-body-size:           1rem;
  --type-body-line-height:    1.5rem;
  --type-body-weight:         var(--font-weight-regular);
  --type-body-letter-spacing: var(--letter-spacing-none);

  /* Body small: Regular */
  --type-body-small-size:           0.875rem;
  --type-body-small-line-height:    1.25rem;
  --type-body-small-weight:         var(--font-weight-regular);
  --type-body-small-letter-spacing: var(--letter-spacing-none);

  /* Caption: Regular */
  --type-caption-size:           0.75rem;
  --type-caption-line-height:    1rem;
  --type-caption-weight:         var(--font-weight-regular);
  --type-caption-letter-spacing: var(--letter-spacing-none);

  /* Label: Medium */
  --type-label-size:           0.75rem;
  --type-label-line-height:    1rem;
  --type-label-weight:         var(--font-weight-medium);
  --type-label-letter-spacing: var(--letter-spacing-none);

  /* Mobile values to start with; the media queries below override them */
  --type-display-size:            var(--type-display-size-mobile);
  --type-display-line-height:     var(--type-display-line-height-mobile);
  --type-h1-size:                 var(--type-h1-size-mobile);
  --type-h1-line-height:          var(--type-h1-line-height-mobile);
  --type-h2-size:                 var(--type-h2-size-mobile);
  --type-h2-line-height:          var(--type-h2-line-height-mobile);
  --type-h3-size:                 var(--type-h3-size-mobile);
  --type-h3-line-height:          var(--type-h3-line-height-mobile);
  --type-h4-size:                 var(--type-h4-size-mobile);
  --type-h4-line-height:          var(--type-h4-line-height-mobile);
  --type-subheadline-size:        var(--type-subheadline-size-mobile);
  --type-subheadline-line-height: var(--type-subheadline-line-height-mobile);

  /* WCAG 1.4.12 text spacing test ("Test text spacing" on the Typography page) */
  --a11y-test-line-height:       1.5;     /* × font size */
  --a11y-test-paragraph-spacing: 2em;     /* 2 × font size */
  --a11y-test-letter-spacing:    0.12em;
  --a11y-test-word-spacing:      0.16em;

  /* Big "Aa" on the Typography page */
  --type-specimen-size: 8rem;

  /* ===== SHAPE — corner radius and borders ===== */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   16px;  /* large panels, e.g. the Overview banner */
  --radius-full: 9999px;  /* pills and circles */

  /* Controls (buttons, fields, dropdowns, search, date pickers): 12px, the
     same soft corners as cards and tooltips, scaled down on small sizes so
     they never turn into pills. A control and its neighbour of the same
     height always share these. */
  --radius-control-xs: 6px;                    /* XS, 24px */
  --radius-control-sm: var(--radius-md);       /* Small, 32px: 8px */
  --radius-control:    var(--radius-lg);       /* Medium 44px and Large 56px: 12px */

  /* Containers (cards, menus, popovers, modals, toasts, tooltips, alerts,
     panels): 12px */
  --radius-container:  var(--radius-lg);

  --border-width-thin:  1px;
  --border-width-thick: 2px;

  /* ===== ELEVATION — shadows ===== */
  /* Shadows: grey-900 (24, 24, 28) at very low opacity, never pure black */
  --shadow-sm: 0 1px 2px rgba(24, 24, 28, 0.04), 0 2px 8px rgba(24, 24, 28, 0.04);  /* resting */
  --shadow-md: 0 4px 16px rgba(24, 24, 28, 0.08);                                     /* hover */

  /* ===== MOTION ===== */
  --duration-fast:   120ms;
  --duration-normal: 200ms;
  --duration-fade:   150ms;  /* popovers fade in */
  --modal-enter-scale: 0.96;  /* modals scale in from 96% */
  --duration-feedback: 1500ms;
  --duration-spin: 800ms;  /* one turn of a loading spinner */
  --easing-standard: ease;

  /* ===== CONTROL SIZES ===== */
  --size-control-standard: 2.75rem;  /* 44px: buttons, also meets WCAG 2.5.5 AAA */
  --size-control-compact:  2rem;     /* 32px */
  --size-target-minimum:   1.5rem;   /* 24px: smallest target WCAG 2.5.8 allows */

  /* ===== FOCUS RING (keyboard users) ===== */
  --focus-ring-width:  2px;
  --focus-ring-offset: 2px;

  /* ===== LAYERS — stacking order (higher number = on top) ===== */
  --layer-sticky:    10;  /* top bar */
  --layer-dropdown:  20;  /* dropdown menus and search results: above cards, tables and panels */
  --layer-overlay:   24;  /* dimmed page behind the menu drawer */
  --layer-drawer:    26;  /* menu drawer (sidebar on mobile and tablet), and the top bar while it's open */
  --layer-toast:     28;  /* toasts: above the page, menus and the menu drawer */
  --layer-skip-link: 30;  /* "Skip to content" link, above everything */

  /* ===== LAYOUT — sizes used by the documentation site itself ===== */
  --layout-topbar-height:     64px;   /* top bar on every page */
  --site-version: "Version 1.0 · October 2026";  /* shown on the Get started pages; change it here for each release */
  --layout-topbar-search-width: 280px;  /* search box in the top bar */
  --layout-search-results-max-height: 360px;  /* search dropdown, scrolls if taller */
  --layout-sidebar-width:     264px;
  --layout-drawer-width:      280px;  /* the sidebar as a slide-in drawer, under 1024px */
  --layout-content-max-width: 960px;  /* widest the content gets (not counting page padding) */
  --layout-card-min-width:    240px;  /* smallest card width in a grid */
  --layout-swatch-width:      88px;   /* every colour swatch on the Colours page */
  --layout-matrix-cell-width: 88px;  /* contrast matrix cells */
  --layout-icon-tile-min-width: 120px;  /* icon grid tiles */
  --layout-type-meta-width: 200px;
  --layout-phone-example-width: 240px;
  --layout-state-cell-min-height: 160px;  /* cells in the Button states grid */  /* small "phone" frames in examples */
  --size-example-fixed-button: 5rem;     /* 80px: the fixed-width "Don't" button example */
  --layout-spacing-art-width: 240px;  /* hand-drawn examples on the Spacing page */
  --layout-example-fixed-height: 72px;  /* the deliberately fixed "Don't" boxes on the Typography page */  /* name/weight/token column in the type scale */
  --layout-banner-min-height:        200px;  /* Overview banner */
  --layout-banner-min-height-mobile: 160px;
  --opacity-decorative: 0.5;  /* faint background patterns */
  --layout-card-art-ratio: 2 / 1;  /* overview card illustrations: width / height */
  --layout-card-art-width-mobile: 128px;  /* illustration width on phones */
  --layout-full-height: 100vh;  /* full screen height */
  --layout-sidebar-max-height-mobile: 50vh;  /* sidebar height on phones */
  --print-scale: 0.8;  /* "Download PDF": shrink so the matrix fits one page */
  --mockup-scale: 0.75; /* Real components shown smaller inside page wireframes */
}


/* ==========================================================================
   RESPONSIVE TYPE SCALE: switch to the right size for each screen width.
   (These numbers must match --breakpoint-* above.)
   ========================================================================== */

/* Tablet: 768px and up */
@media (min-width: 768px) {
  :root,
  [data-weave-theme] {
    --type-display-size: var(--type-display-size-tablet);
    --type-display-line-height: var(--type-display-line-height-tablet);
    --type-h1-size: var(--type-h1-size-tablet);
    --type-h1-line-height: var(--type-h1-line-height-tablet);
    --type-h2-size: var(--type-h2-size-tablet);
    --type-h2-line-height: var(--type-h2-line-height-tablet);
    --type-h3-size: var(--type-h3-size-tablet);
    --type-h3-line-height: var(--type-h3-line-height-tablet);
    --type-h4-size: var(--type-h4-size-tablet);
    --type-h4-line-height: var(--type-h4-line-height-tablet);
    --type-subheadline-size: var(--type-subheadline-size-tablet);
    --type-subheadline-line-height: var(--type-subheadline-line-height-tablet);
  }
}

/* Desktop: 1024px and up */
@media (min-width: 1024px) {
  :root,
  [data-weave-theme] {
    --type-display-size: var(--type-display-size-desktop);
    --type-display-line-height: var(--type-display-line-height-desktop);
    --type-h1-size: var(--type-h1-size-desktop);
    --type-h1-line-height: var(--type-h1-line-height-desktop);
    --type-h2-size: var(--type-h2-size-desktop);
    --type-h2-line-height: var(--type-h2-line-height-desktop);
    --type-h3-size: var(--type-h3-size-desktop);
    --type-h3-line-height: var(--type-h3-line-height-desktop);
    --type-h4-size: var(--type-h4-size-desktop);
    --type-h4-line-height: var(--type-h4-line-height-desktop);
    --type-subheadline-size: var(--type-subheadline-size-desktop);
    --type-subheadline-line-height: var(--type-subheadline-line-height-desktop);
  }
}

/* XL desktop: 1440px and up */
@media (min-width: 1440px) {
  :root,
  [data-weave-theme] {
    --type-display-size: var(--type-display-size-xl);
    --type-display-line-height: var(--type-display-line-height-xl);
    --type-h1-size: var(--type-h1-size-xl);
    --type-h1-line-height: var(--type-h1-line-height-xl);
    --type-h2-size: var(--type-h2-size-xl);
    --type-h2-line-height: var(--type-h2-line-height-xl);
    --type-h3-size: var(--type-h3-size-xl);
    --type-h3-line-height: var(--type-h3-line-height-xl);
    --type-h4-size: var(--type-h4-size-xl);
    --type-h4-line-height: var(--type-h4-line-height-xl);
    --type-subheadline-size: var(--type-subheadline-size-xl);
    --type-subheadline-line-height: var(--type-subheadline-line-height-xl);
  }
}