/* ========================================================================== Frontier OSINT Design System v1: tokens.css One file owns every value. Components (components.css) reference tokens only. Theme model - Light values live on :root (and on any [data-theme="light"] subtree). - Dark values apply when the OS prefers dark and the page has not stamped data-theme="light", or whenever an element carries data-theme="dark". - Product default: the server stamps (brand default, see DESIGN.md section 2). "System" removes the stamp so the OS decides. - Nested [data-theme] subtrees re-theme themselves (used by the gallery). Generated from _build/tokens_def.py by _build/build_tokens.py. ========================================================================== */ /* Metric-matched fallbacks so text is readable before the web fonts land (Stripe's sohne-var uses font-display:block and paints no text at 1.5s; we use swap plus these overrides to keep the swap shift near zero). Widths are matched on running English text; the serif pair is measured against the Frontier Serif cuts in static/fonts (Roman at opsz 24, Italic at opsz 48), and the italic has its own face so the swap never shows an upright Georgia. */ @font-face { font-family: "Inter Fallback"; src: local("Arial"), local("Helvetica Neue"), local("Helvetica"); size-adjust: 107.4%; ascent-override: 90.2%; descent-override: 22.5%; line-gap-override: 0%; } /* Display roles (32px and up) read Inter's display optical size, about 8% narrower than its text cut, so they fall back to Arial at another scale and a 64px headline wraps the same way before and after the swap. */ @font-face { font-family: "Inter Display Fallback"; src: local("Arial"), local("Helvetica Neue"), local("Helvetica"); size-adjust: 99.3%; ascent-override: 97.5%; descent-override: 24.3%; line-gap-override: 0%; } @font-face { font-family: "Source Serif Fallback"; src: local("Georgia"), local("Times New Roman"); size-adjust: 100.7%; ascent-override: 102.9%; descent-override: 33.3%; line-gap-override: 0%; } @font-face { font-family: "Source Serif Fallback"; font-style: italic; src: local("Georgia Italic"), local("Georgia-Italic"), local("Times New Roman Italic"); size-adjust: 87.5%; ascent-override: 118.4%; descent-override: 38.3%; line-gap-override: 0%; } :root, [data-theme="light"] { color-scheme: light; /* Surfaces */ --bg-canvas: #ffffff; --bg-subtle: #f7f8fa; --bg-sunken: #f3f5f8; --bg-raised: #ffffff; --bg-overlay: #ffffff; --bg-field: #ffffff; --bg-hover: #f2f3f7; --bg-pressed: #e9ebf0; --bg-thumb: #ffffff; --bg-inverse: #1d2433; --logo-plate-light: #ffffff; --logo-plate-dark: #1d2433; --scrim: rgba(16, 23, 38, 0.36); --skeleton: #edeff3; --skeleton-shine: rgba(255, 255, 255, 0.72); /* Borders */ --border-subtle: #ebedf1; --border: #e0e3e9; --border-strong: #b9bfca; --ring-image: rgba(16, 23, 38, 0.10); /* Text */ --text-primary: #101726; --text-secondary: #505869; --text-tertiary: #626978; --text-disabled: #9fa5b0; --text-inverse: #f0f1f5; --text-on-accent: #ffffff; /* Accent (one accent, periwinkle) */ --accent-brand: #bac7fa; --accent-solid: #4c56d3; --accent-solid-hover: #4046c2; --accent-solid-active: #393db8; --accent-text: #4046c2; --accent-text-hover: #302fab; --accent-subtle: #f0f3ff; --accent-subtle-hover: #e7ecff; --accent-border: #cbd5ff; --focus-ring: #4c56d3; --selection: #d6ddfe; /* Status */ --success-text: #036d36; --success-bg: #eafbee; --success-border: #bbe4c4; --warning-text: #844b04; --warning-bg: #fff4ea; --warning-border: #f5cfb0; --danger-text: #a9131f; --danger-bg: #fff2f1; --danger-border: #fdc9c4; --info-text: #076289; --info-bg: #ecf8ff; --info-border: #b2dffa; /* Graph */ --graph-bg: #f3f5f8; --graph-edge: rgba(80, 88, 105, 0.40); --graph-edge-strong: rgba(80, 88, 105, 0.72); --graph-label-bg: rgba(255, 255, 255, 0.90); --kind-person: #3a4150; --kind-lab: #485ace; --kind-capital: #ae6700; --kind-work: #028a7f; --kind-other: #7a8191; /* Elevation (two layers, tinted; used only for floating layers) */ --shadow-xs: 0 1px 2px rgba(16, 23, 38, 0.06); --shadow-sm: 0 2px 10px rgba(22, 30, 70, 0.06), 0 1px 4px rgba(22, 30, 70, 0.04); --shadow-md: 0 6px 22px rgba(22, 30, 70, 0.10), 0 4px 8px rgba(22, 30, 70, 0.03); --shadow-lg: 0 15px 40px -2px rgba(22, 30, 70, 0.12), 0 5px 20px -2px rgba(22, 30, 70, 0.05); --shadow-xl: 0 20px 80px -16px rgba(22, 30, 70, 0.20), 0 10px 60px -16px rgba(22, 30, 70, 0.08); } :root { /* ---- Families ---------------------------------------------------------- Inter: every UI and display role. Frontier Serif (Source Serif 4, subset and renamed as the OFL requires of a Modified Version): the editorial turn and quotes only. JetBrains Mono: IDs, hashes and code only. */ --font-sans: "Inter", "Inter Fallback", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; --font-sans-display: "Inter", "Inter Display Fallback", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; --font-serif: "Frontier Serif", "Source Serif 4", "Source Serif Fallback", Georgia, serif; --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; /* ---- Weights: three, plus the wordmark --------------------------------- */ --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-wordmark: 650; /* ---- Type roles: size / line-height / weight / tracking ---------------- Lighter and tighter as size grows: 500 at >=32px, 600 at 16-24px. Tracking steps 0 (<=16px) -> -0.01em (18-20) -> -0.015em (24) -> -0.02em (32) -> -0.022em (48) -> -0.025em (64). */ --t-display-xl-size: 64px; --t-display-xl-lh: 68px; --t-display-xl-weight: 500; --t-display-xl-track: -0.025em; --t-display-size: 48px; --t-display-lh: 52px; --t-display-weight: 500; --t-display-track: -0.022em; --t-heading-lg-size: 32px; --t-heading-lg-lh: 40px; --t-heading-lg-weight: 500; --t-heading-lg-track: -0.02em; --t-heading-md-size: 24px; --t-heading-md-lh: 32px; --t-heading-md-weight: 600; --t-heading-md-track: -0.015em; --t-heading-sm-size: 18px; --t-heading-sm-lh: 26px; --t-heading-sm-weight: 600; --t-heading-sm-track: -0.01em; --t-title-size: 16px; --t-title-lh: 24px; --t-title-weight: 600; --t-title-track: 0; --t-body-lg-size: 18px; --t-body-lg-lh: 28px; --t-body-lg-weight: 400; --t-body-lg-track: -0.005em; --t-body-size: 16px; --t-body-lh: 24px; --t-body-weight: 400; --t-body-track: 0; --t-body-sm-size: 14px; --t-body-sm-lh: 20px; --t-body-sm-weight: 400; --t-body-sm-track: 0; --t-label-size: 14px; --t-label-lh: 20px; --t-label-weight: 500; --t-label-track: 0; --t-caption-size: 12px; --t-caption-lh: 16px; --t-caption-weight: 400; --t-caption-track: 0.005em; --t-overline-size: 11px; --t-overline-lh: 16px; --t-overline-weight: 600; --t-overline-track: 0.06em; --t-numeric-xl-size: 48px; --t-numeric-xl-lh: 48px; --t-numeric-xl-weight: 500; --t-numeric-xl-track: -0.03em; --t-numeric-size: 20px; --t-numeric-lh: 28px; --t-numeric-weight: 500; --t-numeric-track: -0.01em; --t-mono-size: 12px; --t-mono-lh: 16px; --t-mono-weight: 400; --t-mono-track: 0; --t-quote-size: 24px; --t-quote-lh: 34px; --t-quote-weight: 400; --t-quote-track: -0.005em; --t-editorial-size: 40px; --t-editorial-lh: 48px; --t-editorial-weight: 400; --t-editorial-track: -0.015em; /* Shorthands (font: ...) recompute when a breakpoint overrides the parts. */ --t-display-xl: var(--t-display-xl-weight) var(--t-display-xl-size)/var(--t-display-xl-lh) var(--font-sans-display); --t-display: var(--t-display-weight) var(--t-display-size)/var(--t-display-lh) var(--font-sans-display); --t-heading-lg: var(--t-heading-lg-weight) var(--t-heading-lg-size)/var(--t-heading-lg-lh) var(--font-sans-display); --t-heading-md: var(--t-heading-md-weight) var(--t-heading-md-size)/var(--t-heading-md-lh) var(--font-sans); --t-heading-sm: var(--t-heading-sm-weight) var(--t-heading-sm-size)/var(--t-heading-sm-lh) var(--font-sans); --t-title: var(--t-title-weight) var(--t-title-size)/var(--t-title-lh) var(--font-sans); --t-body-lg: var(--t-body-lg-weight) var(--t-body-lg-size)/var(--t-body-lg-lh) var(--font-sans); --t-body: var(--t-body-weight) var(--t-body-size)/var(--t-body-lh) var(--font-sans); --t-body-sm: var(--t-body-sm-weight) var(--t-body-sm-size)/var(--t-body-sm-lh) var(--font-sans); --t-label: var(--t-label-weight) var(--t-label-size)/var(--t-label-lh) var(--font-sans); --t-caption: var(--t-caption-weight) var(--t-caption-size)/var(--t-caption-lh) var(--font-sans); --t-overline: var(--t-overline-weight) var(--t-overline-size)/var(--t-overline-lh) var(--font-sans); --t-numeric-xl: var(--t-numeric-xl-weight) var(--t-numeric-xl-size)/var(--t-numeric-xl-lh) var(--font-sans-display); --t-numeric: var(--t-numeric-weight) var(--t-numeric-size)/var(--t-numeric-lh) var(--font-sans); --t-mono: var(--t-mono-weight) var(--t-mono-size)/var(--t-mono-lh) var(--font-mono); --t-quote: var(--t-quote-weight) var(--t-quote-size)/var(--t-quote-lh) var(--font-serif); --t-editorial: var(--t-editorial-weight) var(--t-editorial-size)/var(--t-editorial-lh) var(--font-serif); --measure: 68ch; /* running text */ --measure-narrow: 52ch; /* decks under display titles */ /* ---- Spacing: 4px base. Name = px / 4. -------------------------------- */ --space-0: 0; --space-px: 1px; --space-0-5: 2px; --space-1: 4px; --space-1-5: 6px; /* icon-to-label gap (Stripe arrow gap 6px) */ --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px; --space-20: 80px; --space-24: 96px; --space-32: 128px; /* ---- Layout ------------------------------------------------------------ Breakpoints (media queries cannot read variables): sm >= 640px, md >= 1024px, lg >= 1280px, xl >= 1600px. */ --container-max: 1232px; --gutter: 16px; --grid-columns: 12; --grid-gap: 16px; --section-pad: 56px; --header-h: 56px; --stage-pad: 16px; --drawer-w: 400px; --graph-dim: 0.2; /* opacity of nodes/edges outside the selection */ --graph-fit-inset: 32px; /* fit leaves this margin around nodes + labels */ --sidebar-w: 280px; --control-sm: 32px; --control-md: 36px; --control-lg: 44px; --target-min: 24px; /* WCAG 2.2 AA; touch controls use --control-lg */ /* ---- Radii ------------------------------------------------------------ */ --radius-xs: 4px; /* badges, tags, kbd, checkbox */ --radius-sm: 6px; /* buttons, inputs, segmented items, tooltips */ --radius-md: 8px; /* cards, panels, popovers, graph frame */ --radius-lg: 12px; /* dialogs, palette, sheets */ --radius-full: 999px; /* avatars, pills */ --radius-logo: 25%; /* organization plates: 16->4, 32->8, 56->14 */ /* ---- Borders ------------------------------------------------------------ */ --border-width: 1px; --indicator-width: 2px; /* active tab / nav underline */ /* ---- Icons (Lucide 0.460.0; stroke in 24-unit viewBox) ----------------- */ --icon-sm: 16px; --icon-sm-stroke: 2; /* 1.33px rendered */ --icon-md: 20px; --icon-md-stroke: 1.75; /* 1.46px rendered */ --icon-lg: 24px; --icon-lg-stroke: 1.5; /* 1.50px rendered */ /* ---- Motion ------------------------------------------------------------ One curve family. ease-out is Stripe HDS's default (300ms, ~94% of the travel by 150ms); ease-in-out is its navigation curve (240ms). */ --ease-out: cubic-bezier(0.25, 1, 0.5, 1); --ease-in-out: cubic-bezier(0.45, 0.05, 0.55, 0.95); --ease-in: cubic-bezier(0.4, 0, 1, 1); --ease-emphasized: cubic-bezier(0.16, 1, 0.3, 1); --dur-press: 80ms; /* :active feedback */ --dur-fast: 150ms; /* colour, underline, opacity, tooltip */ --dur-base: 240ms; /* backgrounds, borders, popovers, tab indicator */ --dur-move: 300ms; /* arrows, chevrons, drawers, sheets */ --dur-slow: 450ms; /* graph camera, dialog on large screens */ --dur-shimmer: 1200ms; /* skeleton sweep */ --delay-intent: 134ms; /* hover intent before menus / node previews open */ --delay-skeleton: 150ms; /* skeletons never flash on fast loads */ --delay-spinner: 300ms; /* spinners only for slow work */ --delay-tooltip: 400ms; /* hover; focus shows immediately */ /* ---- Layers ------------------------------------------------------------- */ --z-sticky: 20; --z-header: 30; --z-drawer: 40; --z-popover: 50; --z-scrim: 60; --z-dialog: 70; --z-toast: 80; --z-tooltip: 90; } @media (min-width: 640px) { :root { --gutter: 24px; --section-pad: 64px; --header-h: 64px; --stage-pad: 24px; } } @media (min-width: 1024px) { :root { --gutter: 32px; --grid-gap: 24px; --section-pad: 96px; } } /* Mobile type: roles step down; nothing readable goes below 12px. */ @media (max-width: 639px) { :root { --t-display-xl-size: 40px; --t-display-xl-lh: 44px; --t-display-xl-track: -0.02em; --t-display-size: 34px; --t-display-lh: 40px; --t-display-track: -0.02em; --t-heading-lg-size: 26px; --t-heading-lg-lh: 32px; --t-heading-lg-track: -0.015em; --t-heading-md-size: 20px; --t-heading-md-lh: 28px; --t-heading-md-track: -0.01em; --t-body-lg-size: 17px; --t-body-lg-lh: 26px; --t-numeric-xl-size: 36px; --t-numeric-xl-lh: 40px; --t-quote-size: 20px; --t-quote-lh: 30px; --t-editorial-size: 30px; --t-editorial-lh: 36px; } } @media (pointer: coarse) { :root { --control-md: 44px; --control-sm: 40px; } } @media (prefers-reduced-motion: reduce) { :root { --dur-press: 0ms; --dur-fast: 0ms; --dur-base: 0ms; --dur-move: 0ms; --dur-slow: 0ms; --dur-shimmer: 0ms; --delay-intent: 0ms; } } /* ---- Type role classes -------------------------------------------------- */ .t-display-xl { font: var(--t-display-xl); letter-spacing: var(--t-display-xl-track); text-wrap: balance; } .t-display { font: var(--t-display); letter-spacing: var(--t-display-track); text-wrap: balance; } .t-heading-lg { font: var(--t-heading-lg); letter-spacing: var(--t-heading-lg-track); text-wrap: balance; } .t-heading-md { font: var(--t-heading-md); letter-spacing: var(--t-heading-md-track); } .t-heading-sm { font: var(--t-heading-sm); letter-spacing: var(--t-heading-sm-track); } .t-title { font: var(--t-title); letter-spacing: var(--t-title-track); } .t-body-lg { font: var(--t-body-lg); letter-spacing: var(--t-body-lg-track); } .t-body { font: var(--t-body); letter-spacing: var(--t-body-track); } .t-body-sm { font: var(--t-body-sm); letter-spacing: var(--t-body-sm-track); } .t-label { font: var(--t-label); letter-spacing: var(--t-label-track); } .t-caption { font: var(--t-caption); letter-spacing: var(--t-caption-track); } .t-overline { font: var(--t-overline); letter-spacing: var(--t-overline-track); text-transform: uppercase; font-feature-settings: "case"; } .t-numeric-xl { font: var(--t-numeric-xl); letter-spacing: var(--t-numeric-xl-track); font-variant-numeric: tabular-nums; } .t-numeric { font: var(--t-numeric); letter-spacing: var(--t-numeric-track); font-variant-numeric: tabular-nums; } .t-mono { font: var(--t-mono); letter-spacing: var(--t-mono-track); } .t-quote { font: var(--t-quote); letter-spacing: var(--t-quote-track); } .t-editorial { font: var(--t-editorial); letter-spacing: var(--t-editorial-track); text-wrap: balance; } /* The editorial turn: a serif-italic continuation inside a sans headline ("The Launch of Cosign, from the outside."). Inherits size; one per page. */ .t-turn { font-family: var(--font-serif); font-style: italic; font-weight: var(--weight-regular); letter-spacing: -0.01em; white-space: nowrap; /* the turn never splits: four words or fewer */ } /* Two-tone thesis: the claim in primary ink, the elaboration in secondary, same size and weight, one element. */ .t-thesis-rest { color: var(--text-secondary); } .num { font-variant-numeric: tabular-nums; } /* ---- Dark theme: OS preference (unless the page stamped light) ---------- */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; /* Surfaces */ --bg-canvas: #111318; --bg-subtle: #13161c; --bg-sunken: #0d0f14; --bg-raised: #171a21; --bg-overlay: #1c2029; --bg-field: #14171e; --bg-hover: #1e222b; --bg-pressed: #262b36; --bg-thumb: #2a2f3b; --bg-inverse: #f0f1f5; --logo-plate-light: #f0f1f5; --logo-plate-dark: #232835; --scrim: rgba(6, 7, 10, 0.64); --skeleton: #282d38; --skeleton-shine: rgba(255, 255, 255, 0.06); /* Borders */ --border-subtle: #22262f; --border: #2a2e38; --border-strong: #434a5a; --ring-image: rgba(255, 255, 255, 0.12); /* Text */ --text-primary: #f0f1f5; --text-secondary: #b4bac6; --text-tertiary: #8a91a0; --text-disabled: #5d6473; --text-inverse: #101726; --text-on-accent: #111318; /* Accent (one accent, periwinkle) */ --accent-brand: #bac7fa; --accent-solid: #bac7fa; --accent-solid-hover: #c9d3fd; --accent-solid-active: #aab9f6; --accent-text: #bac7fa; --accent-text-hover: #dde3fe; --accent-subtle: rgba(186, 199, 250, 0.12); --accent-subtle-hover: rgba(186, 199, 250, 0.18); --accent-border: rgba(186, 199, 250, 0.32); --focus-ring: #bac7fa; --selection: rgba(186, 199, 250, 0.30); /* Status */ --success-text: #6fd3a0; --success-bg: rgba(111, 211, 160, 0.12); --success-border: rgba(111, 211, 160, 0.32); --warning-text: #e0b590; --warning-bg: rgba(224, 181, 144, 0.12); --warning-border: rgba(224, 181, 144, 0.32); --danger-text: #ff8f87; --danger-bg: rgba(255, 143, 135, 0.12); --danger-border: rgba(255, 143, 135, 0.32); --info-text: #96cbe0; --info-bg: rgba(150, 203, 224, 0.12); --info-border: rgba(150, 203, 224, 0.32); /* Graph */ --graph-bg: #0d0f14; --graph-edge: rgba(142, 151, 168, 0.40); --graph-edge-strong: rgba(142, 151, 168, 0.72); --graph-label-bg: rgba(13, 15, 20, 0.88); --kind-person: #c9cfdb; --kind-lab: #5882ef; --kind-capital: #bd8630; --kind-work: #109b8f; --kind-other: #6b7282; /* Elevation (two layers, tinted; used only for floating layers) */ --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.40); --shadow-sm: inset 0 1px 0 rgba(255, 255, 255, 0.03), 0 2px 8px rgba(0, 0, 0, 0.30); --shadow-md: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 4px 12px rgba(0, 0, 0, 0.35), 0 1px 3px rgba(0, 0, 0, 0.30); --shadow-lg: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 16px 40px rgba(0, 0, 0, 0.45), 0 2px 6px rgba(0, 0, 0, 0.30); --shadow-xl: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 24px 80px rgba(0, 0, 0, 0.55), 0 4px 12px rgba(0, 0, 0, 0.35); } } /* ---- Dark theme: explicit stamp (product default) or nested subtree ----- */ [data-theme="dark"] { color-scheme: dark; /* Surfaces */ --bg-canvas: #111318; --bg-subtle: #13161c; --bg-sunken: #0d0f14; --bg-raised: #171a21; --bg-overlay: #1c2029; --bg-field: #14171e; --bg-hover: #1e222b; --bg-pressed: #262b36; --bg-thumb: #2a2f3b; --bg-inverse: #f0f1f5; --logo-plate-light: #f0f1f5; --logo-plate-dark: #232835; --scrim: rgba(6, 7, 10, 0.64); --skeleton: #282d38; --skeleton-shine: rgba(255, 255, 255, 0.06); /* Borders */ --border-subtle: #22262f; --border: #2a2e38; --border-strong: #434a5a; --ring-image: rgba(255, 255, 255, 0.12); /* Text */ --text-primary: #f0f1f5; --text-secondary: #b4bac6; --text-tertiary: #8a91a0; --text-disabled: #5d6473; --text-inverse: #101726; --text-on-accent: #111318; /* Accent (one accent, periwinkle) */ --accent-brand: #bac7fa; --accent-solid: #bac7fa; --accent-solid-hover: #c9d3fd; --accent-solid-active: #aab9f6; --accent-text: #bac7fa; --accent-text-hover: #dde3fe; --accent-subtle: rgba(186, 199, 250, 0.12); --accent-subtle-hover: rgba(186, 199, 250, 0.18); --accent-border: rgba(186, 199, 250, 0.32); --focus-ring: #bac7fa; --selection: rgba(186, 199, 250, 0.30); /* Status */ --success-text: #6fd3a0; --success-bg: rgba(111, 211, 160, 0.12); --success-border: rgba(111, 211, 160, 0.32); --warning-text: #e0b590; --warning-bg: rgba(224, 181, 144, 0.12); --warning-border: rgba(224, 181, 144, 0.32); --danger-text: #ff8f87; --danger-bg: rgba(255, 143, 135, 0.12); --danger-border: rgba(255, 143, 135, 0.32); --info-text: #96cbe0; --info-bg: rgba(150, 203, 224, 0.12); --info-border: rgba(150, 203, 224, 0.32); /* Graph */ --graph-bg: #0d0f14; --graph-edge: rgba(142, 151, 168, 0.40); --graph-edge-strong: rgba(142, 151, 168, 0.72); --graph-label-bg: rgba(13, 15, 20, 0.88); --kind-person: #c9cfdb; --kind-lab: #5882ef; --kind-capital: #bd8630; --kind-work: #109b8f; --kind-other: #6b7282; /* Elevation (two layers, tinted; used only for floating layers) */ --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.40); --shadow-sm: inset 0 1px 0 rgba(255, 255, 255, 0.03), 0 2px 8px rgba(0, 0, 0, 0.30); --shadow-md: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 4px 12px rgba(0, 0, 0, 0.35), 0 1px 3px rgba(0, 0, 0, 0.30); --shadow-lg: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 16px 40px rgba(0, 0, 0, 0.45), 0 2px 6px rgba(0, 0, 0, 0.30); --shadow-xl: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 24px 80px rgba(0, 0, 0, 0.55), 0 4px 12px rgba(0, 0, 0, 0.35); }