/* Covi-pi-1 Design: tokens.
   GENERATED by scripts/build-tokens.mjs from the DTCG files in tokens/. Do not edit by hand:
   change tokens/*.json and run npm run tokens (CI fails when this file is out of date).

   A tactile, hardware-inspired system: an aluminium body, white key caps separated by thin
   grooves, round knobs with coloured caps, black "sharp" dots and a black OLED display.
   Colour is rare and functional: the four knob colours, the record orange and small glyphs.
   Light theme "Aluminium" on :root (or [data-theme="light"] on any element), dark theme
   "Graphite" on .p-dark or [data-theme="dark"], and [data-theme="system"] follows the OS.
   Density "comfortable" by default, "compact" on [data-density="compact"]. */

:root {
  color-scheme: light;

  /* ---- body (the device chassis) ---- */
  --cp-body: #D6D8DA;
  --cp-body-hi: #E3E4E6;
  --cp-body-lo: #C6C8CB;
  --cp-body-edge: #B9BCC0;
  --cp-page: #E9EAEC;   /* the table the device sits on */

  /* ---- keys ---- */
  --cp-groove: #B5B8BC;   /* the gap between keys */
  --cp-key: #F4F4F2;
  --cp-key-hi: #FFFFFF;
  --cp-key-lo: #E4E4E1;
  --cp-key-pressed: #E9E9E6;
  --cp-key-side: #CDCED0;   /* the visible lower lip of a key */

  /* ---- wells (recessed fields: inputs, tracks) ---- */
  --cp-well: #E6E7E8;
  --cp-well-line: #C9CBCE;

  /* ---- ink ---- */
  --cp-ink: #232426;
  --cp-ink-muted: #525559;   /* 6.8:1 on --cp-key, 5.2:1 on --cp-body */
  --cp-ink-faint: #9A9DA2;   /* decorative only, never text that carries meaning */
  --cp-dot: #1C1C1D;   /* the black "sharp" keys */

  /* ---- OLED display ---- */
  --cp-oled: #0A0A0B;
  --cp-oled-bezel: #1A1A1C;
  --cp-oled-ink: #F2F2F2;
  --cp-oled-dim: #8A8A8E;
  --cp-oled-line: #3A3A3E;

  /* ---- signal colours (knob caps and glyphs) ---- */
  --cp-blue: #1E9BE6;
  --cp-green: #2DB24A;
  --cp-white: #F7F7F5;
  --cp-orange: #F26A2E;   /* Record: the brand signal. CpConfigProvider can swap it. */
  --cp-red: #E8453C;

  /* ---- p2 hardware: signal graphics. The signal colours tuned to reach 3:1 or more against --cp-key, --cp-page, --cp-body and --cp-key-lo. Use them for meaningful graphics (LED rings, state rings, strokes, chart lines, status shapes). The knob caps keep the plain signal colours. ---- */
  --cp-blue-graphic: #187EBA;   /* contrast 4.03 key, 3.69 page / graphite 3.57 key, 5.53 page */
  --cp-green-graphic: #238939;   /* contrast 4.05 key, 3.70 page / graphite 3.93 key, 6.09 page */
  --cp-orange-graphic: #C45625;   /* contrast 4.05 key, 3.71 page / graphite 3.56 key, 5.52 page */
  --cp-red-graphic: #D84038;   /* contrast 4.05 key, 3.70 page / graphite 3.11 key, 4.83 page */
  --cp-white-graphic: #777776;   /* contrast 4.07 key, 3.72 page / graphite 10.14 key, 15.73 page */
  --cp-dot-graphic: #1C1C1D;   /* contrast 15.46 key, 14.15 page / graphite 3.11 key, 4.82 page: a light rim, so the black dot reads on graphite */

  /* ---- text-safe signal colours: 4.5:1 or more on key, well, page and body in each theme ---- */
  --cp-blue-text: #095E96;
  --cp-green-text: #146A2A;
  --cp-orange-text: #A23B15;
  --cp-red-text: #A2241D;

  /* ---- focus ---- */
  --cp-focus: #095E96;
  --cp-focus-width: 2px;
  --cp-focus-offset: 2px;
  --cp-focus-lip: 2px;   /* the lip drawn below a raised key cap (the 0 2px lines of --cp-key-shadow); the focus ring reaches this far further down so it sits evenly around the cap and its lip */
  --cp-focus-lip-pressed: 1px;   /* the lip left under a pressed key (--cp-key-shadow-pressed) */

  /* ---- shadows ---- */
  --cp-key-shadow:
    inset 0 1px 0 var(--cp-key-hi),
    0 1px 0 var(--cp-key-side),
    0 2px 0 var(--cp-key-side),
    0 3px 6px rgba(52, 56, 62, 0.16);
  --cp-key-shadow-hover:
    inset 0 1px 0 var(--cp-key-hi),
    0 1px 0 var(--cp-key-side),
    0 2px 0 var(--cp-key-side),
    0 6px 14px rgba(52, 56, 62, 0.2);
  --cp-key-shadow-pressed:
    inset 0 1px 2px rgba(52, 56, 62, 0.18),
    0 1px 0 var(--cp-key-side);
  --cp-well-shadow:
    inset 0 1px 2px rgba(52, 56, 62, 0.22),
    inset 0 -1px 0 var(--cp-key-hi);
  --cp-body-shadow:
    inset 0 1px 0 var(--cp-body-hi),
    inset 0 -1px 0 var(--cp-body-edge),
    0 18px 40px -18px rgba(40, 44, 50, 0.45),
    0 2px 4px rgba(40, 44, 50, 0.1);
  --cp-knob-shadow:
    0 2px 0 var(--cp-key-side),
    0 4px 8px rgba(40, 44, 50, 0.25),
    inset 0 1px 0 var(--cp-key-hi);
  --cp-oled-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    inset 0 0 0 1px rgba(255, 255, 255, 0.08),
    inset 0 2px 10px rgba(0, 0, 0, 0.85);

  /* ---- type ---- */
  --cp-font: "Jost", "Futura", "Century Gothic", ui-sans-serif, system-ui, sans-serif;
  --cp-font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", "Menlo", monospace;
  --cp-text-label: 13px;   /* printed key labels */
  --cp-text-caption: 14px;
  --cp-text-body: 16px;
  --cp-text-lead: 19px;
  --cp-text-h3: 20px;
  --cp-text-h2: 26px;
  --cp-text-h1: 36px;
  --cp-text-display: 52px;
  --cp-weight-thin: 300;
  --cp-weight-regular: 400;
  --cp-weight-medium: 500;
  --cp-weight-strong: 600;

  /* ---- geometry ---- */
  --cp-unit: 64px;   /* one key */
  --cp-gap: 4px;   /* groove width */
  --cp-radius-key: 7px;
  --cp-radius-panel: 10px;
  --cp-radius-body: 16px;
  --cp-radius-oled: 6px;
  --cp-space-1: 4px;
  --cp-space-2: 8px;
  --cp-space-3: 12px;
  --cp-space-4: 16px;
  --cp-space-6: 24px;
  --cp-space-8: 32px;
  --cp-space-12: 48px;
  --cp-space-16: 64px;
  --cp-space-24: 96px;
  --cp-target: 44px;   /* the pointer-target floor for secondary controls; never below 24 px (2.5.8) */
  --cp-control: 48px;   /* the height of a primary control; compact never goes below 32 px */
  --cp-container: 1200px;

  /* ---- motion ---- */
  --cp-press: 80ms;
  --cp-state: 140ms;
  --cp-ease: cubic-bezier(0.2, 0, 0, 1);

  /* ---- decorative canvas (RGB triplets so a canvas can add alpha) ---- */
  --cp-canvas-line-rgb: 120, 124, 130;
  --cp-canvas-text: #525559;
  --cp-canvas-plate-rgb: 233, 234, 236;

  /* ---- overlays ---- */
  --cp-scrim: color-mix(in srgb, var(--cp-page) 78%, transparent);   /* modal backdrop */
  --cp-overlay-shadow:
    inset 0 1px 0 var(--cp-key-hi),
    0 2px 0 var(--cp-key-side),
    0 16px 36px -10px rgba(40, 44, 50, 0.38);
  --cp-overlay-sm: 400px;
  --cp-overlay-md: 560px;
  --cp-overlay-lg: 760px;
  --cp-drawer-width: 400px;
  --cp-z-overlay: 1000;
  --cp-z-toast: 1100;

  /* ---- density ---- */
  --cp-control-pad: 24px;   /* inline padding inside a key-cap control (button, select, field) */

  /* ---- icons (CpIcon and every Lucide icon in the system): the three sizes and the screen stroke ---- */
  --cp-icon-sm: 16px;   /* inside small text, tags and dense rows */
  --cp-icon-md: 20px;   /* inside keys and buttons */
  --cp-icon-lg: 24px;   /* on its own: the size the icons are drawn at (24 px grid) */
  --cp-icon-stroke: 1.5;   /* stroke width on screens, in the 24 px drawing grid (Lucide draws at 2) */

  /* ---- OLED glass (option H, refined 2026-10-26): the bevel is the chamfered edge of the glass itself, with no frame around it, plus the soft glare on the glass. ---- */
  --cp-oled-glare: radial-gradient(140% 70% at 22% -18%, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.02) 42%, transparent 60%);
  --cp-oled-bevel: inset 0 1px 1px rgba(255, 255, 255, 0.32), inset 0 4px 5px -2px rgba(255, 255, 255, 0.12), inset 3px 0 4px -2px rgba(255, 255, 255, 0.06), inset -3px 0 4px -2px rgba(255, 255, 255, 0.04), inset 0 -2px 4px rgba(0, 0, 0, 0.55), inset 0 6px 12px rgba(0, 0, 0, 0.45);   /* The chamfered edge of the screen glass: soft light along the top and sides, shade at the bottom, depth inside. */
  --cp-oled-bevel-shadow: 0 0 0 1px rgba(0, 0, 0, 0.55), 0 1px 0 1px rgba(255, 255, 255, 0.30), 0 2px 6px rgba(20, 22, 26, 0.25);

  /* ---- p2 inputs: colour picker and signature pad ---- */
  --cp-picker-white: #FFFFFF;   /* pure white: an end of the colour area and a contrast plate */
  --cp-picker-black: #000000;   /* pure black: an end of the colour area and a contrast plate */
  --cp-font-signature: "Segoe Script", "Bradley Hand", "Brush Script MT", "Snell Roundhand", cursive;   /* hand-written face of the signature pad */
  --cp-signature-export-ink: #232426;   /* exported signatures are dark ink on transparent in both themes */

  /* ---- shell (feedback, navigation and app layout, phase 2) ---- */
  --cp-z-sticky: 900;   /* Affix, AppShell header */
  --cp-z-float: 950;   /* FloatButton, SpeedDial, BackTop, BottomNavigation */
  --cp-z-tour: 1050;   /* Tour mask and step panel, above overlays, under toasts */
  --cp-sider-width: 264px;
  --cp-float-size: 56px;
  --cp-notification-width: 384px;
  --cp-watermark-alpha: 0.12;   /* decorative only: low contrast by design */

  /* ---- Surface rule (2026-10-28): key = small and medium (keys, buttons, cards), satin = big elements (panels, chassis, section surfaces), satin edge (hero) = the one featured surface of a page. Every expression reads the theme own tokens, so Aluminium and Graphite share them. Each token is repeated in the graphite mode so the var() references resolve against the dark theme tokens. ---- */
  --cp-card-key: linear-gradient(180deg, var(--cp-key-hi) 0%, var(--cp-key) 12%, var(--cp-key) 85%, var(--cp-key-lo) 100%);   /* Softer key surface for small and medium cards (CpCard surface=key). */
  --cp-card-key-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 1px 0 var(--cp-key-side), 0 2px 4px rgba(40, 44, 50, 0.12);   /* Shadow for --cp-card-key. */
  --cp-surface-satin: linear-gradient(180deg, var(--cp-body-hi) 0%, color-mix(in srgb, var(--cp-body-hi) 55%, var(--cp-body)) 45%, var(--cp-body) 100%);   /* Satin: the surface of big elements (large panels, chassis, big section surfaces). Body text on it uses --cp-ink. */
  --cp-surface-satin-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75), inset 0 -1px 0 rgba(0, 0, 0, 0.10), 0 0 0 1px color-mix(in srgb, var(--cp-body-lo) 70%, transparent), 0 2px 3px rgba(30, 34, 40, 0.14);   /* Shadow for --cp-surface-satin. */
  --cp-surface-hero: linear-gradient(180deg, color-mix(in srgb, var(--cp-key-hi) 60%, var(--cp-body-hi)) 0%, color-mix(in srgb, var(--cp-key) 45%, var(--cp-body-hi)) 40%, color-mix(in srgb, var(--cp-key-lo) 40%, var(--cp-body)) 100%);   /* Satin edge: the one featured (hero) surface of a page. */
  --cp-surface-hero-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 1px 0 var(--cp-key-side), 0 2px 4px rgba(40, 44, 50, 0.12);   /* Shadow for --cp-surface-hero. */
}

.p-dark,
[data-theme="dark"] {
  color-scheme: dark;
  --cp-body: #2C2E31;
  --cp-body-hi: #383A3E;
  --cp-body-lo: #232427;
  --cp-body-edge: #18191B;
  --cp-page: #1C1D1F;
  --cp-groove: #18191B;
  --cp-key: #3B3D41;
  --cp-key-hi: #4B4D52;
  --cp-key-lo: #333539;
  --cp-key-pressed: #35373B;
  --cp-key-side: #222326;
  --cp-well: #232427;
  --cp-well-line: #18191B;
  --cp-ink: #EEEEEC;
  --cp-ink-muted: #ABAEB3;
  --cp-ink-faint: #6E7176;
  --cp-dot: #0E0E0F;
  --cp-blue-graphic: #1E9BE6;
  --cp-green-graphic: #2DB24A;
  --cp-orange-graphic: #F26A2E;
  --cp-red-graphic: #EA5850;
  --cp-white-graphic: #F7F7F5;
  --cp-dot-graphic: #898989;
  --cp-blue-text: #6BC0F5;
  --cp-green-text: #66D184;
  --cp-orange-text: #FF9466;
  --cp-red-text: #FF8A82;
  --cp-focus: #6BC0F5;
  --cp-key-shadow:
    inset 0 1px 0 var(--cp-key-hi),
    0 1px 0 var(--cp-key-side),
    0 2px 0 var(--cp-key-side),
    0 3px 6px rgba(0, 0, 0, 0.45);
  --cp-key-shadow-hover:
    inset 0 1px 0 var(--cp-key-hi),
    0 1px 0 var(--cp-key-side),
    0 2px 0 var(--cp-key-side),
    0 6px 14px rgba(0, 0, 0, 0.55);
  --cp-key-shadow-pressed:
    inset 0 1px 3px rgba(0, 0, 0, 0.5),
    0 1px 0 var(--cp-key-side);
  --cp-well-shadow:
    inset 0 1px 3px rgba(0, 0, 0, 0.55),
    inset 0 -1px 0 var(--cp-body-hi);
  --cp-body-shadow:
    inset 0 1px 0 var(--cp-body-hi),
    inset 0 -1px 0 var(--cp-body-edge),
    0 18px 40px -18px rgba(0, 0, 0, 0.8),
    0 2px 4px rgba(0, 0, 0, 0.4);
  --cp-knob-shadow:
    0 2px 0 var(--cp-key-side),
    0 4px 8px rgba(0, 0, 0, 0.55),
    inset 0 1px 0 #5A5C61;
  --cp-canvas-line-rgb: 150, 154, 160;
  --cp-canvas-text: #ABAEB3;
  --cp-canvas-plate-rgb: 28, 29, 31;
  --cp-scrim: color-mix(in srgb, var(--cp-page) 78%, transparent);
  --cp-overlay-shadow:
    inset 0 1px 0 var(--cp-key-hi),
    0 2px 0 var(--cp-key-side),
    0 16px 36px -10px rgba(0, 0, 0, 0.75);
  --cp-watermark-alpha: 0.16;
  --cp-card-key: linear-gradient(180deg, var(--cp-key-hi) 0%, var(--cp-key) 12%, var(--cp-key) 85%, var(--cp-key-lo) 100%);
  --cp-card-key-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 1px 0 var(--cp-key-side), 0 2px 4px rgba(40, 44, 50, 0.12);
  --cp-surface-satin: linear-gradient(180deg, var(--cp-body-hi) 0%, color-mix(in srgb, var(--cp-body-hi) 55%, var(--cp-body)) 45%, var(--cp-body) 100%);
  --cp-surface-satin-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75), inset 0 -1px 0 rgba(0, 0, 0, 0.10), 0 0 0 1px color-mix(in srgb, var(--cp-body-lo) 70%, transparent), 0 2px 3px rgba(30, 34, 40, 0.14);
  --cp-surface-hero: linear-gradient(180deg, color-mix(in srgb, var(--cp-key-hi) 60%, var(--cp-body-hi)) 0%, color-mix(in srgb, var(--cp-key) 45%, var(--cp-body-hi)) 40%, color-mix(in srgb, var(--cp-key-lo) 40%, var(--cp-body)) 100%);
  --cp-surface-hero-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 1px 0 var(--cp-key-side), 0 2px 4px rgba(40, 44, 50, 0.12);
}

/* A light island inside a dark page, and the light half of "system". */
[data-theme="light"],
[data-theme="system"] {
  color-scheme: light;
  --cp-body: #D6D8DA;
  --cp-body-hi: #E3E4E6;
  --cp-body-lo: #C6C8CB;
  --cp-body-edge: #B9BCC0;
  --cp-page: #E9EAEC;
  --cp-groove: #B5B8BC;
  --cp-key: #F4F4F2;
  --cp-key-hi: #FFFFFF;
  --cp-key-lo: #E4E4E1;
  --cp-key-pressed: #E9E9E6;
  --cp-key-side: #CDCED0;
  --cp-well: #E6E7E8;
  --cp-well-line: #C9CBCE;
  --cp-ink: #232426;
  --cp-ink-muted: #525559;
  --cp-ink-faint: #9A9DA2;
  --cp-dot: #1C1C1D;
  --cp-blue-graphic: #187EBA;
  --cp-green-graphic: #238939;
  --cp-orange-graphic: #C45625;
  --cp-red-graphic: #D84038;
  --cp-white-graphic: #777776;
  --cp-dot-graphic: #1C1C1D;
  --cp-blue-text: #095E96;
  --cp-green-text: #146A2A;
  --cp-orange-text: #A23B15;
  --cp-red-text: #A2241D;
  --cp-focus: #095E96;
  --cp-key-shadow:
    inset 0 1px 0 var(--cp-key-hi),
    0 1px 0 var(--cp-key-side),
    0 2px 0 var(--cp-key-side),
    0 3px 6px rgba(52, 56, 62, 0.16);
  --cp-key-shadow-hover:
    inset 0 1px 0 var(--cp-key-hi),
    0 1px 0 var(--cp-key-side),
    0 2px 0 var(--cp-key-side),
    0 6px 14px rgba(52, 56, 62, 0.2);
  --cp-key-shadow-pressed:
    inset 0 1px 2px rgba(52, 56, 62, 0.18),
    0 1px 0 var(--cp-key-side);
  --cp-well-shadow:
    inset 0 1px 2px rgba(52, 56, 62, 0.22),
    inset 0 -1px 0 var(--cp-key-hi);
  --cp-body-shadow:
    inset 0 1px 0 var(--cp-body-hi),
    inset 0 -1px 0 var(--cp-body-edge),
    0 18px 40px -18px rgba(40, 44, 50, 0.45),
    0 2px 4px rgba(40, 44, 50, 0.1);
  --cp-knob-shadow:
    0 2px 0 var(--cp-key-side),
    0 4px 8px rgba(40, 44, 50, 0.25),
    inset 0 1px 0 var(--cp-key-hi);
  --cp-canvas-line-rgb: 120, 124, 130;
  --cp-canvas-text: #525559;
  --cp-canvas-plate-rgb: 233, 234, 236;
  --cp-scrim: color-mix(in srgb, var(--cp-page) 78%, transparent);
  --cp-overlay-shadow:
    inset 0 1px 0 var(--cp-key-hi),
    0 2px 0 var(--cp-key-side),
    0 16px 36px -10px rgba(40, 44, 50, 0.38);
  --cp-watermark-alpha: 0.12;
  --cp-card-key: linear-gradient(180deg, var(--cp-key-hi) 0%, var(--cp-key) 12%, var(--cp-key) 85%, var(--cp-key-lo) 100%);
  --cp-card-key-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 1px 0 var(--cp-key-side), 0 2px 4px rgba(40, 44, 50, 0.12);
  --cp-surface-satin: linear-gradient(180deg, var(--cp-body-hi) 0%, color-mix(in srgb, var(--cp-body-hi) 55%, var(--cp-body)) 45%, var(--cp-body) 100%);
  --cp-surface-satin-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75), inset 0 -1px 0 rgba(0, 0, 0, 0.10), 0 0 0 1px color-mix(in srgb, var(--cp-body-lo) 70%, transparent), 0 2px 3px rgba(30, 34, 40, 0.14);
  --cp-surface-hero: linear-gradient(180deg, color-mix(in srgb, var(--cp-key-hi) 60%, var(--cp-body-hi)) 0%, color-mix(in srgb, var(--cp-key) 45%, var(--cp-body-hi)) 40%, color-mix(in srgb, var(--cp-key-lo) 40%, var(--cp-body)) 100%);
  --cp-surface-hero-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 1px 0 var(--cp-key-side), 0 2px 4px rgba(40, 44, 50, 0.12);
}

@media (prefers-color-scheme: dark) {
  [data-theme="system"] {
    color-scheme: dark;
    --cp-body: #2C2E31;
    --cp-body-hi: #383A3E;
    --cp-body-lo: #232427;
    --cp-body-edge: #18191B;
    --cp-page: #1C1D1F;
    --cp-groove: #18191B;
    --cp-key: #3B3D41;
    --cp-key-hi: #4B4D52;
    --cp-key-lo: #333539;
    --cp-key-pressed: #35373B;
    --cp-key-side: #222326;
    --cp-well: #232427;
    --cp-well-line: #18191B;
    --cp-ink: #EEEEEC;
    --cp-ink-muted: #ABAEB3;
    --cp-ink-faint: #6E7176;
    --cp-dot: #0E0E0F;
    --cp-blue-graphic: #1E9BE6;
    --cp-green-graphic: #2DB24A;
    --cp-orange-graphic: #F26A2E;
    --cp-red-graphic: #EA5850;
    --cp-white-graphic: #F7F7F5;
    --cp-dot-graphic: #898989;
    --cp-blue-text: #6BC0F5;
    --cp-green-text: #66D184;
    --cp-orange-text: #FF9466;
    --cp-red-text: #FF8A82;
    --cp-focus: #6BC0F5;
    --cp-key-shadow:
      inset 0 1px 0 var(--cp-key-hi),
      0 1px 0 var(--cp-key-side),
      0 2px 0 var(--cp-key-side),
      0 3px 6px rgba(0, 0, 0, 0.45);
    --cp-key-shadow-hover:
      inset 0 1px 0 var(--cp-key-hi),
      0 1px 0 var(--cp-key-side),
      0 2px 0 var(--cp-key-side),
      0 6px 14px rgba(0, 0, 0, 0.55);
    --cp-key-shadow-pressed:
      inset 0 1px 3px rgba(0, 0, 0, 0.5),
      0 1px 0 var(--cp-key-side);
    --cp-well-shadow:
      inset 0 1px 3px rgba(0, 0, 0, 0.55),
      inset 0 -1px 0 var(--cp-body-hi);
    --cp-body-shadow:
      inset 0 1px 0 var(--cp-body-hi),
      inset 0 -1px 0 var(--cp-body-edge),
      0 18px 40px -18px rgba(0, 0, 0, 0.8),
      0 2px 4px rgba(0, 0, 0, 0.4);
    --cp-knob-shadow:
      0 2px 0 var(--cp-key-side),
      0 4px 8px rgba(0, 0, 0, 0.55),
      inset 0 1px 0 #5A5C61;
    --cp-canvas-line-rgb: 150, 154, 160;
    --cp-canvas-text: #ABAEB3;
    --cp-canvas-plate-rgb: 28, 29, 31;
    --cp-scrim: color-mix(in srgb, var(--cp-page) 78%, transparent);
    --cp-overlay-shadow:
      inset 0 1px 0 var(--cp-key-hi),
      0 2px 0 var(--cp-key-side),
      0 16px 36px -10px rgba(0, 0, 0, 0.75);
    --cp-watermark-alpha: 0.16;
    --cp-card-key: linear-gradient(180deg, var(--cp-key-hi) 0%, var(--cp-key) 12%, var(--cp-key) 85%, var(--cp-key-lo) 100%);
    --cp-card-key-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 1px 0 var(--cp-key-side), 0 2px 4px rgba(40, 44, 50, 0.12);
    --cp-surface-satin: linear-gradient(180deg, var(--cp-body-hi) 0%, color-mix(in srgb, var(--cp-body-hi) 55%, var(--cp-body)) 45%, var(--cp-body) 100%);
    --cp-surface-satin-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75), inset 0 -1px 0 rgba(0, 0, 0, 0.10), 0 0 0 1px color-mix(in srgb, var(--cp-body-lo) 70%, transparent), 0 2px 3px rgba(30, 34, 40, 0.14);
    --cp-surface-hero: linear-gradient(180deg, color-mix(in srgb, var(--cp-key-hi) 60%, var(--cp-body-hi)) 0%, color-mix(in srgb, var(--cp-key) 45%, var(--cp-body-hi)) 40%, color-mix(in srgb, var(--cp-key-lo) 40%, var(--cp-body)) 100%);
    --cp-surface-hero-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 1px 0 var(--cp-key-side), 0 2px 4px rgba(40, 44, 50, 0.12);
  }
}

/* Density. Compact keeps every pointer target at 24 px or more (2.5.8) and controls at 32 px or more. */
[data-density="compact"] {
  --cp-target: 32px;
  --cp-control: 36px;
  --cp-control-pad: 16px;
}

[data-density="comfortable"] {
  --cp-target: 44px;
  --cp-control: 48px;
  --cp-control-pad: 24px;
}

@media (max-width: 599px) {
  :root {
    --cp-text-h2: 22px;
    --cp-text-h1: 30px;
    --cp-text-display: 34px;
    --cp-unit: 52px;
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: 0ms !important;
    animation-duration: 0ms !important;
    animation-iteration-count: 1 !important;
  }
}