/* Generated by tools/sync-brand.mjs. Do not edit: change brand/tokens/tokens.css or the site defaults. */

/* Site defaults: spec section 9.2 and Plan 4's motion tokens. */
:root {
  --pli-night: #0A0C10;
  --pli-slate: #161A22;
  --pli-ice: #EEF2F6;
  --pli-mist: #8A94A3;
  --pli-glacier: #7CCBFF;
  --pli-deep-glacier: #0B6FB0;
  --pli-iridescent-1: #A6F0FF;
  --pli-iridescent-2: #C8B8FF;
  --pli-iridescent-3: #FFD3B0;
  --pli-white: #FFFFFF;
  --pli-paper: #F5F5F7;
  --pli-ink: #1D1D1F;
  --pli-graphite: #6E6E73;
  --pli-hairline: #D2D2D7;
  --pli-ease-fold: cubic-bezier(0.65, 0, 0.35, 1);
  --pli-ease-reveal: cubic-bezier(0.33, 1, 0.68, 1);
}

/* From brand/tokens/tokens.css: */
/* Pli brand tokens, direction A "Glass".
 * Generated from brand/tokens/tokens.json by brand/scripts/tokens/build.mjs:
 * edit the JSON and run the script, never this file.
 */

:root {
  /* Core palette */
  --pli-night: #0A0C10; /* Dark backgrounds, the black of the fold */
  --pli-slate: #161A22; /* Dark surfaces */
  --pli-ice: #EEF2F6; /* Light surfaces, text on dark */
  --pli-mist: #8A94A3; /* Secondary text on dark */
  --pli-glacier: #7CCBFF; /* The single accent in dark appearance */
  --pli-deep-glacier: #0B6FB0; /* The accent in light appearance: links and buttons */

  /* Light palette */
  --pli-white: #FFFFFF; /* Page background */
  --pli-paper: #F5F5F7; /* Alternating sections, cards */
  --pli-ink: #1D1D1F; /* Primary text */
  --pli-graphite: #6E6E73; /* Secondary text */
  --pli-hairline: #D2D2D7; /* Separators, outlines; never text */

  /* Iridescent gradient: icon rim, website hero and key moments only, never for text; the stops run left to right */
  --pli-iridescent-1: #A6F0FF;
  --pli-iridescent-2: #C8B8FF;
  --pli-iridescent-3: #FFD3B0;
  --pli-iridescent: linear-gradient(90deg, var(--pli-iridescent-1) 0%, var(--pli-iridescent-2) 50%, var(--pli-iridescent-3) 100%);

  /* Type: SF Pro through the system stack, never shipped; Inter as the fallback.
     --pli-<style> is a font shorthand (weight size/line family); set letter-spacing
     with --pli-<style>-tracking. */
  --pli-font-sans: -apple-system, BlinkMacSystemFont, system-ui, "Inter", sans-serif;
  --pli-weight-regular: 400;
  --pli-weight-medium: 500;
  --pli-weight-semibold: 600;
  --pli-weight-bold: 700;
  --pli-display-1-size: 64px;
  --pli-display-1-line: 68px;
  --pli-display-1-weight: 600;
  --pli-display-1-tracking: -0.009em;
  --pli-display-1: 600 64px/68px var(--pli-font-sans);
  --pli-display-2-size: 56px;
  --pli-display-2-line: 60px;
  --pli-display-2-weight: 600;
  --pli-display-2-tracking: -0.005em;
  --pli-display-2: 600 56px/60px var(--pli-font-sans);
  --pli-display-3-size: 48px;
  --pli-display-3-line: 52px;
  --pli-display-3-weight: 600;
  --pli-display-3-tracking: -0.003em;
  --pli-display-3: 600 48px/52px var(--pli-font-sans);
  --pli-title-1-size: 32px;
  --pli-title-1-line: 36px;
  --pli-title-1-weight: 600;
  --pli-title-1-tracking: 0.004em;
  --pli-title-1: 600 32px/36px var(--pli-font-sans);
  --pli-title-2-size: 28px;
  --pli-title-2-line: 32px;
  --pli-title-2-weight: 600;
  --pli-title-2-tracking: 0.007em;
  --pli-title-2: 600 28px/32px var(--pli-font-sans);
  --pli-title-3-size: 22px;
  --pli-title-3-line: 28px;
  --pli-title-3-weight: 600;
  --pli-title-3-tracking: 0.01em;
  --pli-title-3: 600 22px/28px var(--pli-font-sans);
  --pli-body-1-size: 17px;
  --pli-body-1-line: 25px;
  --pli-body-1-weight: 400;
  --pli-body-1-tracking: -0.022em;
  --pli-body-1: 400 17px/25px var(--pli-font-sans);
  --pli-body-2-size: 15px;
  --pli-body-2-line: 22px;
  --pli-body-2-weight: 400;
  --pli-body-2-tracking: -0.018em;
  --pli-body-2: 400 15px/22px var(--pli-font-sans);
  --pli-caption-size: 13px;
  --pli-caption-line: 18px;
  --pli-caption-weight: 400;
  --pli-caption-tracking: -0.012em;
  --pli-caption: 400 13px/18px var(--pli-font-sans);

  /* Radii */
  --pli-radius-s: 8px; /* Buttons, small controls */
  --pli-radius-m: 12px; /* Inputs, thumbnails */
  --pli-radius-l: 20px; /* Cards, previews */
  --pli-radius-xl: 28px; /* Large panels, hero frames */

  /* Spacing: 4-point scale, the key is the multiple of 4 */
  --pli-space-1: 4px;
  --pli-space-2: 8px;
  --pli-space-3: 12px;
  --pli-space-4: 16px;
  --pli-space-5: 20px;
  --pli-space-6: 24px;
  --pli-space-8: 32px;
  --pli-space-10: 40px;
  --pli-space-12: 48px;
  --pli-space-16: 64px;
  --pli-space-20: 80px;
  --pli-space-24: 96px;
  --pli-space-32: 128px;

  /* Motion: the fold is the signature */
  --pli-ease-fold: cubic-bezier(0.65, 0, 0.35, 1); /* The fold: ease in and out (easeInOutCubic) */
  --pli-ease-reveal: cubic-bezier(0.33, 1, 0.68, 1); /* The reveal, the unfold: ease out (easeOutCubic) */
  --pli-duration-fold: 0.8s; /* A timed fold (demo fold, animated lock) */
  --pli-duration-reveal: 0.9s; /* A timed reveal (unlock reveal) */

  /* Roles, light appearance (the default) */
  --pli-background: var(--pli-white);
  --pli-surface: var(--pli-paper);
  --pli-text: var(--pli-ink);
  --pli-text-secondary: var(--pli-graphite);
  --pli-separator: var(--pli-hairline);
  --pli-accent: var(--pli-deep-glacier);
}

/* Roles, dark appearance: opt in with data-pli-theme="dark" on any element. */
[data-pli-theme="dark"] {
  --pli-background: var(--pli-night);
  --pli-surface: var(--pli-slate);
  --pli-text: var(--pli-ice);
  --pli-text-secondary: var(--pli-mist);
  --pli-separator: #EEF2F624; /* Ice at 14% opacity: quiet, and visible on Night and on Slate */
  --pli-accent: var(--pli-glacier);
}