/* o.Lyra brand stylesheet — GENERATED. Do not edit. * * Source: ui/src/styles/brand/olyra.brand.scss * System: ui/src/styles/brand/system/ (tracked snapshot of the brand system SCSS) * Generator: scripts/build-brand-css.js (npm run brand:css) * * To change what this contains, edit the composition in the source above, or take a new * brand system release with npm run brand:source:sync. Editing this file is reverted by * the next build and fails `npm run brand:css:check`. */ /* o.Lyra UI System Authoritative dual-theme SCSS for the o.Lyra application interface. Brand: warm ivory + celestial navy + orbital blue/violet. Theme controls: - Default: light - Manual dark: - Manual light: - Auto dark: omit data-theme and the OS preference is respected. Typography: - Bellota is reserved for branding / expressive display moments. - Interface copy uses a high-legibility system stack by default. */ @layer reset, tokens, base, layout, components, utilities, themes; @layer reset { *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; text-rendering: optimizeLegibility; } body, h1, h2, h3, h4, p, figure, blockquote, dl, dd { margin: 0; } ul[role=list], ol[role=list] { list-style: none; margin: 0; padding: 0; } img, picture, svg, canvas { display: block; max-width: 100%; } button, input, textarea, select { font: inherit; } button { cursor: pointer; } a { color: inherit; text-decoration: none; } } @layer tokens { :root { /* Brand */ --lyra-ivory: #fbf5ee; --lyra-ink: #07111f; --lyra-navy-950: #050b14; --lyra-navy-900: #07111f; --lyra-navy-850: #0a1525; --lyra-navy-800: #0d1a2b; --lyra-navy-700: #13243a; --lyra-blue-700: #425fcb; --lyra-blue-600: #5272e6; --lyra-blue-500: #718cff; --lyra-blue-400: #8fa5ff; --lyra-violet-600: #7658d8; --lyra-violet-500: #9578f5; --lyra-violet-400: #b09aff; --lyra-cyan-500: #3fb7c5; --lyra-green-600: #16825d; --lyra-green-500: #2aa876; --lyra-amber-600: #aa6a12; --lyra-amber-500: #d48a24; --lyra-red-600: #bd3f52; --lyra-red-500: #df6071; /* Typography */ /* Canonical typography roles. Unprefixed 3.x aliases were removed in v4. */ --lyra-font-brand: 'Bellota', 'MuseoModerno', sans-serif; --lyra-font-display: 'MuseoModerno', 'Sora', 'Space Grotesk', sans-serif; --lyra-font-ui: 'Instrument Sans', 'Manrope', 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --lyra-font-editorial: 'Instrument Serif', 'Newsreader', 'Source Serif 4', Georgia, serif; --lyra-font-mono: 'Geist Mono', 'IBM Plex Mono', 'JetBrains Mono', 'SFMono-Regular', Consolas, ui-monospace, monospace; --lyra-font-human: 'Klee One', 'Caveat', cursive; --fs-lg: 1.0625rem; --fs-xl: 1.25rem; --fs-2xl: clamp(1.45rem, 2vw, 1.8rem); --fs-3xl: clamp(1.8rem, 3vw, 2.4rem); --fs-4xl: clamp(2.25rem, 5vw, 3.5rem); --lh-tight: 1.1; --lh-snug: 1.3; --lh-normal: 1.55; /* Spacing */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.25rem; --space-6: 1.5rem; --space-8: 2rem; --space-10: 2.5rem; --space-12: 3rem; --space-16: 4rem; /* Shape */ --radius-xs: 0.4rem; --radius-sm: 0.6rem; --radius-md: 0.85rem; --radius-lg: 1.1rem; --radius-xl: 1.45rem; --radius-pill: 999px; /* Motion */ --lyra-motion-ease-out: cubic-bezier(.22, 1, .36, 1); --lyra-motion-ease-standard: cubic-bezier(.2, .8, .2, 1); --lyra-motion-duration-fast: 120ms; --lyra-motion-duration-medium: 220ms; --lyra-motion-duration-slow: 420ms; --lyra-motion-duration-shimmer: 1500ms; /* Layout */ --sidebar-width: 17.5rem; --topbar-height: 4.25rem; --content-max: 96rem; /* Responsive, sizing, opacity, focus, and layer foundations */ --breakpoint-wide: 70rem; --breakpoint-shell: 51.25rem; --breakpoint-type-compact: 45rem; --control-height-compact: 2.125rem; --control-height-default: 2.75rem; --touch-target-min: 2.75rem; --icon-size-sm: 1rem; --icon-size-md: 1.25rem; --icon-size-lg: 1.5rem; --opacity-disabled: .48; --opacity-muted: .72; --opacity-overlay: .58; --opacity-decoration: .12; --z-base: 0; --z-card: 1; --z-sticky: 30; --z-popover: 60; --z-modal: 100; --z-toast: 120; --z-command: 140; --focus-ring-width: 2px; --focus-ring-offset: 3px; /* Light semantic theme */ color-scheme: light; --bg: #f6f8fc; --bg-elevated: #ffffff; --surface-1: #ffffff; --surface-2: #f0f4f9; --surface-3: #e8eef6; --surface-glass: rgba(255, 255, 255, 0.82); --text-1: #172236; --text-2: #526075; --text-3: #677385; --text-muted: #677385; --text-inverse: #fbf5ee; --border: #dce4ef; --border-strong: #7b8ca0; --control-border: #7b8ca0; --hairline: rgba(23, 34, 54, 0.08); --primary: #425fcb; --primary-hover: #354ead; --primary-soft: #e9edff; --primary-text: #ffffff; --accent: #7658d8; --accent-soft: #f0ebff; --focus: #5272e6; --success: #147955; --success-soft: #e6f6ef; --warning: #99600f; --warning-soft: #fff4de; --danger: #b7374a; --danger-soft: #fdebed; --info: #276ea0; --info-soft: #e7f3fb; --status-success-fg: #147955; --status-success-bg: #e6f6ef; --status-success-border: #147955; --status-success-icon: #147955; --status-warning-fg: #99600f; --status-warning-bg: #fff4de; --status-warning-border: #99600f; --status-warning-icon: #99600f; --status-danger-fg: #b7374a; --status-danger-bg: #fdebed; --status-danger-border: #b7374a; --status-danger-icon: #b7374a; --status-info-fg: #276ea0; --status-info-bg: #e7f3fb; --status-info-border: #276ea0; --status-info-icon: #276ea0; --shadow-color: 29 45 70; --shadow-xs: 0 1px 2px rgb(var(--shadow-color) / .05); --shadow-sm: 0 6px 18px rgb(var(--shadow-color) / .07), 0 1px 3px rgb(var(--shadow-color) / .06); --shadow-md: 0 16px 40px rgb(var(--shadow-color) / .10), 0 2px 8px rgb(var(--shadow-color) / .06); --shadow-lg: 0 28px 70px rgb(var(--shadow-color) / .14), 0 6px 18px rgb(var(--shadow-color) / .08); --sidebar-bg: rgba(255, 255, 255, 0.9); --topbar-bg: rgba(246, 248, 252, 0.84); --scroll-thumb: #c3cedd; --selection-bg: #dce4ff; --selection-text: #172236; } } @layer themes { [data-theme=dark] { color-scheme: dark; --bg: #07111f; --bg-elevated: #0a1525; --surface-1: #0c1727; --surface-2: #111e31; --surface-3: #17283e; --surface-glass: rgba(10, 21, 37, 0.82); --text-1: #fbf5ee; --text-2: #c5d0df; --text-3: #8ea0b8; --text-muted: #8ea0b8; --text-inverse: #07111f; --border: #22344c; --border-strong: #536a84; --control-border: #536a84; --hairline: rgba(251, 245, 238, 0.08); --primary: #8fa5ff; --primary-hover: #a5b5ff; --primary-soft: #18264a; --primary-text: #07111f; --accent: #b09aff; --accent-soft: #241f45; --focus: #9eb0ff; --success: #55cf9a; --success-soft: #112f27; --warning: #f2b85b; --warning-soft: #382b17; --danger: #ff8291; --danger-soft: #3d1d25; --info: #71c0ed; --info-soft: #153249; --status-success-fg: #55cf9a; --status-success-bg: #112f27; --status-success-border: #55cf9a; --status-success-icon: #55cf9a; --status-warning-fg: #f2b85b; --status-warning-bg: #382b17; --status-warning-border: #f2b85b; --status-warning-icon: #f2b85b; --status-danger-fg: #ff8291; --status-danger-bg: #3d1d25; --status-danger-border: #ff8291; --status-danger-icon: #ff8291; --status-info-fg: #71c0ed; --status-info-bg: #153249; --status-info-border: #71c0ed; --status-info-icon: #71c0ed; --shadow-color: 0 0 0; --shadow-xs: 0 1px 2px rgb(var(--shadow-color) / .22); --shadow-sm: 0 8px 22px rgb(var(--shadow-color) / .24), inset 0 1px rgba(255,255,255,.025); --shadow-md: 0 20px 50px rgb(var(--shadow-color) / .30), inset 0 1px rgba(255,255,255,.03); --shadow-lg: 0 34px 90px rgb(var(--shadow-color) / .38), inset 0 1px rgba(255,255,255,.035); --sidebar-bg: rgba(7, 17, 31, 0.9); --topbar-bg: rgba(7, 17, 31, 0.8); --scroll-thumb: #2d425d; --selection-bg: #334b91; --selection-text: #fbf5ee; } @media (prefers-color-scheme: dark) { :root:not([data-theme]) { color-scheme: dark; --bg: #07111f; --bg-elevated: #0a1525; --surface-1: #0c1727; --surface-2: #111e31; --surface-3: #17283e; --surface-glass: rgba(10, 21, 37, 0.82); --text-1: #fbf5ee; --text-2: #c5d0df; --text-3: #8ea0b8; --text-muted: #8ea0b8; --text-inverse: #07111f; --border: #22344c; --border-strong: #536a84; --control-border: #536a84; --hairline: rgba(251, 245, 238, 0.08); --primary: #8fa5ff; --primary-hover: #a5b5ff; --primary-soft: #18264a; --primary-text: #07111f; --accent: #b09aff; --accent-soft: #241f45; --focus: #9eb0ff; --success: #55cf9a; --success-soft: #112f27; --warning: #f2b85b; --warning-soft: #382b17; --danger: #ff8291; --danger-soft: #3d1d25; --info: #71c0ed; --info-soft: #153249; --status-success-fg: #55cf9a; --status-success-bg: #112f27; --status-success-border: #55cf9a; --status-success-icon: #55cf9a; --status-warning-fg: #f2b85b; --status-warning-bg: #382b17; --status-warning-border: #f2b85b; --status-warning-icon: #f2b85b; --status-danger-fg: #ff8291; --status-danger-bg: #3d1d25; --status-danger-border: #ff8291; --status-danger-icon: #ff8291; --status-info-fg: #71c0ed; --status-info-bg: #153249; --status-info-border: #71c0ed; --status-info-icon: #71c0ed; --shadow-color: 0 0 0; --shadow-xs: 0 1px 2px rgb(var(--shadow-color) / .22); --shadow-sm: 0 8px 22px rgb(var(--shadow-color) / .24), inset 0 1px rgba(255,255,255,.025); --shadow-md: 0 20px 50px rgb(var(--shadow-color) / .30), inset 0 1px rgba(255,255,255,.03); --shadow-lg: 0 34px 90px rgb(var(--shadow-color) / .38), inset 0 1px rgba(255,255,255,.035); --sidebar-bg: rgba(7, 17, 31, 0.9); --topbar-bg: rgba(7, 17, 31, 0.8); --scroll-thumb: #2d425d; --selection-bg: #334b91; --selection-text: #fbf5ee; } } } @layer base { html { background: var(--bg); } body { min-height: 100vh; font-family: var(--lyra-font-ui); font-size: var(--lyra-type-body); line-height: var(--lh-normal); color: var(--text-1); background: radial-gradient(circle at 18% -10%, rgba(113, 140, 255, 0.1), transparent 29rem), radial-gradient(circle at 92% 8%, rgba(149, 120, 245, 0.08), transparent 24rem), var(--bg); transition: background-color var(--lyra-motion-duration-medium) var(--lyra-motion-ease-standard), color var(--lyra-motion-duration-medium) var(--lyra-motion-ease-standard); } ::selection { background: var(--selection-bg); color: var(--selection-text); } :focus-visible { outline: var(--focus-ring-width) solid var(--focus); outline-offset: var(--focus-ring-offset); border-radius: var(--radius-xs); } ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--scroll-thumb); border: 3px solid transparent; background-clip: content-box; border-radius: var(--radius-pill); } h1, h2, h3, h4 { color: var(--text-1); letter-spacing: -0.025em; line-height: var(--lh-tight); } h1 { font-size: var(--fs-3xl); font-weight: 720; } h2 { font-size: var(--fs-2xl); font-weight: 700; } h3 { font-size: var(--fs-xl); font-weight: 680; } p { color: var(--text-2); } .lyra-brand-type { font-family: var(--lyra-font-brand); letter-spacing: 0.005em; font-weight: 400; } .lyra-kicker { color: var(--primary); font-size: var(--lyra-type-caption); font-weight: 750; letter-spacing: 0.12em; text-transform: uppercase; } } @layer layout { .lyra-app-shell { display: grid; grid-template-columns: var(--sidebar-width) minmax(0, 1fr); min-height: 100vh; } .lyra-sidebar { position: sticky; top: 0; height: 100vh; padding: var(--space-5) var(--space-4); background: var(--sidebar-bg); border-right: 1px solid var(--hairline); backdrop-filter: blur(24px) saturate(130%); z-index: 30; } .lyra-sidebar__brand { display: flex; align-items: center; gap: var(--space-3); min-height: 3rem; padding: 0 var(--space-3) var(--space-5); } .lyra-sidebar__brand-mark { width: 2rem; height: 2rem; color: var(--text-1); flex: 0 0 auto; } .lyra-sidebar__brand-name { font-family: var(--lyra-font-brand); font-size: 1.45rem; font-weight: 400; letter-spacing: -0.01em; } .lyra-sidebar__nav { display: grid; gap: var(--space-1); } .lyra-nav-item { display: flex; align-items: center; gap: var(--lyra-navigation-item-gap, var(--space-3)); min-height: 2.7rem; padding: var(--lyra-navigation-item-padding-block, 0.62rem) var(--lyra-navigation-item-padding-inline, 0.75rem); color: var(--lyra-navigation-foreground, var(--text-2)); border: 1px solid transparent; border-radius: var(--lyra-navigation-item-radius, var(--radius-md)); font-size: var(--lyra-type-label); font-weight: 620; transition: color var(--lyra-motion-duration-fast), background var(--lyra-motion-duration-fast), border-color var(--lyra-motion-duration-fast), transform var(--lyra-motion-duration-fast); } .lyra-nav-item:hover { color: var(--text-1); background: var(--surface-2); } .lyra-nav-item[aria-current=page], .lyra-nav-item.is-active { color: var(--lyra-navigation-active-foreground, var(--primary)); background: var(--lyra-navigation-active-background, var(--primary-soft)); border-color: color-mix(in srgb, var(--primary) 18%, transparent); } .lyra-nav-item:active { transform: translateY(1px); } .lyra-workspace { min-width: 0; } .lyra-topbar { position: sticky; top: 0; z-index: 25; display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); height: var(--topbar-height); padding: 0 clamp(1rem, 2.5vw, 2rem); background: var(--topbar-bg); border-bottom: 1px solid var(--hairline); backdrop-filter: blur(22px) saturate(130%); } .lyra-main { width: min(100%, var(--content-max)); margin-inline: auto; padding: clamp(1rem, 2.5vw, 2rem); } .lyra-page-header { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-6); margin-bottom: var(--space-8); } .lyra-page-header__copy { max-width: 48rem; } .lyra-page-header__copy p { margin-top: var(--space-2); } .lyra-grid { display: grid; gap: var(--space-4); } .lyra-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .lyra-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .lyra-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } @media (max-width: 1120px) { .lyra-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .lyra-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 820px) { .lyra-app-shell { grid-template-columns: 1fr; } .lyra-sidebar { display: none; } .lyra-page-header { align-items: stretch; flex-direction: column; } .lyra-grid--2, .lyra-grid--3, .lyra-grid--4 { grid-template-columns: 1fr; } } } @layer components { /* Surfaces */ .lyra-card, .lyra-panel { background: linear-gradient(180deg, color-mix(in srgb, var(--lyra-card-background, var(--surface-1)) 98%, transparent), var(--lyra-card-background, var(--surface-1))); border: 1px solid var(--lyra-card-border, var(--border)); box-shadow: var(--shadow-sm); } .lyra-card { color: var(--lyra-card-foreground, var(--text-1)); border-radius: var(--lyra-card-radius, var(--radius-lg)); padding: var(--lyra-card-padding, var(--space-5)); transition: transform var(--lyra-motion-duration-medium) var(--lyra-motion-ease-out), border-color var(--lyra-motion-duration-medium), box-shadow var(--lyra-motion-duration-medium); } .lyra-card--interactive:hover { transform: translateY(-2px); border-color: var(--border-strong); box-shadow: var(--shadow-md); } .lyra-panel { border-radius: var(--radius-xl); overflow: hidden; } .lyra-panel__header, .lyra-panel__footer { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: var(--space-4) var(--space-5); } .lyra-panel__header { border-bottom: 1px solid var(--hairline); } .lyra-panel__footer { border-top: 1px solid var(--hairline); } .lyra-panel__body { padding: var(--space-5); } .lyra-glass { background: var(--surface-glass); border: 1px solid var(--hairline); backdrop-filter: blur(24px) saturate(135%); box-shadow: var(--shadow-md); } /* Buttons */ .lyra-btn { --btn-bg: var(--lyra-button-secondary-background, var(--surface-1)); --btn-fg: var(--lyra-button-secondary-foreground, var(--text-1)); --btn-border: var(--lyra-button-secondary-border, var(--border)); display: inline-flex; align-items: center; justify-content: center; gap: var(--lyra-button-gap, 0.5rem); min-height: var(--lyra-button-height-default, var(--control-height-default)); padding: var(--lyra-button-padding-block, 0.62rem) var(--lyra-button-padding-inline, 0.9rem); color: var(--btn-fg); background: var(--btn-bg); border: 1px solid var(--btn-border); border-radius: var(--lyra-button-radius, var(--radius-md)); box-shadow: var(--shadow-xs); font-size: var(--lyra-type-label); font-weight: 700; line-height: 1; transition: transform var(--lyra-button-transition-duration, var(--lyra-motion-duration-fast)), background var(--lyra-button-transition-duration, var(--lyra-motion-duration-fast)), border-color var(--lyra-button-transition-duration, var(--lyra-motion-duration-fast)), box-shadow var(--lyra-button-transition-duration, var(--lyra-motion-duration-fast)), color var(--lyra-button-transition-duration, var(--lyra-motion-duration-fast)); } .lyra-btn:hover { transform: translateY(-1px); box-shadow: var(--shadow-sm); } .lyra-btn:active { transform: translateY(0); } .lyra-btn:disabled, .lyra-btn[aria-disabled=true] { opacity: var(--lyra-button-disabled-opacity, var(--opacity-disabled)); cursor: not-allowed; } .lyra-btn[aria-busy=true] { cursor: progress; } .lyra-btn--primary { --btn-bg: var(--lyra-button-primary-background, var(--primary)); --btn-fg: var(--lyra-button-primary-foreground, var(--primary-text)); --btn-border: transparent; } .lyra-btn--primary:hover { --btn-bg: var(--lyra-button-primary-background-hover, var(--primary-hover)); } .lyra-btn--soft { --btn-bg: var(--primary-soft); --btn-fg: var(--primary); --btn-border: transparent; box-shadow: none; } .lyra-btn--ghost { --btn-bg: transparent; --btn-fg: var(--text-2); --btn-border: transparent; box-shadow: none; } .lyra-btn--ghost:hover { --btn-bg: var(--surface-2); --btn-fg: var(--text-1); } .lyra-btn--danger { --btn-bg: var(--danger); --btn-fg: #fff; --btn-border: transparent; } .lyra-btn--icon { width: var(--lyra-button-height-default, var(--control-height-default)); padding: 0; } .lyra-btn--sm { min-height: var(--lyra-button-height-compact, var(--control-height-compact)); padding: 0.5rem 0.7rem; font-size: var(--lyra-type-caption); } /* Forms */ .lyra-field { display: grid; gap: 0.45rem; } .lyra-label { color: var(--text-1); font-size: var(--lyra-type-caption); font-weight: 720; letter-spacing: 0.01em; } .lyra-help { color: var(--text-3); font-size: var(--lyra-type-caption); } .lyra-input, .lyra-select, .lyra-textarea { width: 100%; color: var(--lyra-input-foreground, var(--text-1)); background: var(--lyra-input-background, var(--surface-1)); border: 1px solid var(--lyra-input-border, var(--control-border)); border-radius: var(--lyra-input-radius, var(--radius-md)); box-shadow: inset 0 1px 0 var(--hairline), var(--shadow-xs); outline: none; transition: border-color var(--lyra-motion-duration-fast), box-shadow var(--lyra-motion-duration-fast), background var(--lyra-motion-duration-fast); } .lyra-input { min-height: var(--lyra-input-height, var(--control-height-default)); padding: var(--lyra-input-padding-block, 0.7rem) var(--lyra-input-padding-inline, 0.8rem); } .lyra-select { min-height: var(--lyra-select-height, var(--control-height-default)); padding: var(--lyra-input-padding-block, 0.7rem) var(--lyra-select-padding-inline, 0.8rem); color: var(--lyra-select-foreground, var(--text-1)); background: var(--lyra-select-background, var(--surface-1)); border-color: var(--lyra-select-border, var(--control-border)); border-radius: var(--lyra-select-radius, var(--radius-md)); } .lyra-textarea { min-height: 8rem; padding: 0.8rem; resize: vertical; } .lyra-input::placeholder, .lyra-textarea::placeholder { color: var(--lyra-input-placeholder, var(--text-3)); } .lyra-input:hover, .lyra-select:hover, .lyra-textarea:hover { border-color: var(--border-strong); } .lyra-input:focus, .lyra-select:focus, .lyra-textarea:focus { border-color: var(--lyra-input-focus-color, var(--focus)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--lyra-input-focus-color, var(--focus)) 18%, transparent), var(--shadow-xs); } .lyra-select:focus { border-color: var(--lyra-select-focus-color, var(--focus)); } :where(.lyra-input, .lyra-select, .lyra-textarea)[aria-invalid=true] { border-color: var(--lyra-input-invalid-border, var(--status-danger-border)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--lyra-input-invalid-border, var(--status-danger-border)) 16%, transparent); } :where(.lyra-input, .lyra-select, .lyra-textarea):read-only { background: var(--surface-2); } :where(.lyra-input, .lyra-textarea):disabled { opacity: var(--lyra-input-disabled-opacity, var(--opacity-disabled)); cursor: not-allowed; } .lyra-select:disabled { opacity: var(--lyra-select-disabled-opacity, var(--opacity-disabled)); cursor: not-allowed; } .lyra-field[data-invalid=true] .lyra-help { color: var(--status-danger-fg); } .lyra-search { position: relative; display: flex; align-items: center; min-width: min(34rem, 45vw); } .lyra-search .lyra-input { padding-left: 2.55rem; } .lyra-search__icon { position: absolute; left: 0.85rem; color: var(--text-3); pointer-events: none; } /* Tabs: Details / Prepare / Evaluation / Kit / Activity */ .lyra-tabs { display: flex; align-items: center; gap: var(--lyra-tabs-gap, var(--space-1)); padding: 0.3rem; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow-x: auto; scrollbar-width: none; } .lyra-tabs::-webkit-scrollbar { display: none; } .lyra-tab { position: relative; flex: 0 0 auto; min-height: 2.35rem; padding: var(--lyra-tabs-padding-block, 0.58rem) var(--lyra-tabs-padding-inline, 0.85rem); color: var(--lyra-tabs-foreground, var(--text-2)); background: transparent; border: 0; border-radius: var(--lyra-tabs-radius, calc(var(--radius-lg) - 0.22rem)); font-size: var(--lyra-type-label); font-weight: 680; transition: color var(--lyra-motion-duration-fast), background var(--lyra-motion-duration-fast), box-shadow var(--lyra-motion-duration-fast); } .lyra-tab:hover { color: var(--text-1); } .lyra-tab[aria-selected=true], .lyra-tab.is-active { color: var(--lyra-tabs-active-foreground, var(--text-1)); background: var(--lyra-tabs-active-background, var(--surface-1)); box-shadow: var(--shadow-sm); } .lyra-tab[aria-disabled=true] { opacity: var(--opacity-disabled); cursor: not-allowed; } .lyra-tab__count { display: inline-grid; place-items: center; min-width: 1.25rem; height: 1.25rem; margin-left: 0.35rem; padding-inline: 0.3rem; color: var(--text-3); background: var(--surface-3); border-radius: var(--radius-pill); font-size: 0.625rem; font-weight: 800; } /* Chips & status */ .lyra-chip, .lyra-badge, .lyra-stage { display: inline-flex; align-items: center; gap: var(--lyra-badge-gap, 0.35rem); min-height: 1.65rem; padding: var(--lyra-badge-padding-block, 0.34rem) var(--lyra-badge-padding-inline, 0.55rem); border-radius: var(--lyra-badge-radius, var(--radius-pill)); font-size: var(--lyra-type-micro); font-weight: 760; letter-spacing: 0.015em; white-space: nowrap; } .lyra-chip, .lyra-badge { color: var(--lyra-badge-foreground, var(--text-2)); background: var(--lyra-badge-background, var(--surface-2)); border: 1px solid var(--lyra-badge-border, var(--border)); } .lyra-stage { color: var(--stage-fg, var(--text-2)); background: var(--stage-bg, var(--surface-2)); border: 1px solid color-mix(in srgb, var(--stage-fg, var(--text-2)) 17%, transparent); } .lyra-stage[data-stage=saved] { --stage-fg: var(--accent); --stage-bg: var(--accent-soft); } .lyra-stage[data-stage=considering] { --stage-fg: var(--accent); --stage-bg: var(--accent-soft); } .lyra-stage[data-stage=apply] { --stage-fg: var(--primary); --stage-bg: var(--primary-soft); } .lyra-stage[data-stage=applying] { --stage-fg: var(--primary); --stage-bg: var(--primary-soft); } .lyra-stage[data-stage=applied] { --stage-fg: var(--info); --stage-bg: var(--info-soft); } .lyra-stage[data-stage=interviewing] { --stage-fg: var(--success); --stage-bg: var(--success-soft); } .lyra-stage[data-stage=offer] { --stage-fg: var(--warning); --stage-bg: var(--warning-soft); } .lyra-stage[data-stage=closed] { --stage-fg: var(--text-3); --stage-bg: var(--surface-2); } .lyra-stage[data-stage=rejected] { --stage-fg: var(--danger); --stage-bg: var(--danger-soft); } .lyra-stage[data-stage=not-selected] { --stage-fg: var(--danger); --stage-bg: var(--danger-soft); } /* Alerts */ .lyra-alert { --alert-fg: var(--text-1); --alert-bg: var(--lyra-alert-background, var(--surface-2)); --alert-border: var(--border-strong); display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--lyra-alert-gap, var(--space-3)); padding: var(--lyra-alert-padding, var(--space-4)); color: var(--alert-fg); background: var(--alert-bg); border: 1px solid var(--alert-border); border-radius: var(--lyra-alert-radius, var(--radius-md)); } .lyra-alert[data-status=info] { --alert-fg: var(--lyra-alert-info-fg, var(--status-info-fg)); --alert-bg: var(--lyra-alert-info-bg, var(--status-info-bg)); --alert-border: var(--lyra-alert-info-border, var(--status-info-border)); } .lyra-alert[data-status=success] { --alert-fg: var(--lyra-alert-success-fg, var(--status-success-fg)); --alert-bg: var(--lyra-alert-success-bg, var(--status-success-bg)); --alert-border: var(--lyra-alert-success-border, var(--status-success-border)); } .lyra-alert[data-status=warning] { --alert-fg: var(--lyra-alert-warning-fg, var(--status-warning-fg)); --alert-bg: var(--lyra-alert-warning-bg, var(--status-warning-bg)); --alert-border: var(--lyra-alert-warning-border, var(--status-warning-border)); } .lyra-alert[data-status=danger] { --alert-fg: var(--lyra-alert-danger-fg, var(--status-danger-fg)); --alert-bg: var(--lyra-alert-danger-bg, var(--status-danger-bg)); --alert-border: var(--lyra-alert-danger-border, var(--status-danger-border)); } /* Charts */ .lyra-chart { color: var(--text-1); background: var(--lyra-chart-background, var(--surface-1)); border: 1px solid var(--lyra-chart-border, var(--border)); border-radius: var(--lyra-chart-radius, var(--radius-lg)); padding: var(--lyra-chart-padding, var(--space-4)); } .lyra-chart__legend { display: flex; flex-wrap: wrap; gap: var(--lyra-chart-gap, var(--space-3)); color: var(--text-2); } .lyra-chart__table { margin-top: var(--space-4); } /* Tooltip */ .lyra-tooltip { z-index: var(--lyra-tooltip-z-index, var(--z-popover)); max-width: var(--lyra-tooltip-max-width, 20rem); padding: var(--lyra-tooltip-padding-block, 0.45rem) var(--lyra-tooltip-padding-inline, 0.6rem); color: var(--lyra-tooltip-foreground, var(--text-inverse)); background: var(--lyra-tooltip-background, var(--text-1)); border-radius: var(--lyra-tooltip-radius, var(--radius-sm)); box-shadow: var(--shadow-sm); font-size: var(--lyra-type-caption); } .lyra-tooltip[hidden] { display: none; } /* Metric cards */ .lyra-metric-card { min-height: 8.75rem; position: relative; overflow: hidden; } .lyra-metric-card::after { content: ""; position: absolute; width: 7rem; height: 7rem; right: -2.5rem; top: -3rem; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--primary) 15%, transparent), transparent 68%); pointer-events: none; } .lyra-metric-card__label { color: var(--text-3); font-size: var(--lyra-type-caption); font-weight: 700; } .lyra-metric-card__value { margin-top: 0.4rem; font-size: clamp(1.8rem, 3vw, 2.6rem); font-weight: 760; letter-spacing: -0.05em; line-height: 1; } .lyra-metric-card__delta { margin-top: 0.7rem; color: var(--text-2); font-size: var(--lyra-type-caption); } /* Job cards */ .lyra-job-card { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--space-4); align-items: start; } .lyra-job-card__logo { display: grid; place-items: center; width: 3rem; height: 3rem; overflow: hidden; color: var(--text-1); background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-md); font-weight: 800; } .lyra-job-card__title { font-size: var(--fs-lg); font-weight: 730; letter-spacing: -0.02em; } .lyra-job-card__company { margin-top: 0.15rem; color: var(--text-2); font-size: var(--lyra-type-label); } .lyra-job-card__meta { display: flex; flex-wrap: wrap; gap: 0.4rem 0.75rem; margin-top: 0.8rem; color: var(--text-3); font-size: var(--lyra-type-caption); } .lyra-job-card__actions { display: flex; gap: 0.4rem; } /* Fit / readiness score */ .lyra-score { --score: 72; --score-color: var(--primary); position: relative; display: grid; place-items: center; width: 4.5rem; aspect-ratio: 1; border-radius: 50%; background: conic-gradient(var(--score-color) calc(var(--score) * 1%), var(--surface-3) 0); } .lyra-score::before { content: ""; width: 3.55rem; aspect-ratio: 1; border-radius: 50%; background: var(--surface-1); box-shadow: inset 0 0 0 1px var(--hairline); } .lyra-score__value { position: absolute; font-weight: 800; font-size: var(--lyra-type-label); } .lyra-score[data-band=high] { --score-color: var(--success); } .lyra-score[data-band=medium] { --score-color: var(--warning); } .lyra-score[data-band=low] { --score-color: var(--danger); } /* Pipeline */ .lyra-pipeline { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(17rem, 1fr); gap: var(--space-4); overflow-x: auto; padding-bottom: var(--space-2); scroll-snap-type: x proximity; } .lyra-pipeline-column { scroll-snap-align: start; min-height: 28rem; padding: var(--space-3); background: color-mix(in srgb, var(--surface-2) 88%, transparent); border: 1px solid var(--border); border-radius: var(--radius-lg); } .lyra-pipeline-column__header { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: 0.3rem 0.35rem 0.8rem; color: var(--text-2); font-size: var(--lyra-type-caption); font-weight: 760; letter-spacing: 0.03em; text-transform: uppercase; } .lyra-pipeline-card { margin-top: var(--space-2); padding: var(--space-4); background: var(--surface-1); border: 1px solid var(--border); border-radius: var(--radius-md); box-shadow: var(--shadow-xs); } .lyra-pipeline-card:hover { border-color: var(--border-strong); box-shadow: var(--shadow-sm); } /* Progress */ .lyra-progress { height: 0.48rem; overflow: hidden; background: var(--surface-3); border-radius: var(--radius-pill); } .lyra-progress__bar { width: var(--progress, 0%); height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--primary), var(--accent)); transition: width var(--lyra-motion-duration-slow) var(--lyra-motion-ease-out); } /* Table */ .lyra-table-wrap { overflow: auto; border: 1px solid var(--lyra-table-border, var(--border)); border-radius: var(--lyra-table-radius, var(--radius-lg)); background: var(--lyra-table-background, var(--surface-1)); } .lyra-table { width: 100%; border-collapse: collapse; min-width: 46rem; } .lyra-table th { padding: var(--lyra-table-cell-padding-block, 0.8rem) var(--lyra-table-cell-padding-inline, 1rem); color: var(--lyra-table-header-foreground, var(--text-3)); background: var(--lyra-table-header-background, var(--surface-2)); border-bottom: 1px solid var(--lyra-table-border, var(--border)); font-size: var(--lyra-type-micro); font-weight: 780; letter-spacing: 0.065em; text-align: left; text-transform: uppercase; } .lyra-table td { padding: var(--lyra-table-body-padding-block, 0.9rem) var(--lyra-table-cell-padding-inline, 1rem); border-bottom: 1px solid var(--hairline); color: var(--text-2); } .lyra-table tr:last-child td { border-bottom: 0; } .lyra-table tbody tr { transition: background var(--lyra-motion-duration-fast); } .lyra-table tbody tr:hover { background: var(--lyra-table-row-hover, var(--surface-2)); } /* Activity timeline */ .lyra-timeline { position: relative; display: grid; gap: var(--space-4); } .lyra-timeline::before { content: ""; position: absolute; left: 0.52rem; top: 0.65rem; bottom: 0.65rem; width: 1px; background: var(--border); } .lyra-timeline__item { position: relative; display: grid; grid-template-columns: 1.1rem minmax(0, 1fr); gap: var(--space-3); } .lyra-timeline__dot { z-index: 1; width: 0.7rem; height: 0.7rem; margin-top: 0.38rem; border-radius: 50%; background: var(--primary); box-shadow: 0 0 0 4px var(--surface-1), 0 0 0 5px var(--border); } .lyra-timeline__title { color: var(--text-1); font-weight: 680; } .lyra-timeline__meta { margin-top: 0.18rem; color: var(--text-3); font-size: var(--lyra-type-caption); } /* Callouts */ .lyra-callout { display: grid; grid-template-columns: auto 1fr; gap: var(--space-3); padding: var(--space-4); border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface-2); } .lyra-callout[data-tone=success] { background: var(--success-soft); border-color: color-mix(in srgb, var(--success) 22%, transparent); } .lyra-callout[data-tone=warning] { background: var(--warning-soft); border-color: color-mix(in srgb, var(--warning) 22%, transparent); } .lyra-callout[data-tone=danger] { background: var(--danger-soft); border-color: color-mix(in srgb, var(--danger) 22%, transparent); } .lyra-callout[data-tone=info] { background: var(--info-soft); border-color: color-mix(in srgb, var(--info) 22%, transparent); } /* Modal */ .lyra-modal-backdrop { position: fixed; inset: 0; display: grid; place-items: center; padding: var(--space-4); background: rgb(2, 8, 18, var(--opacity-overlay)); backdrop-filter: blur(10px); z-index: var(--lyra-dialog-z-index, var(--z-modal)); } .lyra-modal, .lyra-dialog { width: min(var(--lyra-dialog-max-width, 42rem), 100%); max-height: min(85vh, 54rem); overflow: auto; color: var(--lyra-dialog-foreground, var(--text-1)); background: var(--lyra-dialog-background, var(--surface-1)); border: 1px solid var(--lyra-dialog-border, var(--border-strong)); border-radius: var(--lyra-dialog-radius, var(--radius-xl)); box-shadow: var(--shadow-lg); } .lyra-dialog::backdrop { background: rgb(2, 8, 18, var(--opacity-overlay)); backdrop-filter: blur(10px); } .lyra-modal__header { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: var(--space-5); border-bottom: 1px solid var(--hairline); } .lyra-modal__body { padding: var(--space-5); } .lyra-modal__footer { display: flex; justify-content: flex-end; gap: var(--space-2); padding: var(--space-4) var(--space-5); border-top: 1px solid var(--hairline); } /* Toast */ .lyra-toast { z-index: var(--z-toast); display: flex; align-items: flex-start; gap: var(--space-3); width: min(26rem, 100vw - 2rem); padding: 0.9rem 1rem; background: var(--surface-glass); border: 1px solid var(--border-strong); border-radius: var(--radius-lg); backdrop-filter: blur(20px); box-shadow: var(--shadow-lg); } /* Empty state */ .lyra-empty { display: grid; justify-items: center; text-align: center; padding: clamp(2rem, 6vw, 5rem) var(--space-6); } .lyra-empty__icon { display: grid; place-items: center; width: 4rem; height: 4rem; margin-bottom: var(--space-4); color: var(--primary); background: var(--primary-soft); border-radius: var(--radius-xl); } .lyra-empty p { max-width: 34rem; margin-top: var(--space-2); } .lyra-empty .lyra-btn { margin-top: var(--space-5); } /* Skeleton */ .lyra-skeleton { position: relative; overflow: hidden; background: var(--surface-3); border-radius: var(--radius-sm); } .lyra-skeleton::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--text-1) 7%, transparent), transparent); animation: lyra-shimmer var(--lyra-motion-duration-shimmer) infinite; } @keyframes lyra-shimmer { to { transform: translateX(100%); } } /* Command palette */ .lyra-command { z-index: var(--z-command); width: min(44rem, 100vw - 2rem); overflow: hidden; background: var(--surface-glass); border: 1px solid var(--border-strong); border-radius: var(--radius-xl); backdrop-filter: blur(28px) saturate(135%); box-shadow: var(--shadow-lg); } .lyra-command__input { width: 100%; min-height: 4rem; padding: 0 1.2rem; color: var(--text-1); background: transparent; border: 0; border-bottom: 1px solid var(--hairline); outline: 0; font-size: var(--fs-lg); } .lyra-command__results { max-height: 24rem; overflow: auto; padding: 0.45rem; } .lyra-command__item { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); min-height: 2.7rem; padding: 0.55rem 0.7rem; border-radius: var(--radius-md); color: var(--text-2); } .lyra-command__item:hover, .lyra-command__item[aria-selected=true] { color: var(--text-1); background: var(--surface-2); } } @layer utilities { .u-text-primary { color: var(--text-1) !important; } .u-text-secondary { color: var(--text-2) !important; } .u-text-muted { color: var(--text-3) !important; } .u-text-brand { color: var(--primary) !important; } .u-text-success { color: var(--success) !important; } .u-text-danger { color: var(--danger) !important; } .u-sr-only { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; } .u-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .u-stack-xs > * + * { margin-top: var(--space-2); } .u-stack-sm > * + * { margin-top: var(--space-3); } .u-stack-md > * + * { margin-top: var(--space-4); } .u-stack-lg > * + * { margin-top: var(--space-6); } .u-cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); } .u-divider { height: 1px; background: var(--hairline); border: 0; } } @media (forced-colors: active) { .lyra-card, .lyra-panel, .lyra-btn, .lyra-input, .lyra-select, .lyra-textarea, .lyra-alert, .lyra-tooltip { border: 1px solid CanvasText; } .lyra-skeleton::after { display: none; } } @media (prefers-contrast: more) { :root { --border: var(--border-strong); --hairline: var(--border-strong); } .lyra-card, .lyra-panel, .lyra-btn, .lyra-input, .lyra-select, .lyra-textarea, .lyra-alert { border-width: 2px; } } /* ========================================================================== CHROMATIC EDITION Reference-derived swatch ramps + theme-safe multi-colour gradients. ========================================================================== */ @layer chromatic { :root { /* 20 reference-derived color families; 11 production swatches each. */ --lyra-marine-50: #e9f9f7; --lyra-marine-100: #c1efe8; --lyra-marine-200: #a6e8de; --lyra-marine-300: #84e0d1; --lyra-marine-400: #58ccb8; --lyra-marine-500: #2db7a0; --lyra-marine-600: #259784; --lyra-marine-700: #1e7a6b; --lyra-marine-800: #1a665b; --lyra-marine-900: #15524c; --lyra-marine-950: #103a39; --lyra-marine-on-500: #07111f; --lyra-cobalt-50: #e6ecfc; --lyra-cobalt-100: #bac9f7; --lyra-cobalt-200: #9cb1f3; --lyra-cobalt-300: #7593ef; --lyra-cobalt-400: #466cde; --lyra-cobalt-500: #1644ce; --lyra-cobalt-600: #1238aa; --lyra-cobalt-700: #0f2d89; --lyra-cobalt-800: #0d2774; --lyra-cobalt-900: #0b215f; --lyra-cobalt-950: #091945; --lyra-cobalt-on-500: #fbf5ee; --lyra-success-50: #e0f9e9; --lyra-success-100: #a9efc1; --lyra-success-200: #8febae; --lyra-success-300: #6de595; --lyra-success-400: #47d074; --lyra-success-500: #21bb54; --lyra-success-600: #1b9b46; --lyra-success-700: #167e39; --lyra-success-800: #136932; --lyra-success-900: #10552c; --lyra-success-950: #0c3b24; --lyra-success-on-500: #07111f; --lyra-professional-50: #e9f1f9; --lyra-professional-100: #c1d8ef; --lyra-professional-200: #a6c7e8; --lyra-professional-300: #84b2e0; --lyra-professional-400: #5892cc; --lyra-professional-500: #2d72b7; --lyra-professional-600: #255e97; --lyra-professional-700: #1e4c7a; --lyra-professional-800: #1a4068; --lyra-professional-900: #153555; --lyra-professional-950: #10263f; --lyra-professional-on-500: #fbf5ee; --lyra-analytics-50: #e8f8fb; --lyra-analytics-100: #bfebf3; --lyra-analytics-200: #a5e3ef; --lyra-analytics-300: #83d8e9; --lyra-analytics-400: #54c6dd; --lyra-analytics-500: #24b4d1; --lyra-analytics-600: #1f99b1; --lyra-analytics-700: #1a8094; --lyra-analytics-800: #166b7d; --lyra-analytics-900: #125666; --lyra-analytics-950: #0e3c4a; --lyra-analytics-on-500: #07111f; --lyra-tech-50: #f1eaf8; --lyra-tech-100: #d8c5eb; --lyra-tech-200: #c7ace3; --lyra-tech-300: #b28cd8; --lyra-tech-400: #9262c2; --lyra-tech-500: #7239ac; --lyra-tech-600: #5e2f8e; --lyra-tech-700: #4c2672; --lyra-tech-800: #3f2161; --lyra-tech-900: #321c50; --lyra-tech-950: #23163b; --lyra-tech-on-500: #fbf5ee; --lyra-precision-50: #e1e1f7; --lyra-precision-100: #adadea; --lyra-precision-200: #9292e3; --lyra-precision-300: #7070db; --lyra-precision-400: #4c4cbf; --lyra-precision-500: #2828a3; --lyra-precision-600: #202083; --lyra-precision-700: #191966; --lyra-precision-800: #151657; --lyra-precision-900: #121448; --lyra-precision-950: #0d1136; --lyra-precision-on-500: #fbf5ee; --lyra-alert-50: #fbe8df; --lyra-alert-100: #f5c0a6; --lyra-alert-200: #f2ae8c; --lyra-alert-300: #ee976b; --lyra-alert-400: #e27641; --lyra-alert-500: #d55617; --lyra-alert-600: #b64a14; --lyra-alert-700: #9a3e11; --lyra-alert-800: #7f3512; --lyra-alert-900: #642c12; --lyra-alert-950: #442013; --lyra-alert-on-500: #07111f; --lyra-emerald-50: #dffbf0; --lyra-emerald-100: #a6f5d4; --lyra-emerald-200: #8cf2c7; --lyra-emerald-300: #6beeb7; --lyra-emerald-400: #41e29e; --lyra-emerald-500: #17d586; --lyra-emerald-600: #14b673; --lyra-emerald-700: #119a61; --lyra-emerald-800: #0f8053; --lyra-emerald-900: #0d6745; --lyra-emerald-950: #0a4734; --lyra-emerald-on-500: #07111f; --lyra-growth-50: #def4de; --lyra-growth-100: #a2e0a2; --lyra-growth-200: #8cd98c; --lyra-growth-300: #70cf70; --lyra-growth-400: #52b652; --lyra-growth-500: #349e34; --lyra-growth-600: #2c852c; --lyra-growth-700: #246d24; --lyra-growth-800: #1e5b21; --lyra-growth-900: #194a1e; --lyra-growth-950: #12341b; --lyra-growth-on-500: #07111f; --lyra-network-50: #f0edf7; --lyra-network-100: #d5cce9; --lyra-network-200: #c5b8e0; --lyra-network-300: #b09ed5; --lyra-network-400: #9178c4; --lyra-network-500: #7251b4; --lyra-network-600: #63469e; --lyra-network-700: #553b89; --lyra-network-800: #473274; --lyra-network-900: #382a5f; --lyra-network-950: #271f45; --lyra-network-on-500: #fbf5ee; --lyra-neutral-50: #f4f5f6; --lyra-neutral-100: #e0e3e6; --lyra-neutral-200: #cbd0d5; --lyra-neutral-300: #b0b7bf; --lyra-neutral-400: #8a939c; --lyra-neutral-500: #636f7a; --lyra-neutral-600: #4f5861; --lyra-neutral-700: #3c434a; --lyra-neutral-800: #323940; --lyra-neutral-900: #282f37; --lyra-neutral-950: #1c232b; --lyra-neutral-on-500: #fbf5ee; --lyra-slate-50: #eef2f4; --lyra-slate-100: #d1dbe0; --lyra-slate-200: #bdcbd2; --lyra-slate-300: #a3b7c1; --lyra-slate-400: #7f98a5; --lyra-slate-500: #5b7a89; --lyra-slate-600: #4b6571; --lyra-slate-700: #3d515b; --lyra-slate-800: #33444e; --lyra-slate-900: #293841; --lyra-slate-950: #1d2832; --lyra-slate-on-500: #fbf5ee; --lyra-energy-50: #fbdfed; --lyra-energy-100: #f5a6cd; --lyra-energy-200: #f28cbf; --lyra-energy-300: #ee6bad; --lyra-energy-400: #e24192; --lyra-energy-500: #d51776; --lyra-energy-600: #b61465; --lyra-energy-700: #9a1155; --lyra-energy-800: #7f1049; --lyra-energy-900: #640f3e; --lyra-energy-950: #440e2f; --lyra-energy-on-500: #fbf5ee; --lyra-ruby-50: #f8d9de; --lyra-ruby-100: #ec95a4; --lyra-ruby-200: #e87c8f; --lyra-ruby-300: #e25d74; --lyra-ruby-400: #ca3e56; --lyra-ruby-500: #b31f38; --lyra-ruby-600: #961a2f; --lyra-ruby-700: #7b1526; --lyra-ruby-800: #661323; --lyra-ruby-900: #511120; --lyra-ruby-950: #370f1c; --lyra-ruby-on-500: #fbf5ee; --lyra-active-50: #fef8e7; --lyra-active-100: #fbebbd; --lyra-active-200: #fae4a6; --lyra-active-300: #f8dc89; --lyra-active-400: #f6d05e; --lyra-active-500: #f4c332; --lyra-active-600: #ecb81e; --lyra-active-700: #e4ae0c; --lyra-active-800: #bc910d; --lyra-active-900: #94730f; --lyra-active-950: #634f11; --lyra-active-on-500: #07111f; --lyra-geo-50: #f1ece0; --lyra-geo-100: #d9c9a8; --lyra-geo-200: #d1bc94; --lyra-geo-300: #c6ac7a; --lyra-geo-400: #ac925c; --lyra-geo-500: #93773f; --lyra-geo-600: #7b6435; --lyra-geo-700: #65522b; --lyra-geo-800: #544527; --lyra-geo-900: #423823; --lyra-geo-950: #2d291e; --lyra-geo-on-500: #07111f; --lyra-value-50: #fcf9e7; --lyra-value-100: #f7eebd; --lyra-value-200: #f4e7a3; --lyra-value-300: #f1de82; --lyra-value-400: #ecd251; --lyra-value-500: #e6c520; --lyra-value-600: #caad19; --lyra-value-700: #b19613; --lyra-value-800: #927d13; --lyra-value-900: #736413; --lyra-value-950: #4d4514; --lyra-value-on-500: #07111f; --lyra-sunset-50: #fae5e1; --lyra-sunset-100: #f0b8ac; --lyra-sunset-200: #eca596; --lyra-sunset-300: #e78c79; --lyra-sunset-400: #df684f; --lyra-sunset-500: #d74325; --lyra-sunset-600: #bc3b20; --lyra-sunset-700: #a4331c; --lyra-sunset-800: #872c1b; --lyra-sunset-900: #6b2519; --lyra-sunset-950: #481c17; --lyra-sunset-on-500: #07111f; --lyra-clarity-50: #f7fbfb; --lyra-clarity-100: #eaf4f4; --lyra-clarity-200: #d8eaea; --lyra-clarity-300: #c1dddd; --lyra-clarity-400: #9ecaca; --lyra-clarity-500: #7cb8b8; --lyra-clarity-600: #68acac; --lyra-clarity-700: #56a0a0; --lyra-clarity-800: #478587; --lyra-clarity-900: #396a6e; --lyra-clarity-950: #274a4f; --lyra-clarity-on-500: #07111f; /* Discrete 15-cell ramps inspired by the supplied swatch reference. */ --ramp-marine: linear-gradient(90deg, #1e7a6b 0.0000% 6.6667%, #228b7a 6.6667% 13.3333%, #279d89 13.3333% 20.0000%, #2bae98 20.0000% 26.6667%, #39bda7 26.6667% 33.3333%, #52c9b5 33.3333% 40.0000%, #6bd4c3 40.0000% 46.6667%, #84e0d1 46.6667% 53.3333%, #95e4d8 53.3333% 60.0000%, #a7e9de 60.0000% 66.6667%, #b8ede5 66.6667% 73.3333%, #c6f0ea 73.3333% 80.0000%, #d0f3ee 80.0000% 86.6667%, #d9f5f1 86.6667% 93.3333%, #e3f8f5 93.3333% 100.0000%); --ramp-cobalt: linear-gradient(90deg, #0f2d89 0.0000% 6.6667%, #11349d 6.6667% 13.3333%, #133ab0 13.3333% 20.0000%, #1541c4 20.0000% 26.6667%, #244fd3 26.6667% 33.3333%, #3f66dc 33.3333% 40.0000%, #5a7ce6 40.0000% 46.6667%, #7593ef 46.6667% 53.3333%, #89a2f1 53.3333% 60.0000%, #9cb2f4 60.0000% 66.6667%, #b0c1f6 66.6667% 73.3333%, #bfcdf8 73.3333% 80.0000%, #cad6f9 80.0000% 86.6667%, #d5defa 86.6667% 93.3333%, #e0e7fb 93.3333% 100.0000%); --ramp-success: linear-gradient(90deg, #167e39 0.0000% 6.6667%, #198f41 6.6667% 13.3333%, #1ca148 13.3333% 20.0000%, #1fb250 20.0000% 26.6667%, #2cc15d 26.6667% 33.3333%, #42cd70 33.3333% 40.0000%, #57d982 40.0000% 46.6667%, #6de595 46.6667% 53.3333%, #7ee8a2 53.3333% 60.0000%, #8febae 60.0000% 66.6667%, #a0eebb 66.6667% 73.3333%, #b0f0c6 73.3333% 80.0000%, #bdf3d0 80.0000% 86.6667%, #cbf5d9 86.6667% 93.3333%, #d8f8e3 93.3333% 100.0000%); --ramp-professional: linear-gradient(90deg, #1e4c7a 0.0000% 6.6667%, #22578b 6.6667% 13.3333%, #27629d 13.3333% 20.0000%, #2b6dae 20.0000% 26.6667%, #397bbd 26.6667% 33.3333%, #528dc9 33.3333% 40.0000%, #6ba0d4 40.0000% 46.6667%, #84b2e0 46.6667% 53.3333%, #95bde4 53.3333% 60.0000%, #a7c8e9 60.0000% 66.6667%, #b8d3ed 66.6667% 73.3333%, #c6dbf0 73.3333% 80.0000%, #d0e1f3 80.0000% 86.6667%, #d9e7f5 86.6667% 93.3333%, #e3edf8 93.3333% 100.0000%); --ramp-analytics: linear-gradient(90deg, #1a8094 0.0000% 6.6667%, #1d8fa5 6.6667% 13.3333%, #209eb7 13.3333% 20.0000%, #23adc8 20.0000% 26.6667%, #32b9d4 26.6667% 33.3333%, #4dc3db 33.3333% 40.0000%, #68cee2 40.0000% 46.6667%, #83d8e9 46.6667% 53.3333%, #94ddec 53.3333% 60.0000%, #a5e3ef 60.0000% 66.6667%, #b6e8f2 66.6667% 73.3333%, #c4edf4 73.3333% 80.0000%, #cef0f6 80.0000% 86.6667%, #d8f3f8 86.6667% 93.3333%, #e2f6fa 93.3333% 100.0000%); --ramp-tech: linear-gradient(90deg, #4c2672 0.0000% 6.6667%, #572b83 6.6667% 13.3333%, #623193 13.3333% 20.0000%, #6d36a4 20.0000% 26.6667%, #7b45b2 26.6667% 33.3333%, #8d5dbf 33.3333% 40.0000%, #a074cb 40.0000% 46.6667%, #b28cd8 46.6667% 53.3333%, #bd9cdd 53.3333% 60.0000%, #c8ade3 60.0000% 66.6667%, #d3bde8 66.6667% 73.3333%, #dbcaed 73.3333% 80.0000%, #e1d3f0 80.0000% 86.6667%, #e7dcf3 86.6667% 93.3333%, #ede5f6 93.3333% 100.0000%); --ramp-precision: linear-gradient(90deg, #191966 0.0000% 6.6667%, #1d1d77 6.6667% 13.3333%, #222289 13.3333% 20.0000%, #26269a 20.0000% 26.6667%, #3232ab 26.6667% 33.3333%, #4747bb 33.3333% 40.0000%, #5b5bcb 40.0000% 46.6667%, #7070db 46.6667% 53.3333%, #8181df 53.3333% 60.0000%, #9393e4 60.0000% 66.6667%, #a4a4e8 66.6667% 73.3333%, #b3b3ec 73.3333% 80.0000%, #c0c0ef 80.0000% 86.6667%, #cdcdf3 86.6667% 93.3333%, #dadaf6 93.3333% 100.0000%); --ramp-alert: linear-gradient(90deg, #9a3e11 0.0000% 6.6667%, #ab4513 6.6667% 13.3333%, #bc4c14 13.3333% 20.0000%, #cd5316 20.0000% 26.6667%, #d95f23 26.6667% 33.3333%, #e0723b 33.3333% 40.0000%, #e78453 40.0000% 46.6667%, #ee976b 46.6667% 53.3333%, #f0a37c 53.3333% 60.0000%, #f2ae8d 60.0000% 66.6667%, #f4ba9e 66.6667% 73.3333%, #f6c5ad 73.3333% 80.0000%, #f7cfbb 80.0000% 86.6667%, #f9d9c9 86.6667% 93.3333%, #fae3d7 93.3333% 100.0000%); --ramp-emerald: linear-gradient(90deg, #119a61 0.0000% 6.6667%, #13ab6c 6.6667% 13.3333%, #14bc76 13.3333% 20.0000%, #16cd81 20.0000% 26.6667%, #23d98d 26.6667% 33.3333%, #3be09b 33.3333% 40.0000%, #53e7a9 40.0000% 46.6667%, #6beeb7 46.6667% 53.3333%, #7cf0bf 53.3333% 60.0000%, #8df2c8 60.0000% 66.6667%, #9ef4d0 66.6667% 73.3333%, #adf6d7 73.3333% 80.0000%, #bbf7de 80.0000% 86.6667%, #c9f9e5 86.6667% 93.3333%, #d7faec 93.3333% 100.0000%); --ramp-growth: linear-gradient(90deg, #246d24 0.0000% 6.6667%, #297b29 6.6667% 13.3333%, #2d892d 13.3333% 20.0000%, #329732 20.0000% 26.6667%, #3da53d 26.6667% 33.3333%, #4eb34e 33.3333% 40.0000%, #5fc15f 40.0000% 46.6667%, #70cf70 46.6667% 53.3333%, #7ed47e 53.3333% 60.0000%, #8dd98d 60.0000% 66.6667%, #9bde9b 66.6667% 73.3333%, #a9e2a9 73.3333% 80.0000%, #b8e7b8 80.0000% 86.6667%, #c6ecc6 86.6667% 93.3333%, #d5f1d5 93.3333% 100.0000%); --ramp-network: linear-gradient(90deg, #553b89 0.0000% 6.6667%, #5d4195 6.6667% 13.3333%, #6648a2 13.3333% 20.0000%, #6e4eae 20.0000% 26.6667%, #7b5cb9 26.6667% 33.3333%, #8d72c2 33.3333% 40.0000%, #9e88cc 40.0000% 46.6667%, #b09ed5 46.6667% 53.3333%, #bbabdb 53.3333% 60.0000%, #c5b8e0 60.0000% 66.6667%, #d0c5e6 66.6667% 73.3333%, #d8d0eb 73.3333% 80.0000%, #dfd8ee 80.0000% 86.6667%, #e5e0f2 86.6667% 93.3333%, #ece8f5 93.3333% 100.0000%); --ramp-neutral: linear-gradient(90deg, #3c434a 0.0000% 6.6667%, #475058 6.6667% 13.3333%, #525c65 13.3333% 20.0000%, #5d6973 20.0000% 26.6667%, #6e7984 26.6667% 33.3333%, #848e98 33.3333% 40.0000%, #9aa2ab 40.0000% 46.6667%, #b0b7bf 46.6667% 53.3333%, #bec4ca 53.3333% 60.0000%, #cbd0d5 60.0000% 66.6667%, #d9dde0 66.6667% 73.3333%, #e2e5e8 73.3333% 80.0000%, #e7e9ec 80.0000% 86.6667%, #eceef0 86.6667% 93.3333%, #f1f2f4 93.3333% 100.0000%); --ramp-slate: linear-gradient(90deg, #3d515b 0.0000% 6.6667%, #465d68 6.6667% 13.3333%, #4e6875 13.3333% 20.0000%, #577482 20.0000% 26.6667%, #658391 26.6667% 33.3333%, #7a94a1 33.3333% 40.0000%, #8ea6b1 40.0000% 46.6667%, #a3b7c1 46.6667% 53.3333%, #b0c1ca 53.3333% 60.0000%, #bdccd3 60.0000% 66.6667%, #cad6dc 66.6667% 73.3333%, #d5dee2 73.3333% 80.0000%, #dce4e7 80.0000% 86.6667%, #e3e9ec 86.6667% 93.3333%, #eaeff1 93.3333% 100.0000%); --ramp-energy: linear-gradient(90deg, #9a1155 0.0000% 6.6667%, #ab135e 6.6667% 13.3333%, #bc1468 13.3333% 20.0000%, #cd1671 20.0000% 26.6667%, #d9237e 26.6667% 33.3333%, #e03b8e 33.3333% 40.0000%, #e7539d 40.0000% 46.6667%, #ee6bad 46.6667% 53.3333%, #f07cb6 53.3333% 60.0000%, #f28dbf 60.0000% 66.6667%, #f49ec8 66.6667% 73.3333%, #f6add1 73.3333% 80.0000%, #f7bbd9 80.0000% 86.6667%, #f9c9e0 86.6667% 93.3333%, #fad7e8 93.3333% 100.0000%); --ramp-ruby: linear-gradient(90deg, #7b1526 0.0000% 6.6667%, #8b182b 6.6667% 13.3333%, #9b1b30 13.3333% 20.0000%, #ab1e35 20.0000% 26.6667%, #ba2841 26.6667% 33.3333%, #c73a52 33.3333% 40.0000%, #d54b63 40.0000% 46.6667%, #e25d74 46.6667% 53.3333%, #e56d82 53.3333% 60.0000%, #e87d8f 60.0000% 66.6667%, #eb8d9d 66.6667% 73.3333%, #ed9dab 73.3333% 80.0000%, #f0aeb9 80.0000% 86.6667%, #f3bec8 86.6667% 93.3333%, #f6cfd6 93.3333% 100.0000%); --ramp-active: linear-gradient(90deg, #e4ae0c 0.0000% 6.6667%, #e9b417 6.6667% 13.3333%, #edba22 13.3333% 20.0000%, #f2c02d 20.0000% 26.6667%, #f5c73e 26.6667% 33.3333%, #f6ce57 33.3333% 40.0000%, #f7d570 40.0000% 46.6667%, #f8dc89 46.6667% 53.3333%, #f9e098 53.3333% 60.0000%, #fae5a7 60.0000% 66.6667%, #fbe9b6 66.6667% 73.3333%, #fbedc2 73.3333% 80.0000%, #fcf0cc 80.0000% 86.6667%, #fcf3d7 86.6667% 93.3333%, #fdf6e1 93.3333% 100.0000%); --ramp-geo: linear-gradient(90deg, #65522b 0.0000% 6.6667%, #725d31 6.6667% 13.3333%, #7f6736 13.3333% 20.0000%, #8c723c 20.0000% 26.6667%, #9a7f47 26.6667% 33.3333%, #a98e58 33.3333% 40.0000%, #b79d69 40.0000% 46.6667%, #c6ac7a 46.6667% 53.3333%, #cbb487 53.3333% 60.0000%, #d1bd94 60.0000% 66.6667%, #d6c5a1 66.6667% 73.3333%, #dccdaf 73.3333% 80.0000%, #e2d6bd 80.0000% 86.6667%, #e8deca 86.6667% 93.3333%, #eee7d8 93.3333% 100.0000%); --ramp-value: linear-gradient(90deg, #b19613 0.0000% 6.6667%, #c0a317 6.6667% 13.3333%, #cfb11a 13.3333% 20.0000%, #debe1e 20.0000% 26.6667%, #e8c92e 26.6667% 33.3333%, #ebd04a 33.3333% 40.0000%, #eed766 40.0000% 46.6667%, #f1de82 46.6667% 53.3333%, #f3e393 53.3333% 60.0000%, #f4e7a4 60.0000% 66.6667%, #f6ecb5 66.6667% 73.3333%, #f8efc2 73.3333% 80.0000%, #f9f2cc 80.0000% 86.6667%, #faf4d7 86.6667% 93.3333%, #fbf7e1 93.3333% 100.0000%); --ramp-sunset: linear-gradient(90deg, #a4331c 0.0000% 6.6667%, #b3381f 6.6667% 13.3333%, #c13c21 13.3333% 20.0000%, #d04124 20.0000% 26.6667%, #d94d31 26.6667% 33.3333%, #de6249 33.3333% 40.0000%, #e27761 40.0000% 46.6667%, #e78c79 46.6667% 53.3333%, #ea9988 53.3333% 60.0000%, #eca596 60.0000% 66.6667%, #efb2a5 66.6667% 73.3333%, #f1beb3 73.3333% 80.0000%, #f3c9c0 80.0000% 86.6667%, #f6d4cd 86.6667% 93.3333%, #f8dfda 93.3333% 100.0000%); --ramp-clarity: linear-gradient(90deg, #56a0a0 0.0000% 6.6667%, #61a7a7 6.6667% 13.3333%, #6caeae 13.3333% 20.0000%, #77b5b5 20.0000% 26.6667%, #86bdbd 26.6667% 33.3333%, #9ac8c8 33.3333% 40.0000%, #add2d2 40.0000% 46.6667%, #c1dddd 46.6667% 53.3333%, #cde4e4 53.3333% 60.0000%, #d8eaea 60.0000% 66.6667%, #e4f1f1 66.6667% 73.3333%, #ecf5f5 73.3333% 80.0000%, #eff7f7 80.0000% 86.6667%, #f3f8f8 86.6667% 93.3333%, #f6fafa 93.3333% 100.0000%); /* High-value multi-colour gradient recipes. */ --gradient-orbit: linear-gradient(135deg, var(--lyra-cobalt-700), var(--lyra-cobalt-500), var(--lyra-tech-500), var(--lyra-analytics-400)); --gradient-aurora: linear-gradient(120deg, var(--lyra-marine-600), var(--lyra-analytics-500), var(--lyra-cobalt-500), var(--lyra-tech-500)); --gradient-celestial: linear-gradient(135deg, var(--lyra-professional-700), var(--lyra-cobalt-600), var(--lyra-network-500), var(--lyra-tech-500), var(--lyra-energy-500)); --gradient-prism: linear-gradient(110deg, var(--lyra-cobalt-600), var(--lyra-tech-500), var(--lyra-energy-500), var(--lyra-alert-500), var(--lyra-active-500), var(--lyra-emerald-500), var(--lyra-analytics-500)); --gradient-signal: linear-gradient(120deg, var(--lyra-cobalt-600), var(--lyra-analytics-500), var(--lyra-emerald-500)); --gradient-horizon: linear-gradient(110deg, var(--lyra-sunset-600), var(--lyra-active-500), var(--lyra-emerald-500)); --gradient-nova: linear-gradient(125deg, var(--lyra-ruby-700), var(--lyra-energy-500), var(--lyra-tech-500)); --gradient-solar: linear-gradient(105deg, var(--lyra-ruby-700), var(--lyra-sunset-500), var(--lyra-alert-500), var(--lyra-active-500), var(--lyra-value-500)); --gradient-polar: linear-gradient(125deg, var(--lyra-marine-600), var(--lyra-clarity-500), var(--lyra-professional-500)); --gradient-growth: linear-gradient(120deg, var(--lyra-growth-700), var(--lyra-success-500), var(--lyra-emerald-400)); --gradient-intelligence: linear-gradient(125deg, var(--lyra-professional-700), var(--lyra-cobalt-500), var(--lyra-tech-500)); --gradient-clarity: linear-gradient(120deg, var(--lyra-slate-600), var(--lyra-clarity-500), var(--lyra-analytics-400)); --gradient-deep-space: linear-gradient(135deg, var(--lyra-neutral-950), var(--lyra-slate-900), var(--lyra-professional-800), var(--lyra-cobalt-800)); --gradient-lilac-dawn: linear-gradient(120deg, var(--lyra-network-600), var(--lyra-tech-400), var(--lyra-network-200)); --gradient-offer: linear-gradient(110deg, var(--lyra-active-600), var(--lyra-value-500), var(--lyra-emerald-500)); --gradient-interview: linear-gradient(120deg, var(--lyra-analytics-600), var(--lyra-emerald-500), var(--lyra-success-500)); --gradient-applied: linear-gradient(120deg, var(--lyra-professional-600), var(--lyra-cobalt-500), var(--lyra-analytics-500)); --gradient-saved: linear-gradient(120deg, var(--lyra-network-600), var(--lyra-tech-500)); --gradient-rejected: linear-gradient(120deg, var(--lyra-ruby-700), var(--lyra-energy-500)); --gradient-attention: linear-gradient(110deg, var(--lyra-alert-600), var(--lyra-active-500)); --gradient-compensation: linear-gradient(110deg, var(--lyra-geo-600), var(--lyra-value-500), var(--lyra-active-500)); --gradient-activity: linear-gradient(120deg, var(--lyra-cobalt-600), var(--lyra-tech-500), var(--lyra-energy-500)); --gradient-kit: linear-gradient(120deg, var(--lyra-marine-600), var(--lyra-cobalt-500)); --gradient-evaluation: linear-gradient(120deg, var(--lyra-tech-600), var(--lyra-energy-500), var(--lyra-ruby-500)); --gradient-spectrum: conic-gradient(from 215deg, var(--lyra-cobalt-500), var(--lyra-tech-500), var(--lyra-energy-500), var(--lyra-alert-500), var(--lyra-active-500), var(--lyra-emerald-500), var(--lyra-analytics-500), var(--lyra-cobalt-500)); --gradient-spectrum-soft: conic-gradient(from 215deg, var(--lyra-cobalt-200), var(--lyra-tech-200), var(--lyra-energy-200), var(--lyra-active-200), var(--lyra-emerald-200), var(--lyra-analytics-200), var(--lyra-cobalt-200)); --gradient-score: conic-gradient(from -90deg, var(--lyra-ruby-500), var(--lyra-alert-500) 22%, var(--lyra-active-500) 46%, var(--lyra-emerald-500) 73%, var(--lyra-cobalt-500)); --gradient-page: radial-gradient(circle at 12% -8%, rgb(82 114 230 / .13), transparent 31rem), radial-gradient(circle at 89% 4%, rgb(213 23 118 / .08), transparent 27rem), radial-gradient(circle at 68% 88%, rgb(23 213 134 / .07), transparent 30rem), var(--bg); --gradient-page-dark: radial-gradient(circle at 12% -8%, rgb(117 147 239 / .16), transparent 31rem), radial-gradient(circle at 89% 4%, rgb(238 107 173 / .09), transparent 27rem), radial-gradient(circle at 68% 88%, rgb(107 238 183 / .07), transparent 30rem), var(--bg); --gradient-aura-orbit-light: radial-gradient(ellipse 68% 82% at 8% 0%, color-mix(in srgb, var(--lyra-blue-500) 26%, transparent) 0%, transparent 72%), radial-gradient(ellipse 58% 70% at 92% 12%, color-mix(in srgb, var(--lyra-violet-500) 22%, transparent) 0%, transparent 70%), radial-gradient(ellipse 72% 56% at 62% 106%, color-mix(in srgb, var(--lyra-analytics-400) 16%, transparent) 0%, transparent 74%); --gradient-aura-orbit-dark: radial-gradient(ellipse 68% 82% at 8% 0%, color-mix(in srgb, var(--lyra-blue-500) 46%, transparent) 0%, transparent 72%), radial-gradient(ellipse 58% 70% at 92% 12%, color-mix(in srgb, var(--lyra-violet-500) 38%, transparent) 0%, transparent 70%), radial-gradient(ellipse 72% 56% at 62% 106%, color-mix(in srgb, var(--lyra-analytics-400) 28%, transparent) 0%, transparent 74%); --gradient-aura-horizon-dark: radial-gradient(ellipse 122% 76% at 50% 112%, color-mix(in srgb, var(--lyra-cobalt-500) 58%, transparent) 0%, color-mix(in srgb, var(--lyra-analytics-500) 22%, transparent) 42%, transparent 72%), radial-gradient(ellipse 82% 28% at 50% 92%, color-mix(in srgb, var(--lyra-blue-400) 26%, transparent) 0%, transparent 76%), linear-gradient(180deg, color-mix(in srgb, var(--lyra-tech-950) 34%, transparent), transparent 52%); --gradient-aura-veil-dark: radial-gradient(ellipse 84% 62% at 12% 16%, color-mix(in srgb, var(--lyra-tech-500) 34%, transparent) 0%, transparent 72%), linear-gradient(128deg, transparent 18%, color-mix(in srgb, var(--lyra-blue-500) 26%, transparent) 44%, color-mix(in srgb, var(--lyra-analytics-500) 18%, transparent) 58%, transparent 78%), radial-gradient(ellipse 68% 48% at 88% 84%, color-mix(in srgb, var(--lyra-network-500) 30%, transparent) 0%, transparent 74%); --gradient-glass-sheen: linear-gradient(135deg, rgb(255 255 255 / .14), transparent 34%, rgb(255 255 255 / .035) 72%, transparent); --gradient-hairline: linear-gradient(90deg, transparent, rgb(82 114 230 / .32), rgb(149 120 245 / .30), transparent); --chromatic-card-mix: 88%; --chromatic-glow-alpha: .14; } [data-theme=dark] { --chromatic-card-mix: 82%; --chromatic-glow-alpha: .22; } @media (prefers-color-scheme: dark) { :root:not([data-theme]) { --chromatic-card-mix: 82%; --chromatic-glow-alpha: .22; } } body { background: var(--gradient-page); background-attachment: fixed; } [data-theme=dark] body { background: var(--gradient-page-dark); background-attachment: fixed; } @media (prefers-color-scheme: dark) { :root:not([data-theme]) body { background: var(--gradient-page-dark); background-attachment: fixed; } } /* Any component can opt into a local accent without new component CSS. */ [data-lyra-accent=marine] { --accent-local: var(--lyra-marine-500); --accent-local-deep: var(--lyra-marine-700); --accent-local-soft: color-mix(in srgb, var(--lyra-marine-500) 14%, var(--surface-1)); --accent-local-pale: var(--lyra-marine-100); --accent-local-ramp: var(--ramp-marine); --accent-local-ink: var(--lyra-marine-on-500); } [data-lyra-accent=cobalt] { --accent-local: var(--lyra-cobalt-500); --accent-local-deep: var(--lyra-cobalt-700); --accent-local-soft: color-mix(in srgb, var(--lyra-cobalt-500) 14%, var(--surface-1)); --accent-local-pale: var(--lyra-cobalt-100); --accent-local-ramp: var(--ramp-cobalt); --accent-local-ink: var(--lyra-cobalt-on-500); } [data-lyra-accent=success] { --accent-local: var(--lyra-success-500); --accent-local-deep: var(--lyra-success-700); --accent-local-soft: color-mix(in srgb, var(--lyra-success-500) 14%, var(--surface-1)); --accent-local-pale: var(--lyra-success-100); --accent-local-ramp: var(--ramp-success); --accent-local-ink: var(--lyra-success-on-500); } [data-lyra-accent=professional] { --accent-local: var(--lyra-professional-500); --accent-local-deep: var(--lyra-professional-700); --accent-local-soft: color-mix(in srgb, var(--lyra-professional-500) 14%, var(--surface-1)); --accent-local-pale: var(--lyra-professional-100); --accent-local-ramp: var(--ramp-professional); --accent-local-ink: var(--lyra-professional-on-500); } [data-lyra-accent=analytics] { --accent-local: var(--lyra-analytics-500); --accent-local-deep: var(--lyra-analytics-700); --accent-local-soft: color-mix(in srgb, var(--lyra-analytics-500) 14%, var(--surface-1)); --accent-local-pale: var(--lyra-analytics-100); --accent-local-ramp: var(--ramp-analytics); --accent-local-ink: var(--lyra-analytics-on-500); } [data-lyra-accent=tech] { --accent-local: var(--lyra-tech-500); --accent-local-deep: var(--lyra-tech-700); --accent-local-soft: color-mix(in srgb, var(--lyra-tech-500) 14%, var(--surface-1)); --accent-local-pale: var(--lyra-tech-100); --accent-local-ramp: var(--ramp-tech); --accent-local-ink: var(--lyra-tech-on-500); } [data-lyra-accent=precision] { --accent-local: var(--lyra-precision-500); --accent-local-deep: var(--lyra-precision-700); --accent-local-soft: color-mix(in srgb, var(--lyra-precision-500) 14%, var(--surface-1)); --accent-local-pale: var(--lyra-precision-100); --accent-local-ramp: var(--ramp-precision); --accent-local-ink: var(--lyra-precision-on-500); } [data-lyra-accent=alert] { --accent-local: var(--lyra-alert-500); --accent-local-deep: var(--lyra-alert-700); --accent-local-soft: color-mix(in srgb, var(--lyra-alert-500) 14%, var(--surface-1)); --accent-local-pale: var(--lyra-alert-100); --accent-local-ramp: var(--ramp-alert); --accent-local-ink: var(--lyra-alert-on-500); } [data-lyra-accent=emerald] { --accent-local: var(--lyra-emerald-500); --accent-local-deep: var(--lyra-emerald-700); --accent-local-soft: color-mix(in srgb, var(--lyra-emerald-500) 14%, var(--surface-1)); --accent-local-pale: var(--lyra-emerald-100); --accent-local-ramp: var(--ramp-emerald); --accent-local-ink: var(--lyra-emerald-on-500); } [data-lyra-accent=growth] { --accent-local: var(--lyra-growth-500); --accent-local-deep: var(--lyra-growth-700); --accent-local-soft: color-mix(in srgb, var(--lyra-growth-500) 14%, var(--surface-1)); --accent-local-pale: var(--lyra-growth-100); --accent-local-ramp: var(--ramp-growth); --accent-local-ink: var(--lyra-growth-on-500); } [data-lyra-accent=network] { --accent-local: var(--lyra-network-500); --accent-local-deep: var(--lyra-network-700); --accent-local-soft: color-mix(in srgb, var(--lyra-network-500) 14%, var(--surface-1)); --accent-local-pale: var(--lyra-network-100); --accent-local-ramp: var(--ramp-network); --accent-local-ink: var(--lyra-network-on-500); } [data-lyra-accent=neutral] { --accent-local: var(--lyra-neutral-500); --accent-local-deep: var(--lyra-neutral-700); --accent-local-soft: color-mix(in srgb, var(--lyra-neutral-500) 14%, var(--surface-1)); --accent-local-pale: var(--lyra-neutral-100); --accent-local-ramp: var(--ramp-neutral); --accent-local-ink: var(--lyra-neutral-on-500); } [data-lyra-accent=slate] { --accent-local: var(--lyra-slate-500); --accent-local-deep: var(--lyra-slate-700); --accent-local-soft: color-mix(in srgb, var(--lyra-slate-500) 14%, var(--surface-1)); --accent-local-pale: var(--lyra-slate-100); --accent-local-ramp: var(--ramp-slate); --accent-local-ink: var(--lyra-slate-on-500); } [data-lyra-accent=energy] { --accent-local: var(--lyra-energy-500); --accent-local-deep: var(--lyra-energy-700); --accent-local-soft: color-mix(in srgb, var(--lyra-energy-500) 14%, var(--surface-1)); --accent-local-pale: var(--lyra-energy-100); --accent-local-ramp: var(--ramp-energy); --accent-local-ink: var(--lyra-energy-on-500); } [data-lyra-accent=ruby] { --accent-local: var(--lyra-ruby-500); --accent-local-deep: var(--lyra-ruby-700); --accent-local-soft: color-mix(in srgb, var(--lyra-ruby-500) 14%, var(--surface-1)); --accent-local-pale: var(--lyra-ruby-100); --accent-local-ramp: var(--ramp-ruby); --accent-local-ink: var(--lyra-ruby-on-500); } [data-lyra-accent=active] { --accent-local: var(--lyra-active-500); --accent-local-deep: var(--lyra-active-700); --accent-local-soft: color-mix(in srgb, var(--lyra-active-500) 14%, var(--surface-1)); --accent-local-pale: var(--lyra-active-100); --accent-local-ramp: var(--ramp-active); --accent-local-ink: var(--lyra-active-on-500); } [data-lyra-accent=geo] { --accent-local: var(--lyra-geo-500); --accent-local-deep: var(--lyra-geo-700); --accent-local-soft: color-mix(in srgb, var(--lyra-geo-500) 14%, var(--surface-1)); --accent-local-pale: var(--lyra-geo-100); --accent-local-ramp: var(--ramp-geo); --accent-local-ink: var(--lyra-geo-on-500); } [data-lyra-accent=value] { --accent-local: var(--lyra-value-500); --accent-local-deep: var(--lyra-value-700); --accent-local-soft: color-mix(in srgb, var(--lyra-value-500) 14%, var(--surface-1)); --accent-local-pale: var(--lyra-value-100); --accent-local-ramp: var(--ramp-value); --accent-local-ink: var(--lyra-value-on-500); } [data-lyra-accent=sunset] { --accent-local: var(--lyra-sunset-500); --accent-local-deep: var(--lyra-sunset-700); --accent-local-soft: color-mix(in srgb, var(--lyra-sunset-500) 14%, var(--surface-1)); --accent-local-pale: var(--lyra-sunset-100); --accent-local-ramp: var(--ramp-sunset); --accent-local-ink: var(--lyra-sunset-on-500); } [data-lyra-accent=clarity] { --accent-local: var(--lyra-clarity-500); --accent-local-deep: var(--lyra-clarity-700); --accent-local-soft: color-mix(in srgb, var(--lyra-clarity-500) 14%, var(--surface-1)); --accent-local-pale: var(--lyra-clarity-100); --accent-local-ramp: var(--ramp-clarity); --accent-local-ink: var(--lyra-clarity-on-500); } /* Gradient selector tokens. */ [data-lyra-gradient=orbit] { --lyra-gradient-local: var(--gradient-orbit); } [data-lyra-gradient=aurora] { --lyra-gradient-local: var(--gradient-aurora); } [data-lyra-gradient=celestial] { --lyra-gradient-local: var(--gradient-celestial); } [data-lyra-gradient=prism] { --lyra-gradient-local: var(--gradient-prism); } [data-lyra-gradient=signal] { --lyra-gradient-local: var(--gradient-signal); } [data-lyra-gradient=horizon] { --lyra-gradient-local: var(--gradient-horizon); } [data-lyra-gradient=nova] { --lyra-gradient-local: var(--gradient-nova); } [data-lyra-gradient=solar] { --lyra-gradient-local: var(--gradient-solar); } [data-lyra-gradient=polar] { --lyra-gradient-local: var(--gradient-polar); } [data-lyra-gradient=growth] { --lyra-gradient-local: var(--gradient-growth); } [data-lyra-gradient=intelligence] { --lyra-gradient-local: var(--gradient-intelligence); } [data-lyra-gradient=clarity] { --lyra-gradient-local: var(--gradient-clarity); } [data-lyra-gradient=deep-space] { --lyra-gradient-local: var(--gradient-deep-space); } [data-lyra-gradient=lilac-dawn] { --lyra-gradient-local: var(--gradient-lilac-dawn); } [data-lyra-gradient=offer] { --lyra-gradient-local: var(--gradient-offer); } [data-lyra-gradient=interview] { --lyra-gradient-local: var(--gradient-interview); } [data-lyra-gradient=applied] { --lyra-gradient-local: var(--gradient-applied); } [data-lyra-gradient=saved] { --lyra-gradient-local: var(--gradient-saved); } [data-lyra-gradient=rejected] { --lyra-gradient-local: var(--gradient-rejected); } [data-lyra-gradient=attention] { --lyra-gradient-local: var(--gradient-attention); } [data-lyra-gradient=compensation] { --lyra-gradient-local: var(--gradient-compensation); } [data-lyra-gradient=activity] { --lyra-gradient-local: var(--gradient-activity); } [data-lyra-gradient=kit] { --lyra-gradient-local: var(--gradient-kit); } [data-lyra-gradient=evaluation] { --lyra-gradient-local: var(--gradient-evaluation); } [data-lyra-gradient=spectrum] { --lyra-gradient-local: var(--gradient-spectrum); } [data-lyra-gradient=spectrum-soft] { --lyra-gradient-local: var(--gradient-spectrum-soft); } .lyra-gradient-text { width: fit-content; color: transparent; background: var(--lyra-gradient-local, var(--gradient-orbit)); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .lyra-gradient-surface { position: relative; isolation: isolate; overflow: hidden; color: #fff; background: var(--lyra-gradient-local, var(--gradient-orbit)); border: 1px solid rgba(255, 255, 255, 0.12); box-shadow: var(--shadow-md); } .lyra-gradient-surface::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(180deg, rgba(7, 17, 31, 0.04), rgba(7, 17, 31, 0.28)); } .lyra-gradient-border { position: relative; border: 1px solid transparent !important; background: linear-gradient(var(--surface-1), var(--surface-1)) padding-box, var(--lyra-gradient-local, var(--gradient-orbit)) border-box; } .lyra-gradient-button { position: relative; isolation: isolate; overflow: hidden; color: #fff; background: var(--lyra-gradient-local, var(--gradient-orbit)); border-color: transparent; box-shadow: 0 8px 24px color-mix(in srgb, var(--accent-local, var(--primary)) 22%, transparent); } .lyra-gradient-button::after { content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0; background: rgba(255, 255, 255, 0.12); transition: opacity var(--lyra-motion-duration-medium); } .lyra-gradient-button:hover::after { opacity: 1; } /* Reference-style discrete swatch strip. */ .lyra-swatch-strip { min-height: 5.25rem; border-radius: var(--radius-lg) var(--radius-lg) 0 0; background: var(--accent-local-ramp, var(--ramp-cobalt)); box-shadow: inset 0 -1px rgba(7, 17, 31, 0.08); } .lyra-swatch-dot { width: 0.7rem; height: 0.7rem; border-radius: 50%; background: var(--accent-local, var(--primary)); box-shadow: 0 0 0 3px var(--surface-1), 0 0 0 4px color-mix(in srgb, var(--accent-local, var(--primary)) 28%, transparent); } .lyra-accent-card { position: relative; overflow: hidden; background: color-mix(in srgb, var(--surface-1) var(--chromatic-card-mix), transparent); } .lyra-accent-card::before { content: ""; position: absolute; inset: 0 0 auto; height: 0.24rem; background: var(--accent-local-ramp, var(--ramp-cobalt)); } .lyra-accent-card::after { content: ""; position: absolute; width: 9rem; height: 9rem; right: -4rem; top: -4.5rem; pointer-events: none; border-radius: 50%; background: var(--accent-local, var(--primary)); filter: blur(48px); opacity: var(--chromatic-glow-alpha); } /* Chromatic job card: restrained neutral body, strong top signal. */ .lyra-job-card--chromatic { position: relative; overflow: hidden; isolation: isolate; } .lyra-job-card--chromatic::before { content: ""; position: absolute; inset: 0 0 auto; z-index: 1; height: 0.22rem; background: var(--accent-local-ramp, var(--gradient-orbit)); } .lyra-job-card--chromatic .lyra-job-card__logo { background: var(--accent-local-soft, var(--primary-soft)); border-color: color-mix(in srgb, var(--accent-local, var(--primary)) 20%, var(--border)); } .lyra-stage--gradient { color: #fff; border-color: transparent; background: var(--stage-gradient, var(--gradient-applied)); box-shadow: inset 0 1px rgba(255, 255, 255, 0.14); } .lyra-stage--gradient[data-stage=saved] { --stage-gradient: var(--gradient-saved); } .lyra-stage--gradient[data-stage=apply] { --stage-gradient: var(--gradient-orbit); } .lyra-stage--gradient[data-stage=applied] { --stage-gradient: var(--gradient-applied); } .lyra-stage--gradient[data-stage=interviewing] { --stage-gradient: var(--gradient-interview); } .lyra-stage--gradient[data-stage=offer] { --stage-gradient: var(--gradient-offer); color: var(--lyra-ink); } .lyra-stage--gradient[data-stage=rejected] { --stage-gradient: var(--gradient-rejected); } .lyra-progress--chromatic .lyra-progress__bar { background: var(--lyra-gradient-local, var(--gradient-signal)); } .lyra-score--spectrum { background: conic-gradient(from -90deg, var(--lyra-ruby-500) 0 12%, var(--lyra-alert-500) 24%, var(--lyra-active-500) 42%, var(--lyra-emerald-500) 68%, var(--lyra-cobalt-500) calc(var(--score) * 1%), var(--surface-3) 0); } .lyra-kpi--chromatic { position: relative; overflow: hidden; } .lyra-kpi--chromatic::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 0.25rem; background: var(--lyra-gradient-local, var(--gradient-orbit)); } .lyra-tabs--chromatic .lyra-tab[aria-selected=true] { color: var(--text-1); background: color-mix(in srgb, var(--accent-local, var(--primary)) 11%, var(--surface-1)); border-color: color-mix(in srgb, var(--accent-local, var(--primary)) 24%, var(--border)); box-shadow: inset 0 -2px var(--accent-local, var(--primary)); } .lyra-pipeline-column[data-lyra-accent] { border-top: 0.22rem solid var(--accent-local, var(--primary)); background: linear-gradient(180deg, var(--accent-local-soft, var(--surface-2)), color-mix(in srgb, var(--surface-2) 88%, transparent) 8rem); } .lyra-command-palette--chromatic, .lyra-modal--chromatic { background: linear-gradient(145deg, color-mix(in srgb, var(--surface-1) 94%, var(--lyra-cobalt-500) 6%), color-mix(in srgb, var(--surface-1) 95%, var(--lyra-tech-500) 5%)); border-color: color-mix(in srgb, var(--primary) 18%, var(--border)); } .lyra-hero--chromatic { position: relative; isolation: isolate; overflow: hidden; padding: clamp(1.75rem, 3vw, 3.25rem); border: 1px solid color-mix(in srgb, var(--primary) 16%, var(--border)); border-radius: var(--radius-xl); background: linear-gradient(135deg, color-mix(in srgb, var(--surface-1) 92%, var(--lyra-cobalt-500) 8%), color-mix(in srgb, var(--surface-1) 94%, var(--lyra-tech-500) 6%)); box-shadow: var(--shadow-md); } .lyra-hero--chromatic::before { content: ""; position: absolute; inset: -45% -8% auto 28%; z-index: -2; height: 18rem; background: var(--gradient-aurora); filter: blur(70px); opacity: 0.18; transform: rotate(-7deg); } .lyra-hero--chromatic::after { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--gradient-glass-sheen); pointer-events: none; } .lyra-spectrum-rule { height: 1px; border: 0; background: var(--gradient-hairline); } /* Recommended product-semantic accent assignments. */ [data-lyra-view=details] { --accent-local: var(--lyra-view-details-accent); --accent-local-soft: color-mix(in srgb,var(--lyra-view-details-accent) 13%,var(--surface-1)); --accent-local-ramp: var(--ramp-professional); } [data-lyra-view=prepare] { --accent-local: var(--lyra-view-prepare-accent); --accent-local-soft: color-mix(in srgb,var(--lyra-view-prepare-accent) 13%,var(--surface-1)); --accent-local-ramp: var(--ramp-tech); } [data-lyra-view=evaluation] { --accent-local: var(--lyra-view-evaluation-accent); --accent-local-soft: color-mix(in srgb,var(--lyra-view-evaluation-accent) 13%,var(--surface-1)); --accent-local-ramp: var(--ramp-energy); } [data-lyra-view=kit] { --accent-local: var(--lyra-view-kit-accent); --accent-local-soft: color-mix(in srgb,var(--lyra-view-kit-accent) 13%,var(--surface-1)); --accent-local-ramp: var(--ramp-cobalt); } [data-lyra-view=activity] { --accent-local: var(--lyra-view-activity-accent); --accent-local-soft: color-mix(in srgb,var(--lyra-view-activity-accent) 13%,var(--surface-1)); --accent-local-ramp: var(--ramp-analytics); } @media (prefers-contrast: more) { .lyra-gradient-surface, .lyra-gradient-button, .lyra-stage--gradient { text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45); } .lyra-gradient-border { border-width: 2px !important; } } } /* o.Lyra governed gradient recipes v4.0.0; authoritative SCSS source. */ :root { --gradient-orbit: linear-gradient(135deg, var(--lyra-cobalt-700), var(--lyra-cobalt-500), var(--lyra-tech-500), var(--lyra-analytics-400)); --gradient-aurora: linear-gradient(120deg, var(--lyra-marine-600), var(--lyra-analytics-500), var(--lyra-cobalt-500), var(--lyra-tech-500)); --gradient-celestial: linear-gradient(135deg, var(--lyra-professional-700), var(--lyra-cobalt-600), var(--lyra-network-500), var(--lyra-tech-500), var(--lyra-energy-500)); --gradient-prism: linear-gradient(110deg, var(--lyra-cobalt-600), var(--lyra-tech-500), var(--lyra-energy-500), var(--lyra-alert-500), var(--lyra-active-500), var(--lyra-emerald-500), var(--lyra-analytics-500)); --gradient-signal: linear-gradient(120deg, var(--lyra-cobalt-600), var(--lyra-analytics-500), var(--lyra-emerald-500)); --gradient-horizon: linear-gradient(110deg, var(--lyra-sunset-600), var(--lyra-active-500), var(--lyra-emerald-500)); --gradient-nova: linear-gradient(125deg, var(--lyra-ruby-700), var(--lyra-energy-500), var(--lyra-tech-500)); --gradient-solar: linear-gradient(105deg, var(--lyra-ruby-700), var(--lyra-sunset-500), var(--lyra-alert-500), var(--lyra-active-500), var(--lyra-value-500)); --gradient-polar: linear-gradient(125deg, var(--lyra-marine-600), var(--lyra-clarity-500), var(--lyra-professional-500)); --gradient-growth: linear-gradient(120deg, var(--lyra-growth-700), var(--lyra-success-500), var(--lyra-emerald-400)); --gradient-intelligence: linear-gradient(125deg, var(--lyra-professional-700), var(--lyra-cobalt-500), var(--lyra-tech-500)); --gradient-clarity: linear-gradient(120deg, var(--lyra-slate-600), var(--lyra-clarity-500), var(--lyra-analytics-400)); --gradient-deep-space: linear-gradient(135deg, var(--lyra-neutral-950), var(--lyra-slate-900), var(--lyra-professional-800), var(--lyra-cobalt-800)); --gradient-lilac-dawn: linear-gradient(120deg, var(--lyra-network-600), var(--lyra-tech-400), var(--lyra-network-200)); --gradient-offer: linear-gradient(110deg, var(--lyra-active-600), var(--lyra-value-500), var(--lyra-emerald-500)); --gradient-interview: linear-gradient(120deg, var(--lyra-analytics-600), var(--lyra-emerald-500), var(--lyra-success-500)); --gradient-applied: linear-gradient(120deg, var(--lyra-professional-600), var(--lyra-cobalt-500), var(--lyra-analytics-500)); --gradient-saved: linear-gradient(120deg, var(--lyra-network-600), var(--lyra-tech-500)); --gradient-rejected: linear-gradient(120deg, var(--lyra-ruby-700), var(--lyra-energy-500)); --gradient-attention: linear-gradient(110deg, var(--lyra-alert-600), var(--lyra-active-500)); --gradient-compensation: linear-gradient(110deg, var(--lyra-geo-600), var(--lyra-value-500), var(--lyra-active-500)); --gradient-activity: linear-gradient(120deg, var(--lyra-cobalt-600), var(--lyra-tech-500), var(--lyra-energy-500)); --gradient-kit: linear-gradient(120deg, var(--lyra-marine-600), var(--lyra-cobalt-500)); --gradient-evaluation: linear-gradient(120deg, var(--lyra-tech-600), var(--lyra-energy-500), var(--lyra-ruby-500)); --gradient-spectrum: conic-gradient(from 215deg, var(--lyra-cobalt-500), var(--lyra-tech-500), var(--lyra-energy-500), var(--lyra-alert-500), var(--lyra-active-500), var(--lyra-emerald-500), var(--lyra-analytics-500), var(--lyra-cobalt-500)); --gradient-spectrum-soft: conic-gradient(from 215deg, var(--lyra-cobalt-200), var(--lyra-tech-200), var(--lyra-energy-200), var(--lyra-active-200), var(--lyra-emerald-200), var(--lyra-analytics-200), var(--lyra-cobalt-200)); --gradient-score: conic-gradient(from -90deg, var(--lyra-ruby-500), var(--lyra-alert-500) 22%, var(--lyra-active-500) 46%, var(--lyra-emerald-500) 73%, var(--lyra-cobalt-500)); --gradient-page: radial-gradient(circle at 12% -8%, rgb(82 114 230 / .13), transparent 31rem), radial-gradient(circle at 89% 4%, rgb(213 23 118 / .08), transparent 27rem), radial-gradient(circle at 68% 88%, rgb(23 213 134 / .07), transparent 30rem), var(--bg); --gradient-page-dark: radial-gradient(circle at 12% -8%, rgb(117 147 239 / .16), transparent 31rem), radial-gradient(circle at 89% 4%, rgb(238 107 173 / .09), transparent 27rem), radial-gradient(circle at 68% 88%, rgb(107 238 183 / .07), transparent 30rem), var(--bg); --gradient-aura-orbit-light: radial-gradient(ellipse 68% 82% at 8% 0%, color-mix(in srgb, var(--lyra-blue-500) 26%, transparent) 0%, transparent 72%), radial-gradient(ellipse 58% 70% at 92% 12%, color-mix(in srgb, var(--lyra-violet-500) 22%, transparent) 0%, transparent 70%), radial-gradient(ellipse 72% 56% at 62% 106%, color-mix(in srgb, var(--lyra-analytics-400) 16%, transparent) 0%, transparent 74%); --gradient-aura-orbit-dark: radial-gradient(ellipse 68% 82% at 8% 0%, color-mix(in srgb, var(--lyra-blue-500) 46%, transparent) 0%, transparent 72%), radial-gradient(ellipse 58% 70% at 92% 12%, color-mix(in srgb, var(--lyra-violet-500) 38%, transparent) 0%, transparent 70%), radial-gradient(ellipse 72% 56% at 62% 106%, color-mix(in srgb, var(--lyra-analytics-400) 28%, transparent) 0%, transparent 74%); --gradient-aura-horizon-dark: radial-gradient(ellipse 122% 76% at 50% 112%, color-mix(in srgb, var(--lyra-cobalt-500) 58%, transparent) 0%, color-mix(in srgb, var(--lyra-analytics-500) 22%, transparent) 42%, transparent 72%), radial-gradient(ellipse 82% 28% at 50% 92%, color-mix(in srgb, var(--lyra-blue-400) 26%, transparent) 0%, transparent 76%), linear-gradient(180deg, color-mix(in srgb, var(--lyra-tech-950) 34%, transparent), transparent 52%); --gradient-aura-veil-dark: radial-gradient(ellipse 84% 62% at 12% 16%, color-mix(in srgb, var(--lyra-tech-500) 34%, transparent) 0%, transparent 72%), linear-gradient(128deg, transparent 18%, color-mix(in srgb, var(--lyra-blue-500) 26%, transparent) 44%, color-mix(in srgb, var(--lyra-analytics-500) 18%, transparent) 58%, transparent 78%), radial-gradient(ellipse 68% 48% at 88% 84%, color-mix(in srgb, var(--lyra-network-500) 30%, transparent) 0%, transparent 74%); --gradient-glass-sheen: linear-gradient(135deg, rgb(255 255 255 / .14), transparent 34%, rgb(255 255 255 / .035) 72%, transparent); --gradient-hairline: linear-gradient(90deg, transparent, rgb(82 114 230 / .32), rgb(149 120 245 / .30), transparent); } .lyra-gradient-field { position: relative; isolation: isolate; overflow: clip; background-color: var(--lyra-gradient-fallback, #07111f); background-image: var(--lyra-gradient-local, none); background-repeat: no-repeat; background-size: cover; background-blend-mode: var(--lyra-gradient-blend-modes, normal); } .lyra-gradient-field__content { position: relative; z-index: 1; } [data-lyra-gradient=aura-orbit-light] { --lyra-gradient-local: var(--gradient-aura-orbit-light); --lyra-gradient-fallback: #fbf5ee; --lyra-gradient-blend-modes: multiply, multiply, screen; } [data-lyra-gradient=aura-orbit-dark] { --lyra-gradient-local: var(--gradient-aura-orbit-dark); --lyra-gradient-fallback: #07111f; --lyra-gradient-blend-modes: screen, screen, screen; } [data-lyra-gradient=aura-horizon-dark] { --lyra-gradient-local: var(--gradient-aura-horizon-dark); --lyra-gradient-fallback: #07111f; --lyra-gradient-blend-modes: screen, screen, normal; } [data-lyra-gradient=aura-veil-dark] { --lyra-gradient-local: var(--gradient-aura-veil-dark); --lyra-gradient-fallback: #07111f; --lyra-gradient-blend-modes: screen, screen, screen; } [data-contrast=more] .lyra-gradient-field, .lyra-gradient-field[data-contrast=more] { background-image: none; } @supports not (color: color-mix(in srgb, black, white)) { .lyra-gradient-field { background-image: none; } } @media (prefers-contrast: more) { .lyra-gradient-field { background-image: none; } } @media (forced-colors: active) { .lyra-gradient-field { background-color: Canvas; background-image: none; color: CanvasText; } } @media (prefers-reduced-motion: reduce) { [class*=gradient], [data-lyra-gradient] { animation: none !important; } } @media print { .lyra-gradient-field { background-image: none !important; } } /* Canonical v1.1 stacks. This later map normalizes all generated outputs. */ /* ========================================================== o.Lyra Typography System v1.0 Import after the base o.Lyra theme CSS. Font binaries are intentionally NOT bundled here. ========================================================== */ :root { /* Family roles */ --lyra-font-brand: "Bellota", "MuseoModerno", sans-serif; --lyra-font-display: "MuseoModerno", "Sora", "Space Grotesk", sans-serif; --lyra-font-ui: "Instrument Sans", "Manrope", "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --lyra-font-editorial: "Instrument Serif", "Newsreader", "Source Serif 4", Georgia, serif; --lyra-font-mono: "Geist Mono", "IBM Plex Mono", "JetBrains Mono", "SFMono-Regular", Consolas, monospace; --lyra-font-human: "Klee One", "Caveat", cursive; /* Canonical v1.1 stacks. These later declarations normalize all outputs. */ --lyra-font-brand: 'Bellota', 'MuseoModerno', sans-serif; --lyra-font-display: 'MuseoModerno', 'Sora', 'Space Grotesk', sans-serif; --lyra-font-ui: 'Instrument Sans', 'Manrope', 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --lyra-font-editorial: 'Instrument Serif', 'Newsreader', 'Source Serif 4', Georgia, serif; --lyra-font-mono: 'Geist Mono', 'IBM Plex Mono', 'JetBrains Mono', 'SFMono-Regular', Consolas, ui-monospace, monospace; --lyra-font-human: 'Klee One', 'Caveat', cursive; /* Responsive sizes */ --lyra-type-display-2xl: clamp(3.75rem, 6vw, 6rem); --lyra-type-display-xl: clamp(3rem, 5vw, 4.5rem); --lyra-type-display-lg: clamp(2.5rem, 4vw, 3.5rem); --lyra-type-title-1: clamp(2rem, 3vw, 2.75rem); --lyra-type-title-2: clamp(1.625rem, 2.2vw, 2.125rem); --lyra-type-title-3: 1.375rem; --lyra-type-title-4: 1.125rem; --lyra-type-body-lg: 1.125rem; --lyra-type-body: 0.9375rem; --lyra-type-body-sm: 0.875rem; --lyra-type-label: 0.8125rem; --lyra-type-caption: 0.75rem; --lyra-type-micro: 0.6875rem; --lyra-type-editorial-lg: 1.25rem; --lyra-type-editorial: 1.0625rem; --lyra-type-data-lg: clamp(1.5rem, 2.5vw, 2rem); --lyra-type-data: 0.8125rem; --lyra-type-code: 0.78125rem; --lyra-type-hand-note: 1.125rem; /* Reading widths */ --lyra-measure-tight: 42ch; --lyra-measure-copy: 66ch; --lyra-measure-longform: 76ch; } html { font-family: var(--lyra-font-ui); font-synthesis: none; font-kerning: normal; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } body { font-family: var(--lyra-font-ui); font-size: var(--lyra-type-body); line-height: 1.55; letter-spacing: 0; } button, input, textarea, select { font: inherit; } /* ---------- Semantic families ---------- */ .lyra-type-brand { font-family: var(--lyra-font-brand); } .lyra-type-display { font-family: var(--lyra-font-display); } .lyra-type-ui { font-family: var(--lyra-font-ui); } .lyra-type-editorial { font-family: var(--lyra-font-editorial); } .lyra-type-mono { font-family: var(--lyra-font-mono); } .lyra-type-human { font-family: var(--lyra-font-human); } /* ---------- Display ---------- */ .lyra-display-2xl { font-family: var(--lyra-font-display); font-size: var(--lyra-type-display-2xl); font-weight: 450; line-height: 0.94; letter-spacing: -0.045em; text-wrap: balance; } .lyra-display-xl { font-family: var(--lyra-font-display); font-size: var(--lyra-type-display-xl); font-weight: 450; line-height: 0.98; letter-spacing: -0.04em; text-wrap: balance; } .lyra-display-lg { font-family: var(--lyra-font-display); font-size: var(--lyra-type-display-lg); font-weight: 450; line-height: 1; letter-spacing: -0.035em; text-wrap: balance; } /* ---------- Product hierarchy ---------- */ .lyra-title-1, .lyra-page-title { font-family: var(--lyra-font-ui); font-size: var(--lyra-type-title-1); font-weight: 650; line-height: 1.08; letter-spacing: -0.035em; text-wrap: balance; } .lyra-title-2, .lyra-section-title { font-family: var(--lyra-font-ui); font-size: var(--lyra-type-title-2); font-weight: 650; line-height: 1.12; letter-spacing: -0.025em; text-wrap: balance; } .lyra-title-3, .lyra-card-title { font-family: var(--lyra-font-ui); font-size: var(--lyra-type-title-3); font-weight: 650; line-height: 1.18; letter-spacing: -0.018em; } .lyra-title-4 { font-family: var(--lyra-font-ui); font-size: var(--lyra-type-title-4); font-weight: 650; line-height: 1.25; letter-spacing: -0.012em; } /* ---------- Body ---------- */ .lyra-body-lg { font-family: var(--lyra-font-ui); font-size: var(--lyra-type-body-lg); font-weight: 400; line-height: 1.55; letter-spacing: -0.005em; max-width: var(--lyra-measure-copy); } .lyra-body { font-family: var(--lyra-font-ui); font-size: var(--lyra-type-body); font-weight: 400; line-height: 1.55; } .lyra-body-sm { font-family: var(--lyra-font-ui); font-size: var(--lyra-type-body-sm); font-weight: 400; line-height: 1.5; } .lyra-longform, .lyra-job-description, .lyra-message-body { font-family: var(--lyra-font-ui); font-size: 0.96875rem; font-weight: 400; line-height: 1.68; max-width: var(--lyra-measure-longform); } /* ---------- Labels ---------- */ .lyra-type-label { font-family: var(--lyra-font-ui); font-size: var(--lyra-type-label); font-weight: 600; line-height: 1.25; letter-spacing: 0.005em; } .lyra-caption { font-family: var(--lyra-font-ui); font-size: var(--lyra-type-caption); font-weight: 500; line-height: 1.35; letter-spacing: 0.01em; } .lyra-micro, .lyra-overline, .lyra-table-header { font-family: var(--lyra-font-ui); font-size: var(--lyra-type-micro); font-weight: 700; line-height: 1.2; letter-spacing: 0.07em; text-transform: uppercase; } /* ---------- Editorial / AI narrative ---------- */ .lyra-editorial-lg { font-family: var(--lyra-font-editorial); font-size: var(--lyra-type-editorial-lg); font-weight: 400; line-height: 1.62; letter-spacing: -0.008em; max-width: var(--lyra-measure-copy); } .lyra-editorial, .lyra-ai-narrative, .lyra-insight-body { font-family: var(--lyra-font-editorial); font-size: var(--lyra-type-editorial); font-weight: 400; line-height: 1.65; letter-spacing: 0; max-width: var(--lyra-measure-copy); } .lyra-quote { font-family: var(--lyra-font-editorial); font-size: clamp(1.125rem, 2vw, 1.5rem); font-weight: 400; font-style: italic; line-height: 1.5; letter-spacing: -0.01em; max-width: 58ch; } /* ---------- Numeric / technical ---------- */ .lyra-data, .lyra-salary, .lyra-date, .lyra-time, .lyra-id, .lyra-timestamp { font-family: var(--lyra-font-mono); font-size: var(--lyra-type-data); font-weight: 500; line-height: 1.35; letter-spacing: 0; font-variant-numeric: tabular-nums lining-nums; } .lyra-data-lg, .lyra-metric, .lyra-score-value { font-family: var(--lyra-font-mono); font-size: var(--lyra-type-data-lg); font-weight: 550; line-height: 1.05; letter-spacing: -0.03em; font-variant-numeric: tabular-nums lining-nums; } .lyra-code, kbd, code, pre { font-family: var(--lyra-font-mono); font-size: var(--lyra-type-code); font-variant-numeric: tabular-nums lining-nums; } /* ---------- Human accent ---------- */ .lyra-hand-note { font-family: var(--lyra-font-human); font-size: var(--lyra-type-hand-note); font-weight: 400; line-height: 1.4; letter-spacing: 0.005em; } /* ---------- Common product components ---------- */ /* Component-specific type presets retired in v1.1. The core component layer owns these selectors; use the role utilities above for standalone type. .lyra-nav-item { font: 500 0.875rem/1.25 var(--lyra-font-ui); } .lyra-nav-item[aria-current="page"] { font-weight: 650; } .lyra-tab { font: 600 0.8125rem/1.25 var(--lyra-font-ui); } .lyra-button { font: 650 0.875rem/1 var(--lyra-font-ui); letter-spacing: -.005em; } .lyra-input { font: 400 0.875rem/1.4 var(--lyra-font-ui); } .lyra-badge { font: 700 0.6875rem/1.1 var(--lyra-font-ui); letter-spacing: .045em; } .lyra-job-title { font: 650 1rem/1.25 var(--lyra-font-ui); letter-spacing: -.012em; } .lyra-company-name { font: 500 0.875rem/1.35 var(--lyra-font-ui); } .lyra-table-cell { font: 400 0.875rem/1.4 var(--lyra-font-ui); } .lyra-timeline-action { font: 550 0.875rem/1.45 var(--lyra-font-ui); } */ /* ---------- Utility ---------- */ .lyra-tabular { font-variant-numeric: tabular-nums lining-nums; } .lyra-balanced { text-wrap: balance; } .lyra-pretty { text-wrap: pretty; } .lyra-measure-tight { max-width: var(--lyra-measure-tight); } .lyra-measure-copy { max-width: var(--lyra-measure-copy); } .lyra-measure-longform { max-width: var(--lyra-measure-longform); } /* Typography hierarchy is intentionally theme-independent. Light/dark mode should change semantic colors, not sizes or weights. */ @media (max-width: 720px) { :root { --lyra-type-title-3: 1.25rem; --lyra-type-editorial-lg: 1.125rem; } .lyra-display-2xl, .lyra-display-xl, .lyra-display-lg { letter-spacing: -0.032em; } } @media (prefers-reduced-motion: reduce) { .lyra-type-brand, .lyra-type-display, .lyra-type-ui, .lyra-type-editorial, .lyra-type-mono, .lyra-type-human { font-variation-settings: normal; } } /* o.Lyra brand extensions v2.0 */ :root { --lyra-brand-ivory:#FBF5EE; --lyra-brand-ink:#07111F; --lyra-brand-signal:#718CFF; --lyra-brand-violet:#9578F5; } .lyra-brand-lockup { display: block; max-width: 100%; height: auto; } .lyra-orbit-atmosphere { position: relative; isolation: isolate; } .lyra-orbit-atmosphere::before { content: ""; position: absolute; inset: -12%; z-index: -1; background: radial-gradient(circle at 25% 20%, rgba(113, 140, 255, 0.16), transparent 34%), radial-gradient(circle at 78% 12%, rgba(149, 120, 245, 0.12), transparent 30%); filter: blur(24px); } .lyra-brand-rule { height: 1px; border: 0; background: linear-gradient(90deg, transparent, #5272e6 25%, #9578f5 70%, transparent); } .lyra-brand-surface { background: #fbf5ee; color: #07111f; } .lyra-brand-surface--dark { background: #07111f; color: #fbf5ee; }