lion-make 0.1.0

package/guidelines/foundations/overview.md

@@ -0,0 +1,26 @@
+# Foundations Overview
+
+The foundation layer defines the design tokens — the raw values that all components and content types are built from. Always use CSS custom properties (variables) from these token files; never hardcode colors, sizes, or font values.
+
+## Token Files
+
+| File | What it covers |
+|---|---|
+| [color.md](./color.md) | Full color palette, semantic mappings, opaque variants, gradient |
+| [typography.md](./typography.md) | Font family, weights, base sizes, H1-H6 scale, line-heights |
+| [spacing.md](./spacing.md) | Grid gutter, edge padding, padding sizes, border-radius, border-width |
+| [breakpoints.md](./breakpoints.md) | 5 breakpoint tiers, max-width container, custom media queries |
+| [z-index.md](./z-index.md) | 9 z-index levels for layering |
+
+## Usage Rule
+
+All values are exposed as CSS custom properties. Reference them in component styles:
+
+```css
+color: var(--color-text);
+font-size: var(--font-size-base);
+padding: var(--padding-base-vertical) var(--padding-base-horizontal);
+border-radius: var(--border-radius-base);
+```
+
+Never reach past the token layer to hardcoded values. If a token doesn't exist for what you need, that is a signal to add a new token — not to hardcode.

package/guidelines/foundations/spacing.md

@@ -0,0 +1,50 @@
+# Spacing
+
+Source: `src/tokens/metrics.css`
+
+## Grid
+
+| Token | Value | Use |
+|---|---|---|
+| `--Grid-gutter-size` | `1.6rem` | Gap between grid columns |
+| `--padding-edge` | `3.2rem` | Outer edge padding of page |
+
+## Padding Sizes
+
+Three sizes, each with vertical and horizontal variants:
+
+| Size | Vertical | Horizontal |
+|---|---|---|
+| Small | `--padding-small-vertical` (0.5rem) | `--padding-small-horizontal` (1rem) |
+| Base | `--padding-base-vertical` (1.2rem) | `--padding-base-horizontal` (2rem) |
+| Large | `--padding-large-vertical` (1.4rem) | `--padding-large-horizontal` (1.6rem) |
+
+Use `base` as the default for interactive elements (buttons, inputs). Use `small` for compact UI elements (badges, tags). Use `large` for prominent call-to-action buttons.
+
+## Border Radius
+
+| Token | Value | Use |
+|---|---|---|
+| `--border-radius-base` | `8px` | Default (buttons, cards, containers) |
+| `--border-radius-small` | `6px` | Compact elements (tags, badges) |
+
+## Border Width
+
+| Token | Value | Use |
+|---|---|---|
+| `--border-width-thin` | `1px` | Subtle dividers |
+| `--border-width-base` | `2px` | Default borders |
+| `--border-width-thick` | `3px` | Emphasis borders, focus rings |
+
+## Caret Sizes
+
+| Token | Value |
+|---|---|
+| `--caret-width-base` | `4px` |
+| `--caret-width-large` | `5px` |
+
+## List Nesting
+
+```css
+margin-left: var(--list-nested-margin); /* 20px */
+```

package/guidelines/foundations/typography.md

@@ -0,0 +1,67 @@
+# Typography
+
+Source: `src/tokens/typography.css`
+
+## Font Family
+
+```css
+font-family: var(--font-family-sans-serif); /* "Source Sans Pro", sans-serif */
+```
+
+Load via Google Fonts:
+
+```html
+<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,600,700" rel="stylesheet" />
+```
+
+## Font Weights
+
+| Token | Value | Use |
+|---|---|---|
+| `--font-weight-300` | 300 | Light text |
+| `--font-weight-400` | 400 | Body text |
+| `--font-weight-600` | 600 | Emphasis, labels |
+| `--font-weight-700` | 700 | Headings |
+
+## Base Sizes
+
+The root font-size is set to 62.5% so that `1rem = 10px`. All sizes are in `rem`.
+
+| Token | Value | Notes |
+|---|---|---|
+| `--font-size-percentage` | `62.5%` | Root size trick — do not override |
+| `--font-size-base` | `1.6rem` | Default body (16px) |
+| `--font-size-md-base` | `1.8rem` | Body at `--md-viewport` and above (18px) |
+| `--line-height-base` | `2.4rem` | Default line-height |
+| `--line-height-md-base` | `2.8rem` | Line-height at `--md-viewport` and above |
+
+## Heading Scale
+
+### Desktop (default)
+
+| Element | Font size token | Line-height token |
+|---|---|---|
+| H1 | `--h1-font-size` (3.2rem) | `--h1-line-height` (4rem) |
+| H2 | `--h2-font-size` (2.4rem) | `--h2-line-height` (3.2rem) |
+| H3 | `--h3-font-size` (2rem) | `--h3-line-height` (2.8rem) |
+| H4 | `--h4-font-size` (1.6rem) | `--h4-line-height` (2rem) |
+| H5 | `--h5-font-size` (1.4rem) | `--h5-line-height` (2rem) |
+| H6 | `--h6-font-size` (1.4rem) | `--h6-line-height` (2rem) |
+
+### Medium viewport and above (`--md-viewport`, 767px+)
+
+| Element | Font size token | Line-height token |
+|---|---|---|
+| H1 | `--h1-md-font-size` (4rem) | `--h1-md-line-height` (4.8rem) |
+| H2 | `--h2-md-font-size` (3.2rem) | `--h2-md-line-height` (4rem) |
+| H3 | `--h3-md-font-size` (2.4rem) | `--h3-md-line-height` (3.2rem) |
+| H4 | `--h4-md-font-size` (2rem) | `--h4-md-line-height` (2.4rem) |
+| H5 | `--h5-md-font-size` (1.6rem) | `--h5-md-line-height` (2.4rem) |
+| H6 | `--h6-md-font-size` (1.4rem) | `--h6-md-line-height` (2rem) |
+
+## Text Direction
+
+```css
+direction: var(--text-direction); /* ltr */
+font-style: var(--font-style);    /* normal */
+```

package/guidelines/foundations/z-index.md

@@ -0,0 +1,24 @@
+# Z-Index
+
+Source: `src/tokens/z-index.css`
+
+## Levels
+
+| Token | Value | Use |
+|---|---|---|
+| `--z-index-below` | `-10` | Elements intentionally below the stacking context |
+| `--z-index-zero` | `0` | Default (no stacking) |
+| `--z-index-baseline` | `1` | Basic elevation above default |
+| `--z-index-footer` | `2` | Footer zone |
+| `--z-index-menus` | `3` | Navigation menus (closed) |
+| `--z-index-open-menus` | `4` | Navigation menus (open) |
+| `--z-index-tool-tips` | `4` | Tooltips — same level as open menus |
+| `--z-index-overlays-and-headers` | `5` | Sticky headers, modal overlays |
+| `--z-index-goku` | `9001` | Maximum — reserved for critical overlays (e.g., cookie banners) |
+
+## Rules
+
+- Use the named tokens; never hardcode z-index integers.
+- Tool-tips share the same level as open menus (`var(--z-index-open-menus)`) — this is intentional.
+- `--z-index-goku` (9001) is a last-resort override. Do not use it for standard components.
+- Sticky headers and modal overlays share `--z-index-overlays-and-headers` (5). If a modal needs to appear above a sticky header, add 1 to the token value contextually.

package/guidelines/icon-discovery.md

@@ -0,0 +1,14 @@
+# Icon Discovery
+
+Icon system documentation is a stub — to be completed when an icon library is added to lion-make.
+
+## Planned Coverage
+
+- Icon naming conventions
+- Available icon names and their usage
+- Size tokens for icons
+- How to import and use icons in components
+
+## Current State
+
+No icon library is bundled in this version of lion-make. Use inline SVGs or a separate icon package until this section is complete.

package/guidelines/setup.md

@@ -0,0 +1,103 @@
+# Setup
+
+## Install the Package
+
+```bash
+npm install lion-make
+```
+
+## Import Design Tokens
+
+Import all CSS token files in your global stylesheet or entry point. Order matters — import all of them.
+
+```css
+@import 'lion-make/tokens/colors.css';
+@import 'lion-make/tokens/typography.css';
+@import 'lion-make/tokens/metrics.css';
+@import 'lion-make/tokens/breakpoints.css';
+@import 'lion-make/tokens/z-index.css';
+@import 'lion-make/tokens/mixins.css';
+@import 'lion-make/tokens/make-utilities.css';
+```
+
+## Load the Font
+
+Add this to the `<head>` of your HTML. Source Sans Pro is the required system font.
+
+```html
+<link
+  href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,600,700"
+  rel="stylesheet"
+/>
+```
+
+Or in CSS:
+
+```css
+@import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,600,700');
+```
+
+## Import Components
+
+Components are organized by zone. Import only what you need.
+
+```tsx
+// Layout primitives (not content types)
+import { PageForehead, PageSideburn, Section, Container, Anklet } from 'lion-make'
+
+// Header zone components
+import { CorporateUniversalHeader, GlobalHeaderBar } from 'lion-make'
+
+// Hero zone components
+import { Hero } from 'lion-make'
+
+// General zone components (Primary Column, Sideburn, Outro)
+import { CTA, CallOut, RTBs, ConfidenceTags, LeadForm, RichText } from 'lion-make'
+
+// Footer zone components
+import { Disclaimer, Disclosure, ComplianceBlock } from 'lion-make'
+```
+
+## Minimal Page Example
+
+```tsx
+import { PageForehead, Section, Container, GlobalHeaderBar, Hero, CTA, Disclaimer, Anklet } from 'lion-make'
+
+export function Page() {
+  return (
+    <PageForehead>
+      <Section zone="header">
+        <GlobalHeaderBar logoSrc="/logo.svg" logoAlt="Company" />
+      </Section>
+
+      <Section zone="hero">
+        <Hero variant="full-bleed" heading="Protect what matters" ctaLabel="Get a quote" ctaHref="/quote" />
+      </Section>
+
+      <Section zone="primary-column">
+        <Container type="single">
+          <CTA type="button" label="Start for $0.99" href="/start" variant="primary" />
+        </Container>
+      </Section>
+
+      <Anklet links={[{ label: 'About', href: '/about' }, { label: 'Contact', href: '/contact' }]} />
+
+      <Section zone="footer">
+        <Disclaimer text="Products underwritten by Mutual of Omaha Insurance Company." itemNumber="ICC20-TERM" />
+      </Section>
+    </PageForehead>
+  )
+}
+```
+
+## Zone Rule Reminder
+
+You must only place content types in their designated zone. See [composition/zones.md](./composition/zones.md) for the full placement table. Placing a Hero component in the footer zone, or a Disclaimer in the hero zone, is invalid.
+
+## Peer Dependencies
+
+This package requires React 18. Install it if not already present:
+
+```bash
+npm install react@^18 react-dom@^18
+```

package/package.json

@@ -0,0 +1,53 @@
+{
+  "name": "lion-make",
+  "version": "0.1.0",
+  "description": "Mondrian-based design system for Figma Make — zone-locked layout system with CSS design tokens and React component stubs.",
+  "type": "module",
+  "main": "./dist/lion-make.umd.cjs",
+  "module": "./dist/lion-make.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/lion-make.js",
+      "require": "./dist/lion-make.umd.cjs",
+      "types": "./dist/index.d.ts"
+    },
+    "./tokens/colors.css": "./src/tokens/colors.css",
+    "./tokens/typography.css": "./src/tokens/typography.css",
+    "./tokens/metrics.css": "./src/tokens/metrics.css",
+    "./tokens/breakpoints.css": "./src/tokens/breakpoints.css",
+    "./tokens/z-index.css": "./src/tokens/z-index.css",
+    "./tokens/mixins.css": "./src/tokens/mixins.css",
+    "./tokens/make-utilities.css": "./src/tokens/make-utilities.css"
+  },
+  "files": [
+    "dist",
+    "src/tokens",
+    "guidelines"
+  ],
+  "scripts": {
+    "build": "vite build && tsc --emitDeclarationOnly --declaration --outDir dist",
+    "dev": "vite build --watch",
+    "typecheck": "tsc --noEmit"
+  },
+  "peerDependencies": {
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.3.0",
+    "@types/react-dom": "^18.3.0",
+    "@vitejs/plugin-react": "^4.3.0",
+    "typescript": "^5.5.0",
+    "vite": "^5.4.0",
+    "vite-plugin-dts": "^4.0.0"
+  },
+  "keywords": [
+    "design-system",
+    "figma-make",
+    "mondrian",
+    "react",
+    "lion-make"
+  ],
+  "license": "MIT"
+}

package/src/tokens/breakpoints.css

@@ -0,0 +1,21 @@
+/**
+ * Breakpoints
+ */
+
+:root {
+    --bp-xs: 432px;
+    --bp-sm: 535px;
+    --bp-md: 767px;
+    --bp-lg: 981px;
+    --bp-xl: 1301px;
+    --max-width: 1600px;
+}
+
+@custom-media --sm-viewport     (min-width:535px);
+@custom-media --max-sm-viewport (max-width:534px);
+@custom-media --md-viewport     (min-width:767px);
+@custom-media --max-md-viewport (max-width:766px);
+@custom-media --lg-viewport     (min-width:981px);
+@custom-media --max-lg-viewport (max-width:980px);
+@custom-media --xl-viewport     (min-width:1301px);
+@custom-media --max-xl-viewport (max-width:1300px);

package/src/tokens/colors.css

@@ -0,0 +1,81 @@
+:root {
+    /**
+     * Base Colors
+     */
+
+    /* White */
+    --color-white: #fff;
+
+    /* Gray */
+    --color-gray-darkest: #222;
+    --color-gray-darker: #444;
+    --color-gray-dark: #5d5d5d;
+    --color-gray: #838383;
+    --color-gray-light: #bababa;
+    --color-gray-lighter: #e5e5e5;
+    --color-gray-lightest: #f7f7f7;
+
+    /* Blue */
+    --color-blue-dark: #003a70;
+    --color-blue: #105fa8;
+    --color-blue-shade: rgb(16, 94, 166);
+
+    /* Teal */
+    --color-teal-dark: #03746e;
+    --color-teal: #03a0ad;
+
+    /* Green */
+    --color-green: #19a38a;
+    --color-green-light: #d2e6ca;
+
+    /* Yellow */
+    --color-yellow: #ac9633;
+    --color-yellow-light: #fbea8e;
+
+    /* Red */
+    --color-red: #c12506;
+    --color-red-light: #fdf4f2;
+
+    /* Orange */
+    --color-orange: #df6903;
+
+    /* PYK Supporting Palette */
+    --color-sand: #fffbf2;
+    --color-gold: #f5b93c;
+
+    /**
+     * Mappings
+     */
+
+    /* Brand Colors */
+    --color-brand: var(--color-blue);
+    --color-brand-primary: var(--color-blue);
+    --color-brand-success: var(--color-green);
+    --color-brand-warning: var(--color-yellow);
+    --color-brand-danger: var(--color-red);
+
+    /* Text Colors */
+    --color-text: var(--color-gray-darker);
+    --color-link: var(--color-blue);
+    --color-link-hover: var(--color-blue-dark);
+
+    /* Line Colors */
+    --color-line: var(--color-gray-light);
+
+    /* Opaque Colors */
+    --color-gray-darker-opaque: rgba(68, 68, 68, 0.8);
+    --color-teal-opaque: rgba(3, 160, 173, 0.08);
+    --color-white-opaque-focus: rgba(255, 255, 255, 0.2);
+    --color-white-opaque-active: rgba(255, 255, 255, 0.35);
+
+    /* Tinted Colors */
+    --color-gray-lighter-tint: rgb(233, 233, 233);
+    --color-teal-tint: rgb(235, 247, 248);
+
+    /* Gradients */
+    --gradient-blue-to-teal: linear-gradient(to right, var(--color-blue-shade) 0%, var(--color-teal) 100%) var(--color-teal);
+}
+
+@define-mixin --gradient-blue-to-teal {
+    background: var(--gradient-blue-to-teal);
+}

package/src/tokens/make-utilities.css

@@ -0,0 +1,129 @@
+/* These mixins are used by utility packages to generate utility classes */
+
+@define-mixin make-utilities {
+    .u- {
+        @mixin-content;
+    }
+}
+
+@define-mixin make-utilities--breakpoints {
+    @mixin make-utilities {
+        @mixin-content;
+
+        @media (--sm-viewport) {
+            &sm- {
+                @mixin-content;
+            }
+        }
+
+        @media (--md-viewport) {
+            &md- {
+                @mixin-content;
+            }
+        }
+
+        @media (--lg-viewport) {
+            &lg- {
+                @mixin-content;
+            }
+        }
+
+        @media (--xl-viewport) {
+            &xl- {
+                @mixin-content;
+            }
+        }
+    }
+}
+
+@define-mixin make-utilities--n-of-n $name {
+    @mixin make-utility--n-of-n $name, 1, 2;
+    @mixin make-utility--n-of-n $name, 1, 3;
+    @mixin make-utility--n-of-n $name, 1, 4;
+    @mixin make-utility--n-of-n $name, 1, 5;
+    @mixin make-utility--n-of-n $name, 1, 6;
+    @mixin make-utility--n-of-n $name, 1, 8;
+    @mixin make-utility--n-of-n $name, 1, 10;
+    @mixin make-utility--n-of-n $name, 1, 12;
+    @mixin make-utility--n-of-n $name, 2, 3;
+    @mixin make-utility--n-of-n $name, 2, 4;
+    @mixin make-utility--n-of-n $name, 2, 5;
+    @mixin make-utility--n-of-n $name, 2, 6;
+    @mixin make-utility--n-of-n $name, 2, 8;
+    @mixin make-utility--n-of-n $name, 2, 10;
+    @mixin make-utility--n-of-n $name, 2, 12;
+    @mixin make-utility--n-of-n $name, 3, 4;
+    @mixin make-utility--n-of-n $name, 3, 5;
+    @mixin make-utility--n-of-n $name, 3, 6;
+    @mixin make-utility--n-of-n $name, 3, 8;
+    @mixin make-utility--n-of-n $name, 3, 10;
+    @mixin make-utility--n-of-n $name, 3, 12;
+    @mixin make-utility--n-of-n $name, 4, 5;
+    @mixin make-utility--n-of-n $name, 4, 6;
+    @mixin make-utility--n-of-n $name, 4, 8;
+    @mixin make-utility--n-of-n $name, 4, 10;
+    @mixin make-utility--n-of-n $name, 4, 12;
+    @mixin make-utility--n-of-n $name, 5, 6;
+    @mixin make-utility--n-of-n $name, 5, 8;
+    @mixin make-utility--n-of-n $name, 5, 10;
+    @mixin make-utility--n-of-n $name, 5, 12;
+    @mixin make-utility--n-of-n $name, 6, 8;
+    @mixin make-utility--n-of-n $name, 6, 10;
+    @mixin make-utility--n-of-n $name, 6, 12;
+    @mixin make-utility--n-of-n $name, 7, 8;
+    @mixin make-utility--n-of-n $name, 7, 10;
+    @mixin make-utility--n-of-n $name, 7, 12;
+    @mixin make-utility--n-of-n $name, 8, 10;
+    @mixin make-utility--n-of-n $name, 8, 12;
+    @mixin make-utility--n-of-n $name, 9, 10;
+    @mixin make-utility--n-of-n $name, 9, 12;
+    @mixin make-utility--n-of-n $name, 10, 12;
+    @mixin make-utility--n-of-n $name, 11, 12;
+}
+
+@define-mixin make-utilities--n-25 $name {
+    @mixin make-utility--n $name, 0;
+    @mixin make-utility--n $name, 1;
+    @mixin make-utility--n $name, 2;
+    @mixin make-utility--n $name, 3;
+    @mixin make-utility--n $name, 4;
+    @mixin make-utility--n $name, 5;
+    @mixin make-utility--n $name, 6;
+    @mixin make-utility--n $name, 7;
+    @mixin make-utility--n $name, 8;
+    @mixin make-utility--n $name, 9;
+    @mixin make-utility--n $name, 10;
+    @mixin make-utility--n $name, 11;
+    @mixin make-utility--n $name, 12;
+    @mixin make-utility--n $name, 13;
+    @mixin make-utility--n $name, 14;
+    @mixin make-utility--n $name, 15;
+    @mixin make-utility--n $name, 16;
+    @mixin make-utility--n $name, 17;
+    @mixin make-utility--n $name, 18;
+    @mixin make-utility--n $name, 19;
+    @mixin make-utility--n $name, 20;
+    @mixin make-utility--n $name, 21;
+    @mixin make-utility--n $name, 22;
+    @mixin make-utility--n $name, 23;
+    @mixin make-utility--n $name, 24;
+    @mixin make-utility--n $name, 25;
+}
+
+@define-mixin make-utility $name {
+    &$(name) {
+        @mixin --u-$(name);
+    }
+}
+
+@define-mixin make-utility--n $name, $n {
+    &$(name)$(n) {
+        @mixin --u-$(name) $(n);
+    }
+}
+
+@define-mixin make-utility--n-of-n $name, $a, $b {
+    &$(name)$(a)of$(b) {
+        @mixin --u-$(name) $(a), $(b);
+    }
+}

package/src/tokens/metrics.css

@@ -0,0 +1,32 @@
+/**
+ * Base Metrics
+ */
+:root {
+    --Grid-gutter-size: 1.6rem;
+
+    --padding-edge: 3.2rem;
+
+    --padding-base-vertical: 1.2rem;
+    --padding-base-horizontal: 2rem;
+
+    --padding-large-vertical: 1.4rem;
+    --padding-large-horizontal: 1.6rem;
+
+    --padding-small-vertical: 0.5rem;
+    --padding-small-horizontal: 1rem;
+
+    --border-radius-base: 8px;
+    --border-radius-small: 6px;
+
+    --border-width-base: 2px;
+    --border-width-thick: 3px;
+    --border-width-thin: 1px;
+
+    --caret-width-base: 4px;
+    --caret-width-large: 5px;
+
+    /* Directions */
+    --default-float: left;
+
+    --list-nested-margin: 20px;
+}

package/src/tokens/mixins.css

@@ -0,0 +1,3 @@
+@define-mixin --gradient-blue-to-teal {
+    background: var(--gradient-blue-to-teal);
+}

package/src/tokens/typography.css

@@ -0,0 +1,55 @@
+@import "https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,600,700";
+
+/**
+ * Typography
+ */
+:root {
+    /* Font weights */
+    --font-weight-300: 300;
+    --font-weight-400: 400;
+    --font-weight-600: 600;
+    --font-weight-700: 700;
+
+    /* Base Font */
+    --font-family-sans-serif: "Source Sans Pro", sans-serif;
+
+    --font-size-percentage: 62.5%;
+    --font-size-base: 1.6rem;
+    --font-size-md-base: 1.8rem;
+
+    --line-height-base: 2.4rem;
+    --line-height-md-base: 2.8rem;
+
+    --text-direction: ltr;
+
+    --font-style: normal;
+
+    /* Headings */
+    --h1-font-size: 3.2rem;
+    --h2-font-size: 2.4rem;
+    --h3-font-size: 2rem;
+    --h4-font-size: 1.6rem;
+    --h5-font-size: 1.4rem;
+    --h6-font-size: 1.4rem;
+
+    --h1-line-height: 4rem;
+    --h2-line-height: 3.2rem;
+    --h3-line-height: 2.8rem;
+    --h4-line-height: 2rem;
+    --h5-line-height: 2rem;
+    --h6-line-height: 2rem;
+
+    --h1-md-font-size: 4rem;
+    --h2-md-font-size: 3.2rem;
+    --h3-md-font-size: 2.4rem;
+    --h4-md-font-size: 2rem;
+    --h5-md-font-size: 1.6rem;
+    --h6-md-font-size: 1.4rem;
+
+    --h1-md-line-height: 4.8rem;
+    --h2-md-line-height: 4rem;
+    --h3-md-line-height: 3.2rem;
+    --h4-md-line-height: 2.4rem;
+    --h5-md-line-height: 2.4rem;
+    --h6-md-line-height: 2rem;
+}

package/src/tokens/z-index.css

@@ -0,0 +1,14 @@
+/**
+ * z-index depths
+ */
+:root {
+    --z-index-below: -10;
+    --z-index-zero: 0;
+    --z-index-baseline: 1;
+    --z-index-footer: 2;
+    --z-index-menus: 3;
+    --z-index-open-menus: 4;
+    --z-index-tool-tips: var(--z-index-open-menus);
+    --z-index-overlays-and-headers: 5;
+    --z-index-goku: 9001;
+}