/* Global design tokens. Values preserve the current Logo page exactly.
   Prefer these variables in all new pages. See DESIGN-TOKENS.md. */
:root {
  /* Overlapping color cards, from the supplied interaction reference. */
  --palette-card-radius: 24px;
  --palette-overlap: 48px;
  /* Color Tokens */
  --color-brand-primary: #006aff;
  --color-brand-secondary: #00dcff;
  --color-page: #fafafa;
  --color-surface: #fff;
  --color-surface-subtle: #f0f2f5;
  --color-text-primary: #1c2633;
  --color-text-heading: #000;
  --color-text-secondary: #657080;
  --color-text-inverse: #fff;
  --color-border-subtle: #e5e6eb;
  --color-border-default: #d9dce1;
  --color-action-hover: #0055d4;
  --color-status-error: #df384b; /* Red badge from the supplied incorrect-usage reference. */
  --color-preview-dark: var(--color-text-primary);
  --color-preview-brand: var(--color-brand-primary);
  --color-nav-surface: rgba(255,255,255,.4);
  --color-nav-mobile-surface: rgba(255,255,255,.94);

  /* Typography Tokens — font-face descriptors remain literal. */
  --font-family-base: Byte,Lanting,sans-serif;
  --font-family-latin: Byte,sans-serif;
  --font-family-chinese: Lanting,sans-serif;
  --font-size-12: 12px;
  --font-size-13: 13px;
  --font-size-14: 14px;
  --font-size-15: 15px;
  --font-size-16: 16px;
  --font-size-18: 18px;
  --font-size-20: 20px;
  --font-size-22: 22px;
  --font-size-28: 28px;
  --font-size-37: 37px;
  --font-size-48: 48px;
  --font-size-64: 64px;
  --font-size-85: 85px;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --line-height-display: 1.04;
  --line-height-heading: 1.3;
  --line-height-copy: 1.6;
  --line-height-base: 1.65;
  --letter-spacing-heading: .01em;
  --font-size-page-title: var(--font-size-85);
  --font-size-section-title: var(--font-size-37);
  --font-size-group-title: var(--font-size-20);
  --font-size-intro: var(--font-size-20);
  --font-size-body: var(--font-size-16);
  --font-size-caption: var(--font-size-14);

  /* Spacing Tokens */
  --space-4: 4px;
  --space-8: 8px;
  --space-12: 12px;
  --space-16: 16px;
  --space-24: 24px;
  --space-32: 32px;
  --space-48: 48px;
  --space-64: 64px;
  --space-96: 96px;
  --space-120: 120px;
  --space-160: 160px;
  --space-section: var(--space-120);
  --space-content: var(--space-96);
  --space-grid: var(--space-24);
  /* Existing component-specific dimensions; not additions to the spacing scale. */
  --nav-padding-x: 20px;
  --nav-item-padding-y: 6px;
  --nav-brand-padding: 19px;
  --nav-brand-padding-base: 18px;
  --nav-brand-padding-collapsed: 17px;
  --nav-toggle-offset: 14px;
  --nav-mobile-top: 12px;
  --nav-mobile-menu-top: 83px;
  --layout-page-top-mobile: 126px;
  --layout-page-bottom-mobile: 80px;
  --space-intro-bottom-narrow: 100px;

  /* Radius Tokens */
  --radius-icon: 1px;
  --radius-control: 3px;
  --radius-default: 4px;
  --radius-nav-compact: 5px;

  /* Shadow Tokens */
  --shadow-download: 0 1px 3px #0002;
  --shadow-nav-active: inset 2px 0 var(--color-brand-primary);

  /* Layout Tokens */
  --layout-content-max: 900px;
  --layout-copy-max: 760px;
  --layout-content-width: 90%;
  --layout-content-width-mobile: 88%;
  --layout-intro-width: 70%;
  --layout-intro-width-medium: 85%;
  --layout-nav-width: 290px;
  --layout-nav-collapsed: 65px;
  --layout-main-offset: calc(var(--layout-nav-width) + var(--space-48));
  --layout-main-offset-compact: calc(var(--layout-nav-width) + 44px);
  --layout-main-offset-collapsed: 113px;
  --layout-divider-extension: 24px;
  --layout-divider-extension-compact: 20px;
  --layout-mobile-gutter: 4%;
  --layout-mobile-bar-height: 60px;
  --layout-scroll-offset: 40px;
  --layout-scroll-offset-mobile: 95px;
  --layout-brand-width: 118px;
  --layout-brand-height: 25px;
  --layout-symbol-width: 30px;
  --layout-logo-width: 60%;
  --layout-logo-max: 540px;
  --layout-preview-ratio: 9/4;
  --layout-media-ratio: 16/9;
  --layout-grid-columns: 1fr 1fr;
  --size-control: 40px;
  --size-control-small: 32px;
  --size-icon: 24px;
  --size-panel-icon-width: 20px;
  --size-panel-icon-height: 16px;
  --border-width: 1px;
  --border-width-icon: 1.5px;
  --focus-width: 2px;
  --focus-offset: 5px;
  --blur-nav: 2.5px;
  --motion-fast: .2s;
  --motion-layout: .3s;
  --motion-easing: ease;
}

/* Match existing breakpoints; CSS variables cannot replace media query bounds. */
@media(max-width:1100px) {
  :root { --font-size-page-title: var(--font-size-64); --space-content: var(--space-64); }
}
@media(max-width:760px) {
  :root {
    --font-size-page-title: var(--font-size-48);
    --font-size-section-title: var(--font-size-28);
    --font-size-group-title: var(--font-size-18);
    --font-size-intro: var(--font-size-18);
    --font-size-body: var(--font-size-14);
    --space-section: var(--space-64);
    --space-content: var(--space-32);
  }
}

/* Brand palette supplied by the user: A-4.1 / A-4.2. */
:root {
  --color-palette-purple: #7861ff;
  --color-palette-stone: #4b4b4b;
  --color-palette-volcano-1: #000d40;
  --color-palette-volcano-2: #001d66;
  --color-palette-volcano-3: #002c8c;
  --color-palette-volcano-4: #003fb3;
  --color-palette-volcano-5: #0053d9;
  --color-palette-volcano-6: #2680ff;
  --color-palette-volcano-7: #66a6ff;
  --color-palette-volcano-8: #8cbcff;
  --color-palette-volcano-9: #b3d3ff;
  --color-palette-volcano-10: #d9e9ff;
  --color-palette-energy-1: #023740;
  --color-palette-energy-2: #005866;
  --color-palette-energy-3: #00798c;
  --color-palette-energy-4: #019ab3;
  --color-palette-energy-5: #02bbd9;
  --color-palette-energy-6: #31e3ff;
  --color-palette-energy-7: #66eaff;
  --color-palette-energy-8: #99f1ff;
  --color-palette-energy-9: #ccf8ff;
  --color-palette-energy-10: #e1fbff;
  --color-palette-purple-1: #9381ff;
  --color-palette-purple-2: #af9fff;
  --color-palette-purple-3: #c9c0ff;
  --color-palette-purple-4: #e4dfff;
  --color-palette-ink-1: #48515c;
  --color-palette-ink-2: #777d85;
  --color-palette-ink-3: #a4a8ae;
  --color-palette-ink-4: #cbd0d5;
  --color-palette-stone-1: #6d6d6d;
  --color-palette-stone-2: #8e8e8e;
  --color-palette-stone-3: #afafaf;
  --color-palette-stone-4: #d1d1d1;
}