@font-face {
font-family: 'Geist';
font-style: italic;
font-weight: 100 900;
font-display: swap;
src: url('fonts/geist-italic-cyrillic-ext.af944491.woff2') format('woff2');
unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
font-family: 'Geist';
font-style: italic;
font-weight: 100 900;
font-display: swap;
src: url('fonts/geist-italic-cyrillic.88be6946.woff2') format('woff2');
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
font-family: 'Geist';
font-style: italic;
font-weight: 100 900;
font-display: swap;
src: url('fonts/geist-italic-vietnamese.8dfcf303.woff2') format('woff2');
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
font-family: 'Geist';
font-style: italic;
font-weight: 100 900;
font-display: swap;
src: url('fonts/geist-italic-latin-ext.370a8962.woff2') format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'Geist';
font-style: italic;
font-weight: 100 900;
font-display: swap;
src: url('fonts/geist-italic-latin.7611b95c.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Geist';
font-style: normal;
font-weight: 100 900;
font-display: swap;
src: url('fonts/geist-normal-cyrillic-ext.b7a545bb.woff2') format('woff2');
unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
font-family: 'Geist';
font-style: normal;
font-weight: 100 900;
font-display: swap;
src: url('fonts/geist-normal-cyrillic.6129fc85.woff2') format('woff2');
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
font-family: 'Geist';
font-style: normal;
font-weight: 100 900;
font-display: swap;
src: url('fonts/geist-normal-vietnamese.f689f638.woff2') format('woff2');
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
font-family: 'Geist';
font-style: normal;
font-weight: 100 900;
font-display: swap;
src: url('fonts/geist-normal-latin-ext.58a6b173.woff2') format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'Geist';
font-style: normal;
font-weight: 100 900;
font-display: swap;
src: url('fonts/geist-normal-latin.9b6f5ff4.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
*,
*::before,
*::after {
box-sizing: border-box;
}
* {
margin: 0;
padding: 0;
}
html {
-webkit-text-size-adjust: 100%;
scroll-behavior: smooth;
}
* {
scrollbar-width: thin;
scrollbar-color: var(--color-border-default) transparent;
}
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
background: var(--color-border-default);
border-radius: 999px;
border: 3px solid transparent;
background-clip: padding-box;
}
*::-webkit-scrollbar-thumb:hover { background: var(--color-border-strong); }
body {
font-family: var(--font-base);
min-height: 100vh;
line-height: 1.5;
-webkit-font-smoothing: auto;
-moz-osx-font-smoothing: auto;
}
img,
picture,
video,
canvas,
svg {
display: block;
max-width: 100%;
}
input,
button,
textarea,
select {
font: inherit;
}
button {
cursor: pointer;
background: none;
border: none;
}
a {
color: inherit;
text-decoration: none;
}
ul,
ol {
list-style: none;
}
table {
border-collapse: collapse;
width: 100%;
}
p,
h1,
h2,
h3,
h4,
h5,
h6 {
overflow-wrap: break-word;
}
:root {
--color-white: #FFFFFF;
--color-dark: #02050D;
--color-black: #000000;
--color-neutral-0: #FFFFFF;
--color-neutral-10: #FAFAFA;
--color-neutral-20: #F5F5F5;
--color-neutral-30: #EBEBEC;
--color-neutral-40: #DEDEDE;
--color-neutral-50: #BFBFBF;
--color-neutral-60: #B0B0B0;
--color-neutral-70: #A3A3A3;
--color-neutral-80: #949494;
--color-neutral-90: #858585;
--color-neutral-100: #757575;
--color-neutral-200: #666666;
--color-neutral-300: #575757;
--color-neutral-400: #4A4A4A;
--color-neutral-500: #3B3B3B;
--color-neutral-600: #2E2E2E;
--color-neutral-700: #1C1C1C;
--color-neutral-800: #0D0D0D;
--color-neutral-900: #000000;
--color-peggy-blue-50: #E8EAF9;
--color-peggy-blue-100: #B8BDEC;
--color-peggy-blue-200: #959DE3;
--color-peggy-blue-300: #6571D6;
--color-peggy-blue-400: #4755CE;
--color-peggy-blue-500: #192BC2;
--color-peggy-blue-600: #1727B1;
--color-peggy-blue-700: #121F8A;
--color-peggy-blue-800: #0E186B;
--color-peggy-blue-900: #0B1251;
--color-critical-25: #FFF5F6;
--color-critical-50: #FDE6E9;
--color-critical-100: #F9B0BB;
--color-critical-200: #F78A9B;
--color-critical-300: #F3546D;
--color-critical-400: #F13351;
--color-critical-500: #ED0025;
--color-critical-600: #D80022;
--color-critical-700: #A8001A;
--color-critical-800: #820014;
--color-critical-900: #640010;
--color-warning-50: #FFFBE7;
--color-warning-100: #FFF2B3;
--color-warning-200: #FFEC8E;
--color-warning-300: #FFE45B;
--color-warning-400: #FFDE3B;
--color-warning-500: #FFD60A;
--color-warning-600: #E8C309;
--color-warning-700: #B59807;
--color-warning-800: #8C7606;
--color-warning-900: #6B5A04;
--color-success-50: #E6F4EC;
--color-success-100: #B0DCC3;
--color-success-200: #8ACBA5;
--color-success-400: #33A463;
--color-success-500: #008D3C;
--color-success-600: #008037;
--color-success-700: #00642B;
--color-success-800: #004E21;
--color-success-900: #003B19;
--color-orange-50: #FFF4ED;
--color-orange-100: #FFE2CC;
--color-orange-200: #FFC499;
--color-orange-300: #FFA15C;
--color-orange-400: #FF8A33;
--color-orange-500: #F97315;
--color-orange-600: #EA580C;
--color-orange-700: #C2410C;
--color-orange-800: #9A3412;
--color-orange-900: #7C2D12;
--color-bg-canvas: var(--color-neutral-20);
--color-bg-default: var(--color-neutral-0);
--color-bg-subtle: var(--color-neutral-10);
--color-bg-muted: var(--color-neutral-30);
--color-bg-emphasis: var(--color-neutral-900);
--color-bg-active: var(--color-neutral-40);
--color-bg-inverse: var(--color-neutral-900);
--color-surface-default: var(--color-neutral-0);
--color-surface-default-subtle: #1C1C1C0A;
--color-surface-raised: var(--color-neutral-30);
--color-surface-overlay: var(--color-neutral-20);
--color-surface-sunken: var(--color-neutral-10);
--color-surface-sunken2: var(--color-neutral-20);
--color-text-primary: var(--color-neutral-900);
--color-text-secondary: var(--color-neutral-400);
--color-text-tertiary: var(--color-neutral-200);
--color-text-placeholder: var(--color-neutral-90);
--color-text-placeholder-subtle: var(--color-neutral-30);
--color-text-disabled: var(--color-neutral-60);
--color-text-inverse: var(--color-neutral-0);
--color-text-link: var(--color-peggy-blue-500);
--color-text-link-hover: var(--color-peggy-blue-600);
--color-icon-primary: var(--color-neutral-900);
--color-icon-secondary: var(--color-neutral-400);
--color-icon-tertiary: var(--color-neutral-200);
--color-icon-placeholder: var(--color-neutral-90);
--color-icon-placeholder-subtle: var(--color-neutral-30);
--color-icon-disabled: var(--color-neutral-60);
--color-icon-inverse: var(--color-neutral-0);
--color-icon-link: var(--color-peggy-blue-500);
--color-icon-link-hover: var(--color-peggy-blue-600);
--color-brand-primary: var(--color-neutral-900);
--color-brand-primary-hover: var(--color-neutral-700);
--color-brand-primary-active: var(--color-neutral-600);
--color-brand-on-primary: var(--color-neutral-0);
--color-brand-primary-subtle: var(--color-neutral-10);
--color-brand-primary-muted: var(--color-neutral-30);
--color-brand-secondary: var(--color-peggy-blue-500);
--color-brand-secondary-hover: var(--color-peggy-blue-600);
--color-brand-secondary-active: var(--color-peggy-blue-700);
--color-brand-on-secondary: var(--color-neutral-0);
--color-brand-secondary-subtle: var(--color-peggy-blue-50);
--color-brand-secondary-muted: var(--color-peggy-blue-100);
--color-brand-tertiary: var(--color-neutral-400);
--color-brand-tertiary-hover: var(--color-neutral-900);
--color-brand-tertiary-active: var(--color-neutral-700);
--color-brand-on-tertiary: var(--color-neutral-0);
--color-brand-tertiary-subtle: var(--color-peggy-blue-50);
--color-brand-tertiary-muted: var(--color-peggy-blue-100);
--color-interactive-primary: var(--color-neutral-900);
--color-interactive-primary-hover: var(--color-neutral-700);
--color-interactive-primary-active: var(--color-neutral-600);
--color-interactive-primary-disabled: var(--color-neutral-50);
--color-interactive-secondary: var(--color-neutral-0);
--color-interactive-secondary-hover: var(--color-neutral-10);
--color-interactive-ghost-hover: var(--color-neutral-20);
--color-border-on-canvas: var(--color-neutral-30);
--color-border-subtle: var(--color-neutral-30);
--color-border-medium: var(--color-neutral-40);
--color-border-default: var(--color-neutral-50);
--color-border-strong: var(--color-neutral-700);
--color-border-focus: var(--color-peggy-blue-500);
--color-success-bg: var(--color-success-100);
--color-success-bg-subtle: var(--color-success-50);
--color-success-border: var(--color-success-200);
--color-success-text: var(--color-success-700);
--color-success-icon: var(--color-success-500);
--color-success-action: var(--color-success-500);
--color-success-action-hover: var(--color-success-600);
--color-warning-bg: var(--color-warning-100);
--color-warning-bg-subtle: var(--color-warning-50);
--color-warning-border: var(--color-warning-300);
--color-warning-text: var(--color-warning-800);
--color-warning-icon: var(--color-warning-600);
--color-warning-action: var(--color-warning-500);
--color-warning-action-hover: var(--color-warning-600);
--color-critical-bg: var(--color-critical-50);
--color-critical-bg-subtle: var(--color-critical-25);
--color-critical-border: var(--color-critical-200);
--color-critical-text: var(--color-critical-700);
--color-critical-icon: var(--color-critical-500);
--color-critical-action: var(--color-critical-500);
--color-critical-action-hover: var(--color-critical-600);
--color-critical-disabled: var(--color-critical-100);
--font-base: 'Geist', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
--font-size-sm: 0.875rem;
--font-size-base: 1rem;
--font-size-lg: 1.25rem;
--font-weight-normal: 400;
--font-weight-medium: 500;
--font-weight-semibold: 600;
--font-weight-bold: 700;
--line-height-base: 1.5;
--text-display-2xl-size: 4.5rem;
--text-display-2xl-line-height: 5.625rem;
--text-display-2xl-letter-spacing: -0.02em;
--text-display-xl-size: 3.75rem;
--text-display-xl-line-height: 4.5rem;
--text-display-xl-letter-spacing: -0.02em;
--text-display-lg-size: 3rem;
--text-display-lg-line-height: 3.75rem;
--text-display-lg-letter-spacing: -0.02em;
--text-display-md-size: 2.25rem;
--text-display-md-line-height: 2.75rem;
--text-display-md-letter-spacing: -0.02em;
--text-headline-lg-size: 2rem;
--text-headline-lg-line-height: 2.5rem;
--text-headline-md-size: 1.75rem;
--text-headline-md-line-height: 2.25rem;
--text-headline-sm-size: 1.5rem;
--text-headline-sm-line-height: 2rem;
--text-title-lg-size: 1.25rem;
--text-title-lg-line-height: 1.75rem;
--text-title-md-size: 1rem;
--text-title-md-line-height: 1.5rem;
--text-title-sm-size: 0.875rem;
--text-title-sm-line-height: 1.25rem;
--text-body-xl-size: 1.125rem;
--text-body-xl-line-height: 1.5rem;
--text-body-lg-size: 1rem;
--text-body-lg-line-height: 1.5rem;
--text-body-md-size: 0.875rem;
--text-body-md-line-height: 1.25rem;
--text-body-sm-size: 0.8125rem;
--text-body-sm-line-height: 1rem;
--text-body-xs-size: 0.75rem;
--text-body-xs-line-height: 1rem;
--text-label-lg-size: 0.875rem;
--text-label-lg-line-height: 1.25rem;
--text-label-md-size: 0.75rem;
--text-label-md-line-height: 1rem;
--text-label-sm-size: 0.75rem;
--text-label-sm-line-height: 1rem;
--text-label-xs-size: 0.6875rem;
--text-label-xs-line-height: 0.875rem;
--space-xs: 0.25rem;
--space-sm: 0.5rem;
--space-md: 1rem;
--space-lg: 1.5rem;
--space-xl: 2.5rem;
--space-2xl: 4rem;
--max-width: 1100px;
--radius: 8px;
--radius-sm: 4px;
--radius-lg: 12px;
--transition: 0.2s ease;
--transition-fast: 0.15s ease;
--shadow-sm: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);
--shadow-md: 0px 4px 6px -1px rgba(0, 0, 0, 0.1), 0px 2px 4px -2px rgba(0, 0, 0, 0.1);
--shadow-lg: 0px 10px 15px -3px rgba(0, 0, 0, 0.1), 0px 4px 6px -4px rgba(0, 0, 0, 0.1);
--shadow-focus: 0px 0px 0px 4px;
--pg-sidebar-width: 250px;
--pg-sidebar-collapsed: 58px;
--pg-sidebar-w: var(--pg-sidebar-width);
--pg-sidebar-pad: 6px;
--pg-collapse-op: 1;
--pg-collapse-pl: 12px;
--pg-collapse-pl-sw: 8px;
--pg-collapse-pl-hdr: 8px;
--pg-collapse-flex: 1;
--pg-collapse-gap: 6px;
--pg-collapse-item-h: 36px;
}
:root.pg-collapsed {
--pg-sidebar-w: var(--pg-sidebar-collapsed);
--pg-collapse-op: 0;
--pg-collapse-pl: 14px;
--pg-collapse-pl-sw: 7px;
--pg-collapse-pl-hdr: 5px;
--pg-collapse-flex: 0;
--pg-collapse-gap: 0px;
--pg-collapse-item-h: 0px;
}
:root.pg-chat-route {
--wp-topnav-host: none;
--wp-topnav-chat: flex;
--wp-nav-incognito: flex;
--wp-nav-ai: none;
}
:root.pg-chat-route.wpai-chat-open {
--wp-nav-incognito: none;
--wp-nav-history: flex;
}
:root.wpai-chat-open .pg-container-main {
padding-left: 0 !important;
padding-right: 0 !important;
}
:root.wpai-chat-open .pg-container-topnav {
padding-left: 24px !important;
padding-right: 24px !important;
}
:root.wpai-incognito .pg-container-nav-incognito {
visibility: hidden;
}
:root.wpai-incognito .pg-container-topnav {
display: none !important;
}
:root.wpai-incognito .pg-container-main {
padding: 0 !important;
}
@media (max-width: 767px) {
.pg-container-sidebar {
position: fixed;
left: 0;
top: 0;
z-index: 40;
box-shadow: 8px 0 24px -8px rgba(0, 0, 0, 0.4);
}
.pg-container-main {
margin-left: var(--pg-sidebar-collapsed);
}
}
@media (prefers-color-scheme: dark) {
:root {
--color-bg-canvas: var(--color-neutral-900);
--color-bg-default: var(--color-neutral-800);
--color-bg-subtle: var(--color-neutral-700);
--color-bg-muted: var(--color-neutral-600);
--color-bg-emphasis: var(--color-neutral-0);
--color-bg-active: var(--color-neutral-700);
--color-bg-inverse: var(--color-neutral-0);
--color-surface-default: var(--color-neutral-700);
--color-surface-default-subtle: #1C1C1C4D;
--color-surface-raised: var(--color-neutral-600);
--color-surface-overlay: var(--color-neutral-700);
--color-surface-sunken: var(--color-neutral-800);
--color-surface-sunken2: var(--color-neutral-900);
--color-text-primary: var(--color-neutral-0);
--color-text-secondary: var(--color-neutral-60);
--color-text-tertiary: var(--color-neutral-90);
--color-text-placeholder: var(--color-neutral-200);
--color-text-placeholder-subtle: var(--color-neutral-600);
--color-text-disabled: var(--color-neutral-400);
--color-text-inverse: var(--color-neutral-900);
--color-text-link: var(--color-peggy-blue-300);
--color-text-link-hover: var(--color-peggy-blue-200);
--color-icon-primary: var(--color-neutral-0);
--color-icon-secondary: var(--color-neutral-60);
--color-icon-tertiary: var(--color-neutral-90);
--color-icon-placeholder: var(--color-neutral-200);
--color-icon-placeholder-subtle: var(--color-neutral-600);
--color-icon-disabled: var(--color-neutral-400);
--color-icon-inverse: var(--color-neutral-900);
--color-icon-link: var(--color-peggy-blue-300);
--color-icon-link-hover: var(--color-peggy-blue-200);
--color-brand-primary: var(--color-neutral-0);
--color-brand-primary-hover: var(--color-neutral-10);
--color-brand-primary-active: var(--color-neutral-30);
--color-brand-on-primary: var(--color-neutral-900);
--color-brand-primary-subtle: var(--color-neutral-800);
--color-brand-primary-muted: var(--color-neutral-700);
--color-brand-secondary: var(--color-peggy-blue-400);
--color-brand-secondary-hover: var(--color-peggy-blue-300);
--color-brand-secondary-active: var(--color-peggy-blue-200);
--color-brand-on-secondary: var(--color-neutral-0);
--color-brand-secondary-subtle: var(--color-peggy-blue-900);
--color-brand-secondary-muted: var(--color-peggy-blue-800);
--color-brand-tertiary: var(--color-neutral-60);
--color-brand-tertiary-hover: var(--color-neutral-0);
--color-brand-tertiary-active: var(--color-neutral-10);
--color-brand-on-tertiary: var(--color-neutral-0);
--color-brand-tertiary-subtle: var(--color-peggy-blue-900);
--color-brand-tertiary-muted: var(--color-peggy-blue-800);
--color-interactive-primary: var(--color-neutral-0);
--color-interactive-primary-hover: var(--color-neutral-10);
--color-interactive-primary-active: var(--color-neutral-30);
--color-interactive-primary-disabled: var(--color-neutral-500);
--color-interactive-secondary: var(--color-neutral-700);
--color-interactive-secondary-hover: var(--color-neutral-600);
--color-interactive-ghost-hover: var(--color-neutral-600);
--color-border-on-canvas: var(--color-neutral-800);
--color-border-subtle: var(--color-neutral-700);
--color-border-medium: var(--color-neutral-600);
--color-border-default: var(--color-neutral-500);
--color-border-strong: var(--color-neutral-90);
--color-border-focus: var(--color-peggy-blue-400);
--color-success-bg: var(--color-success-800);
--color-success-bg-subtle: var(--color-success-900);
--color-success-border: var(--color-success-700);
--color-success-text: var(--color-success-200);
--color-success-icon: var(--color-success-400);
--color-success-action: var(--color-success-400);
--color-success-action-hover: var(--color-success-600);
--color-warning-bg: var(--color-warning-800);
--color-warning-bg-subtle: var(--color-warning-900);
--color-warning-border: var(--color-warning-700);
--color-warning-text: var(--color-warning-200);
--color-warning-icon: var(--color-warning-400);
--color-warning-action: var(--color-warning-400);
--color-warning-action-hover: var(--color-warning-300);
--color-critical-bg: var(--color-critical-800);
--color-critical-bg-subtle: var(--color-critical-900);
--color-critical-border: var(--color-critical-700);
--color-critical-text: var(--color-critical-200);
--color-critical-icon: var(--color-critical-400);
--color-critical-action: var(--color-critical-400);
--color-critical-action-hover: var(--color-critical-300);
--color-critical-disabled: var(--color-critical-700);
}
}
.dark {
--color-bg-canvas: var(--color-neutral-900);
--color-bg-default: var(--color-neutral-800);
--color-bg-subtle: var(--color-neutral-700);
--color-bg-muted: var(--color-neutral-600);
--color-bg-emphasis: var(--color-neutral-0);
--color-bg-active: var(--color-neutral-700);
--color-bg-inverse: var(--color-neutral-0);
--color-surface-default: var(--color-neutral-700);
--color-surface-default-subtle: #1C1C1C4D;
--color-surface-raised: var(--color-neutral-600);
--color-surface-overlay: var(--color-neutral-700);
--color-surface-sunken: var(--color-neutral-800);
--color-surface-sunken2: var(--color-neutral-900);
--color-text-primary: var(--color-neutral-0);
--color-text-secondary: var(--color-neutral-60);
--color-text-tertiary: var(--color-neutral-90);
--color-text-placeholder: var(--color-neutral-200);
--color-text-placeholder-subtle: var(--color-neutral-600);
--color-text-disabled: var(--color-neutral-400);
--color-text-inverse: var(--color-neutral-900);
--color-text-link: var(--color-peggy-blue-300);
--color-text-link-hover: var(--color-peggy-blue-200);
--color-icon-primary: var(--color-neutral-0);
--color-icon-secondary: var(--color-neutral-60);
--color-icon-tertiary: var(--color-neutral-90);
--color-icon-placeholder: var(--color-neutral-200);
--color-icon-placeholder-subtle: var(--color-neutral-600);
--color-icon-disabled: var(--color-neutral-400);
--color-icon-inverse: var(--color-neutral-900);
--color-icon-link: var(--color-peggy-blue-300);
--color-icon-link-hover: var(--color-peggy-blue-200);
--color-brand-primary: var(--color-neutral-0);
--color-brand-primary-hover: var(--color-neutral-10);
--color-brand-primary-active: var(--color-neutral-30);
--color-brand-on-primary: var(--color-neutral-900);
--color-brand-primary-subtle: var(--color-neutral-800);
--color-brand-primary-muted: var(--color-neutral-700);
--color-brand-secondary: var(--color-peggy-blue-400);
--color-brand-secondary-hover: var(--color-peggy-blue-300);
--color-brand-secondary-active: var(--color-peggy-blue-200);
--color-brand-on-secondary: var(--color-neutral-0);
--color-brand-secondary-subtle: var(--color-peggy-blue-900);
--color-brand-secondary-muted: var(--color-peggy-blue-800);
--color-brand-tertiary: var(--color-neutral-60);
--color-brand-tertiary-hover: var(--color-neutral-0);
--color-brand-tertiary-active: var(--color-neutral-10);
--color-brand-on-tertiary: var(--color-neutral-0);
--color-brand-tertiary-subtle: var(--color-peggy-blue-900);
--color-brand-tertiary-muted: var(--color-peggy-blue-800);
--color-interactive-primary: var(--color-neutral-0);
--color-interactive-primary-hover: var(--color-neutral-10);
--color-interactive-primary-active: var(--color-neutral-30);
--color-interactive-primary-disabled: var(--color-neutral-500);
--color-interactive-secondary: var(--color-neutral-700);
--color-interactive-secondary-hover: var(--color-neutral-600);
--color-interactive-ghost-hover: var(--color-neutral-600);
--color-border-on-canvas: var(--color-neutral-800);
--color-border-subtle: var(--color-neutral-700);
--color-border-medium: var(--color-neutral-600);
--color-border-default: var(--color-neutral-500);
--color-border-strong: var(--color-neutral-90);
--color-border-focus: var(--color-peggy-blue-400);
--color-success-bg: var(--color-success-800);
--color-success-bg-subtle: var(--color-success-900);
--color-success-border: var(--color-success-700);
--color-success-text: var(--color-success-200);
--color-success-icon: var(--color-success-400);
--color-success-action: var(--color-success-400);
--color-success-action-hover: var(--color-success-600);
--color-warning-bg: var(--color-warning-800);
--color-warning-bg-subtle: var(--color-warning-900);
--color-warning-border: var(--color-warning-700);
--color-warning-text: var(--color-warning-200);
--color-warning-icon: var(--color-warning-400);
--color-warning-action: var(--color-warning-400);
--color-warning-action-hover: var(--color-warning-300);
--color-critical-bg: var(--color-critical-800);
--color-critical-bg-subtle: var(--color-critical-900);
--color-critical-border: var(--color-critical-700);
--color-critical-text: var(--color-critical-200);
--color-critical-icon: var(--color-critical-400);
--color-critical-action: var(--color-critical-400);
--color-critical-action-hover: var(--color-critical-300);
--color-critical-disabled: var(--color-critical-700);
}
.light {
--color-bg-canvas: var(--color-neutral-20);
--color-bg-default: var(--color-neutral-0);
--color-bg-subtle: var(--color-neutral-10);
--color-bg-muted: var(--color-neutral-30);
--color-bg-emphasis: var(--color-neutral-900);
--color-bg-active: var(--color-neutral-40);
--color-bg-inverse: var(--color-neutral-900);
--color-surface-default: var(--color-neutral-0);
--color-surface-default-subtle: #1C1C1C0A;
--color-surface-raised: var(--color-neutral-30);
--color-surface-overlay: var(--color-neutral-20);
--color-surface-sunken: var(--color-neutral-10);
--color-surface-sunken2: var(--color-neutral-20);
--color-text-primary: var(--color-neutral-900);
--color-text-secondary: var(--color-neutral-400);
--color-text-tertiary: var(--color-neutral-200);
--color-text-placeholder: var(--color-neutral-90);
--color-text-placeholder-subtle: var(--color-neutral-30);
--color-text-disabled: var(--color-neutral-60);
--color-text-inverse: var(--color-neutral-0);
--color-text-link: var(--color-peggy-blue-500);
--color-text-link-hover: var(--color-peggy-blue-600);
--color-icon-primary: var(--color-neutral-900);
--color-icon-secondary: var(--color-neutral-400);
--color-icon-tertiary: var(--color-neutral-200);
--color-icon-placeholder: var(--color-neutral-90);
--color-icon-placeholder-subtle: var(--color-neutral-30);
--color-icon-disabled: var(--color-neutral-60);
--color-icon-inverse: var(--color-neutral-0);
--color-icon-link: var(--color-peggy-blue-500);
--color-icon-link-hover: var(--color-peggy-blue-600);
--color-brand-primary: var(--color-neutral-900);
--color-brand-primary-hover: var(--color-neutral-700);
--color-brand-primary-active: var(--color-neutral-600);
--color-brand-on-primary: var(--color-neutral-0);
--color-brand-primary-subtle: var(--color-neutral-10);
--color-brand-primary-muted: var(--color-neutral-30);
--color-brand-secondary: var(--color-peggy-blue-500);
--color-brand-secondary-hover: var(--color-peggy-blue-600);
--color-brand-secondary-active: var(--color-peggy-blue-700);
--color-brand-on-secondary: var(--color-neutral-0);
--color-brand-secondary-subtle: var(--color-peggy-blue-50);
--color-brand-secondary-muted: var(--color-peggy-blue-100);
--color-brand-tertiary: var(--color-neutral-400);
--color-brand-tertiary-hover: var(--color-neutral-900);
--color-brand-tertiary-active: var(--color-neutral-700);
--color-brand-on-tertiary: var(--color-neutral-0);
--color-brand-tertiary-subtle: var(--color-peggy-blue-50);
--color-brand-tertiary-muted: var(--color-peggy-blue-100);
--color-interactive-primary: var(--color-neutral-900);
--color-interactive-primary-hover: var(--color-neutral-700);
--color-interactive-primary-active: var(--color-neutral-600);
--color-interactive-primary-disabled: var(--color-neutral-50);
--color-interactive-secondary: var(--color-neutral-0);
--color-interactive-secondary-hover: var(--color-neutral-10);
--color-interactive-ghost-hover: var(--color-neutral-20);
--color-border-on-canvas: var(--color-neutral-30);
--color-border-subtle: var(--color-neutral-30);
--color-border-medium: var(--color-neutral-40);
--color-border-default: var(--color-neutral-50);
--color-border-strong: var(--color-neutral-700);
--color-border-focus: var(--color-peggy-blue-500);
--color-success-bg: var(--color-success-100);
--color-success-bg-subtle: var(--color-success-50);
--color-success-border: var(--color-success-200);
--color-success-text: var(--color-success-700);
--color-success-icon: var(--color-success-500);
--color-success-action: var(--color-success-500);
--color-success-action-hover: var(--color-success-600);
--color-warning-bg: var(--color-warning-100);
--color-warning-bg-subtle: var(--color-warning-50);
--color-warning-border: var(--color-warning-300);
--color-warning-text: var(--color-warning-800);
--color-warning-icon: var(--color-warning-600);
--color-warning-action: var(--color-warning-500);
--color-warning-action-hover: var(--color-warning-600);
--color-critical-bg: var(--color-critical-50);
--color-critical-bg-subtle: var(--color-critical-25);
--color-critical-border: var(--color-critical-200);
--color-critical-text: var(--color-critical-700);
--color-critical-icon: var(--color-critical-500);
--color-critical-action: var(--color-critical-500);
--color-critical-action-hover: var(--color-critical-600);
--color-critical-disabled: var(--color-critical-100);
}
[class*="text-"] {
font-family: var(--font-base);
margin: 0;
}
.text-display-2xl-regular,
.text-display-2xl-medium,
.text-display-2xl-semibold,
.text-display-2xl-bold {
font-size: var(--text-display-2xl-size);
line-height: var(--text-display-2xl-line-height);
letter-spacing: var(--text-display-2xl-letter-spacing);
}
.text-display-2xl-regular {
font-weight: var(--font-weight-normal);
}
.text-display-2xl-medium {
font-weight: var(--font-weight-medium);
}
.text-display-2xl-semibold {
font-weight: var(--font-weight-semibold);
}
.text-display-2xl-bold {
font-weight: var(--font-weight-bold);
}
.text-display-xl-regular,
.text-display-xl-medium,
.text-display-xl-semibold,
.text-display-xl-bold {
font-size: var(--text-display-xl-size);
line-height: var(--text-display-xl-line-height);
letter-spacing: var(--text-display-xl-letter-spacing);
}
.text-display-xl-regular {
font-weight: var(--font-weight-normal);
}
.text-display-xl-medium {
font-weight: var(--font-weight-medium);
}
.text-display-xl-semibold {
font-weight: var(--font-weight-semibold);
}
.text-display-xl-bold {
font-weight: var(--font-weight-bold);
}
.text-display-lg-regular,
.text-display-lg-medium,
.text-display-lg-semibold,
.text-display-lg-bold {
font-size: var(--text-display-lg-size);
line-height: var(--text-display-lg-line-height);
letter-spacing: var(--text-display-lg-letter-spacing);
}
.text-display-lg-regular {
font-weight: var(--font-weight-normal);
}
.text-display-lg-medium {
font-weight: var(--font-weight-medium);
}
.text-display-lg-semibold {
font-weight: var(--font-weight-semibold);
}
.text-display-lg-bold {
font-weight: var(--font-weight-bold);
}
.text-display-md-regular,
.text-display-md-medium,
.text-display-md-semibold,
.text-display-md-bold {
font-size: var(--text-display-md-size);
line-height: var(--text-display-md-line-height);
letter-spacing: var(--text-display-md-letter-spacing);
}
.text-display-md-regular {
font-weight: var(--font-weight-normal);
}
.text-display-md-medium {
font-weight: var(--font-weight-medium);
}
.text-display-md-semibold {
font-weight: var(--font-weight-semibold);
}
.text-display-md-bold {
font-weight: var(--font-weight-bold);
}
.text-headline-lg-regular,
.text-headline-lg-medium,
.text-headline-lg-bold {
font-size: var(--text-headline-lg-size);
line-height: var(--text-headline-lg-line-height);
}
.text-headline-lg-regular {
font-weight: var(--font-weight-normal);
}
.text-headline-lg-medium {
font-weight: var(--font-weight-medium);
}
.text-headline-lg-bold {
font-weight: var(--font-weight-bold);
}
.text-headline-md-regular,
.text-headline-md-medium,
.text-headline-md-bold {
font-size: var(--text-headline-md-size);
line-height: var(--text-headline-md-line-height);
}
.text-headline-md-regular {
font-weight: var(--font-weight-normal);
}
.text-headline-md-medium {
font-weight: var(--font-weight-medium);
}
.text-headline-md-bold {
font-weight: var(--font-weight-bold);
}
.text-headline-sm-regular,
.text-headline-sm-medium,
.text-headline-sm-bold {
font-size: var(--text-headline-sm-size);
line-height: var(--text-headline-sm-line-height);
}
.text-headline-sm-regular {
font-weight: var(--font-weight-normal);
}
.text-headline-sm-medium {
font-weight: var(--font-weight-medium);
}
.text-headline-sm-bold {
font-weight: var(--font-weight-bold);
}
.text-title-lg-regular,
.text-title-lg-medium,
.text-title-lg-semibold,
.text-title-lg-bold {
font-size: var(--text-title-lg-size);
line-height: var(--text-title-lg-line-height);
}
.text-title-lg-regular {
font-weight: var(--font-weight-normal);
}
.text-title-lg-medium {
font-weight: var(--font-weight-medium);
}
.text-title-lg-semibold {
font-weight: var(--font-weight-semibold);
}
.text-title-lg-bold {
font-weight: var(--font-weight-bold);
}
.text-title-md-regular,
.text-title-md-medium,
.text-title-md-semibold,
.text-title-md-bold {
font-size: var(--text-title-md-size);
line-height: var(--text-title-md-line-height);
}
.text-title-md-regular {
font-weight: var(--font-weight-normal);
}
.text-title-md-medium {
font-weight: var(--font-weight-medium);
}
.text-title-md-semibold {
font-weight: var(--font-weight-semibold);
}
.text-title-md-bold {
font-weight: var(--font-weight-bold);
}
.text-title-sm-regular,
.text-title-sm-medium,
.text-title-sm-semibold,
.text-title-sm-bold {
font-size: var(--text-title-sm-size);
line-height: var(--text-title-sm-line-height);
}
.text-title-sm-regular {
font-weight: var(--font-weight-normal);
}
.text-title-sm-medium {
font-weight: var(--font-weight-medium);
}
.text-title-sm-semibold {
font-weight: var(--font-weight-semibold);
}
.text-title-sm-bold {
font-weight: var(--font-weight-bold);
}
.text-body-xl-regular,
.text-body-xl-medium,
.text-body-xl-semibold,
.text-body-xl-bold {
font-size: var(--text-body-xl-size);
line-height: var(--text-body-xl-line-height);
}
.text-body-xl-regular {
font-weight: var(--font-weight-normal);
}
.text-body-xl-medium {
font-weight: var(--font-weight-medium);
}
.text-body-xl-semibold {
font-weight: var(--font-weight-semibold);
}
.text-body-xl-bold {
font-weight: var(--font-weight-bold);
}
.text-body-lg-regular,
.text-body-lg-medium,
.text-body-lg-semibold,
.text-body-lg-bold {
font-size: var(--text-body-lg-size);
line-height: var(--text-body-lg-line-height);
}
.text-body-lg-regular {
font-weight: var(--font-weight-normal);
}
.text-body-lg-medium {
font-weight: var(--font-weight-medium);
}
.text-body-lg-semibold {
font-weight: var(--font-weight-semibold);
}
.text-body-lg-bold {
font-weight: var(--font-weight-bold);
}
.text-body-md-regular,
.text-body-md-medium,
.text-body-md-semibold,
.text-body-md-bold {
font-size: var(--text-body-md-size);
line-height: var(--text-body-md-line-height);
}
.text-body-md-regular {
font-weight: var(--font-weight-normal);
}
.text-body-md-medium {
font-weight: var(--font-weight-medium);
}
.text-body-md-semibold {
font-weight: var(--font-weight-semibold);
}
.text-body-md-bold {
font-weight: var(--font-weight-bold);
}
.text-body-sm-regular,
.text-body-sm-medium,
.text-body-sm-semibold,
.text-body-sm-bold {
font-size: var(--text-body-sm-size);
line-height: var(--text-body-sm-line-height);
}
.text-body-sm-regular {
font-weight: var(--font-weight-normal);
}
.text-body-sm-medium {
font-weight: var(--font-weight-medium);
}
.text-body-sm-semibold {
font-weight: var(--font-weight-semibold);
}
.text-body-sm-bold {
font-weight: var(--font-weight-bold);
}
.text-body-xs-regular,
.text-body-xs-medium,
.text-body-xs-semibold,
.text-body-xs-bold {
font-size: var(--text-body-xs-size);
line-height: var(--text-body-xs-line-height);
}
.text-body-xs-regular {
font-weight: var(--font-weight-normal);
}
.text-body-xs-medium {
font-weight: var(--font-weight-medium);
}
.text-body-xs-semibold {
font-weight: var(--font-weight-semibold);
}
.text-body-xs-bold {
font-weight: var(--font-weight-bold);
}
.text-label-lg-regular,
.text-label-lg-medium,
.text-label-lg-semibold,
.text-label-lg-bold {
font-size: var(--text-label-lg-size);
line-height: var(--text-label-lg-line-height);
}
.text-label-lg-regular {
font-weight: var(--font-weight-normal);
}
.text-label-lg-medium {
font-weight: var(--font-weight-medium);
}
.text-label-lg-semibold {
font-weight: var(--font-weight-semibold);
}
.text-label-lg-bold {
font-weight: var(--font-weight-bold);
}
.text-label-md-regular,
.text-label-md-medium,
.text-label-md-semibold,
.text-label-md-bold {
font-size: var(--text-label-md-size);
line-height: var(--text-label-md-line-height);
}
.text-label-md-regular {
font-weight: var(--font-weight-normal);
}
.text-label-md-medium {
font-weight: var(--font-weight-medium);
}
.text-label-md-semibold {
font-weight: var(--font-weight-semibold);
}
.text-label-md-bold {
font-weight: var(--font-weight-bold);
}
.text-label-sm-regular,
.text-label-sm-medium,
.text-label-sm-semibold,
.text-label-sm-bold {
font-size: var(--text-label-sm-size);
line-height: var(--text-label-sm-line-height);
}
.text-label-sm-regular {
font-weight: var(--font-weight-normal);
}
.text-label-sm-medium {
font-weight: var(--font-weight-medium);
}
.text-label-sm-semibold {
font-weight: var(--font-weight-semibold);
}
.text-label-sm-bold {
font-weight: var(--font-weight-bold);
}
.text-label-xs-regular,
.text-label-xs-medium,
.text-label-xs-semibold,
.text-label-xs-bold {
font-size: var(--text-label-xs-size);
line-height: var(--text-label-xs-line-height);
}
.text-label-xs-regular {
font-weight: var(--font-weight-normal);
}
.text-label-xs-medium {
font-weight: var(--font-weight-medium);
}
.text-label-xs-semibold {
font-weight: var(--font-weight-semibold);
}
.text-label-xs-bold {
font-weight: var(--font-weight-bold);
}
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
font-family: var(--font-base);
font-weight: var(--font-weight-normal);
border: none;
border-radius: 8px;
cursor: pointer;
transition: all 0.15s ease;
white-space: nowrap;
text-decoration: none;
line-height: 1;
box-shadow: var(--shadow-sm);
}
.btn {
font-size: 14px;
line-height: 20px;
padding: 8px 16px;
height: 36px;
}
.btn--rounded {
border-radius: 9999px;
}
.btn .btn__icon {
width: 16px;
height: 16px;
flex-shrink: 0;
}
.btn--sm {
font-size: 12px;
line-height: 16px;
padding: 6px 12px;
gap: 6px;
height: 28px;
}
.btn--sm .btn__icon {
width: 14px;
height: 14px;
}
.btn--md {
font-size: 14px;
line-height: 20px;
padding: 10px 18px;
height: 40px;
}
.btn--md .btn__icon {
width: 18px;
height: 18px;
}
.btn--lg {
font-size: 16px;
line-height: 24px;
padding: 12px 20px;
height: 48px;
}
.btn--lg .btn__icon {
width: 20px;
height: 20px;
}
.btn--icon-only {
padding: 8px;
width: 36px;
}
.btn--sm.btn--icon-only {
padding: 6px;
width: 28px;
}
.btn--md.btn--icon-only {
padding: 10px;
width: 40px;
}
.btn--lg.btn--icon-only {
padding: 14px;
width: 48px;
}
.btn--icon-only .btn__icon {
width: 18px;
height: 18px;
}
.btn--sm.btn--icon-only .btn__icon {
width: 16px;
height: 16px;
}
.btn--md.btn--icon-only .btn__icon {
width: 20px;
height: 20px;
}
.btn--lg.btn--icon-only .btn__icon {
width: 20px;
height: 20px;
}
.btn__dot {
width: 8px;
height: 8px;
border-radius: 50%;
background-color: currentColor;
flex-shrink: 0;
}
.btn--sm.btn--dot {
gap: 7px;
}
.btn--dot {
gap: 9px;
}
.btn--primary {
background-color: var(--color-brand-primary);
color: var(--color-brand-on-primary);
box-shadow: var(--shadow-sm);
}
.btn--primary:hover,
.btn--primary[data-hover] {
background-color: var(--color-brand-primary-hover);
}
.btn--primary:focus-visible,
.btn--primary[data-focus] {
background-color: var(--color-brand-primary);
box-shadow: 0px 0px 0px 2px var(--color-border-default), 0px 1px 2px 0px #0000000D;
}
.btn--primary:active,
.btn--primary[data-active] {
background-color: var(--color-brand-primary-active);
box-shadow: var(--shadow-sm);
}
.btn--primary:disabled,
.btn--primary[disabled] {
background-color: var(--color-brand-primary-muted);
color: var(--color-brand-on-primary);
cursor: not-allowed;
box-shadow: var(--shadow-sm);
}
.btn--primary.btn--error {
background-color: var(--color-critical-action);
color: var(--color-brand-on-primary);
}
.btn--primary.btn--error:hover,
.btn--primary.btn--error[data-hover] {
background-color: var(--color-critical-action-hover);
}
.btn--primary.btn--error:focus-visible,
.btn--primary.btn--error[data-focus] {
background-color: var(--color-critical-action);
box-shadow: 0px 0px 0px 2px var(--color-critical-400), var(--shadow-sm);
}
.btn--primary.btn--error:disabled,
.btn--primary.btn--error[disabled] {
background-color: var(--color-critical-bg);
color: var(--color-brand-on-primary);
cursor: not-allowed;
}
.btn--secondary {
background-color: var(--color-brand-secondary);
color: var(--color-brand-on-secondary);
}
.btn--secondary:hover,
.btn--secondary[data-hover] {
background-color: var(--color-brand-secondary-hover);
}
.btn--secondary:focus-visible,
.btn--secondary[data-focus] {
background-color: var(--color-brand-secondary-hover);
box-shadow: var(--shadow-focus) var(--color-brand-secondary-muted), var(--shadow-sm);
}
.btn--secondary:active,
.btn--secondary[data-active] {
background-color: var(--color-brand-secondary-active);
box-shadow: var(--shadow-sm);
}
.btn--secondary:disabled,
.btn--secondary[disabled] {
background-color: var(--color-brand-secondary-muted);
cursor: not-allowed;
}
.btn--secondary.btn--error {
background-color: var(--color-critical-bg-subtle);
color: var(--color-critical-action-hover);
}
.btn--secondary.btn--error:hover,
.btn--secondary.btn--error[data-hover] {
background-color: var(--color-critical-bg);
color: var(--color-critical-action-hover);
}
.btn--secondary.btn--error:focus-visible,
.btn--secondary.btn--error[data-focus] {
background-color: var(--color-critical-bg-subtle);
color: var(--color-critical-text);
box-shadow: 0px 0px 0px 2px var(--color-critical-400), var(--shadow-sm);
}
.btn--secondary.btn--error:disabled,
.btn--secondary.btn--error[disabled] {
background-color: var(--color-critical-bg-subtle);
color: var(--color-critical-disabled);
box-shadow: var(--shadow-sm);
cursor: not-allowed;
}
.btn--tertiary {
background-color: transparent;
color: var(--color-text-secondary);
border: 1px solid var(--color-border-subtle);
box-shadow: var(--shadow-sm);
line-height: 16px;
}
.btn--tertiary:hover,
.btn--tertiary[data-hover] {
background-color: var(--color-surface-sunken);
border-color: var(--color-border-default);
}
.btn--tertiary:focus-visible,
.btn--tertiary[data-focus] {
background-color: var(--color-surface-default);
border: 1px solid var(--color-border-default);
box-shadow: 0px 0px 0px 2px var(--color-border-default), var(--shadow-sm);
}
.btn--tertiary:active,
.btn--tertiary[data-active] {
background-color: var(--color-surface-raised);
border: 1px solid var(--color-border-strong);
box-shadow: var(--shadow-sm);
font-weight: 500;
}
.btn--tertiary:disabled,
.btn--tertiary[disabled] {
background-color: var(--color-surface-default);
border: 1px solid var(--color-border-subtle);
color: var(--color-text-disabled);
cursor: not-allowed;
}
.btn--tertiary.btn--error {
background-color: transparent;
color: var(--color-critical-text);
border: 1px solid var(--color-critical-border);
}
.btn--tertiary.btn--error:hover,
.btn--tertiary.btn--error[data-hover] {
background-color: var(--color-critical-bg-subtle);
box-shadow: var(--shadow-sm);
}
.btn--tertiary.btn--error:focus-visible,
.btn--tertiary.btn--error[data-focus] {
background-color: var(--color-surface-default);
box-shadow: 0px 0px 0px 2px var(--color-critical-400), var(--shadow-sm);
}
.btn--tertiary.btn--error:disabled,
.btn--tertiary.btn--error[disabled] {
background-color: var(--color-surface-default);
border: 1px solid var(--color-critical-disabled);
color: var(--color-critical-disabled);
cursor: not-allowed;
}
.btn--ghost {
background-color: transparent;
color: var(--color-text-secondary);
box-shadow: none;
}
.btn--ghost:hover,
.btn--ghost[data-hover] {
background-color: var(--color-surface-raised);
color: var(--color-text-primary);
}
.btn--ghost:focus-visible,
.btn--ghost[data-focus] {
color: var(--color-text-primary);
background-color: var(--color-surface-sunken);
box-shadow: 0px 0px 0px 3px var(--color-border-default);
}
.btn--ghost:active,
.btn--ghost[data-active] {
color: var(--color-text-primary);
background-color: var(--color-surface-raised);
box-shadow: none;
}
.btn--ghost.is-active {
background-color: var(--color-surface-raised);
color: var(--color-text-primary);
}
.btn--ghost:disabled,
.btn--ghost[disabled] {
color: var(--color-text-disabled);
cursor: not-allowed;
transform: none;
}
.btn--ghost.btn--error {
background-color: transparent;
color: var(--color-critical-text);
box-shadow: none;
}
.btn--ghost.btn--error:hover,
.btn--ghost.btn--error[data-hover] {
background-color: var(--color-critical-bg-subtle);
}
.btn--ghost.btn--error:focus-visible,
.btn--ghost.btn--error[data-focus] {
background-color: transparent;
}
.btn--ghost.btn--error:disabled,
.btn--ghost.btn--error[disabled] {
color: var(--color-critical-disabled);
cursor: not-allowed;
transform: none;
}
.btn--secondary-ghost {
background-color: transparent;
color: var(--color-brand-secondary);
box-shadow: none;
}
.btn--secondary-ghost:hover,
.btn--secondary-ghost[data-hover] {
background-color: color-mix(in srgb, var(--color-brand-secondary) 15%, transparent);
color: var(--color-brand-secondary-hover);
}
.btn--secondary-ghost:focus-visible,
.btn--secondary-ghost[data-focus] {
color: var(--color-brand-secondary);
background-color: transparent;
box-shadow: 0px 1px 2px 0px #0000000D;
}
.btn--secondary-ghost:active,
.btn--secondary-ghost[data-active] {
color: var(--color-brand-secondary-active);
background-color: color-mix(in srgb, var(--color-brand-secondary) 15%, transparent);
box-shadow: none;
}
.btn--secondary-ghost:disabled,
.btn--secondary-ghost[disabled] {
color: var(--color-text-disabled);
cursor: not-allowed;
transform: none;
}
.btn--text {
background-color: transparent;
color: var(--color-brand-tertiary);
box-shadow: none;
padding-left: 0;
padding-right: 0;
}
.btn--text:hover,
.btn--text[data-hover] {
color: var(--color-text-primary);
}
.btn--text:focus-visible,
.btn--text[data-focus] {
color: var(--color-brand-primary);
}
.btn--text:active,
.btn--text[data-active] {
color: var(--color-brand-primary-active);
box-shadow: none;
}
.btn--text:disabled,
.btn--text[disabled] {
color: var(--color-text-disabled);
cursor: not-allowed;
transform: none;
}
.btn--text.btn--sm,
.btn--text.btn--md,
.btn--text.btn--lg {
padding-left: 0;
padding-right: 0;
}
.btn--text.btn--error {
background-color: transparent;
color: var(--color-critical-action);
box-shadow: none;
}
.btn--text.btn--error:hover,
.btn--text.btn--error[data-hover] {
color: var(--color-critical-action-hover);
}
.btn--text.btn--error:focus-visible,
.btn--text.btn--error[data-focus] {
color: var(--color-critical-action);
}
.btn--text.btn--error:disabled,
.btn--text.btn--error[disabled] {
color: var(--color-critical-disabled);
cursor: not-allowed;
transform: none;
}
.btn--link {
background-color: transparent;
color: var(--color-text-link);
box-shadow: none;
padding-left: 0;
padding-right: 0;
}
.btn--link:hover,
.btn--link[data-hover] {
color: var(--color-text-link-hover);
}
.btn--link:focus-visible,
.btn--link[data-focus] {
color: var(--color-text-link);
}
.btn--link:active,
.btn--link[data-active] {
color: var(--color-text-link);
box-shadow: none;
}
.btn--link:disabled,
.btn--link[disabled] {
color: var(--color-text-disabled);
cursor: not-allowed;
transform: none;
}
.btn--link.btn--sm,
.btn--link.btn--md,
.btn--link.btn--lg {
padding-left: 0;
padding-right: 0;
}
.badge {
display: inline-flex;
align-items: center;
gap: 7px;
font-family: var(--font-base);
font-size: var(--text-body-md-size);
line-height: var(--text-body-md-line-height);
font-weight: var(--font-weight-medium);
padding: 2px 10px;
border-radius: 9999px;
border: 1px solid transparent;
white-space: nowrap;
cursor: default;
transition: background-color var(--transition-fast), color var(--transition-fast);
}
.badge--sm {
font-size: var(--text-label-xs-size);
line-height: var(--text-label-xs-line-height);
font-weight: var(--font-weight-normal);
padding: 2px 8px;
}
.badge--lg {
font-size: var(--text-body-md-size);
line-height: var(--text-body-md-line-height);
font-weight: var(--font-weight-medium);
padding: 4px 12px;
}
.badge--neutral {
background-color: var(--color-surface-sunken2);
color: var(--color-text-secondary);
}
.badge--neutral-bold {
background-color: var(--color-surface-sunken2);
color: var(--color-text-primary);
}
.badge--critical {
background-color: var(--color-critical-bg-subtle);
color: var(--color-critical-text);
}
.badge--warning {
background-color: var(--color-warning-bg-subtle);
color: var(--color-warning-text);
}
.badge--success {
background-color: var(--color-success-bg-subtle);
color: var(--color-success-text);
}
.badge--neutral-text {
background-color: var(--color-neutral-10);
color: var(--color-neutral-500);
}
.badge--info {
background-color: var(--color-peggy-blue-50);
color: var(--color-peggy-blue-600);
}
.badge--accent {
background-color: var(--color-brand-secondary-subtle);
color: var(--color-brand-secondary);
}
.badge--purple {
background-color: #F3E8FF;
color: #7C3AED;
}
.badge--pink {
background-color: #FCE7F3;
color: #BE185D;
}
.badge--rose {
background-color: #FFF1F2;
color: #E11D48;
}
.badge--critical-bold {
background-color: var(--color-critical-bg-subtle);
color: var(--color-critical-500);
}
.badge--orange {
background-color: var(--color-orange-50);
color: var(--color-orange-700);
}
.badge__dot {
display: inline-block;
width: 6px;
height: 6px;
border-radius: 50%;
background-color: currentColor;
flex-shrink: 0;
}
.badge__icon {
width: 6px;
height: 6px;
flex-shrink: 0;
display: inline-flex;
align-items: center;
justify-content: center;
color: currentColor;
}
.badge__icon svg {
width: 100%;
height: 100%;
}
.badge__avatar {
width: 16px;
height: 16px;
border-radius: 9999px;
object-fit: cover;
flex-shrink: 0;
}
.badge__flag {
display: inline-flex;
align-items: center;
justify-content: center;
width: 16px;
height: 16px;
border-radius: 9999px;
overflow: hidden;
font-size: 22px;
line-height: 1;
flex-shrink: 0;
}
.badge:has(.badge__avatar),
.badge:has(.badge__flag) {
gap: 6px;
}
.badge--sm:has(.badge__avatar),
.badge--sm:has(.badge__flag) {
padding: 2px 8px 2px 3px;
}
.badge:has(.badge__avatar):not(.badge--sm):not(.badge--lg),
.badge:has(.badge__flag):not(.badge--sm):not(.badge--lg) {
padding: 2px 10px 2px 4px;
}
.badge--lg:has(.badge__avatar),
.badge--lg:has(.badge__flag) {
padding: 6px 12px 6px 6px;
}
.badge__dismiss {
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
cursor: pointer;
color: currentColor;
opacity: 0.6;
background: none;
border: none;
padding: 0;
line-height: 1;
font-size: 0.85em;
transition: opacity var(--transition-fast);
}
.badge__dismiss:hover { opacity: 1; }
.badge__arrow {
display: inline-flex;
align-items: center;
flex-shrink: 0;
color: currentColor;
}
.badge--icon-only {
padding: 0;
gap: 0;
width: 24px;
height: 24px;
justify-content: center;
}
.badge--icon-only.badge--sm {
width: 20px;
height: 20px;
}
.badge--icon-only.badge--lg {
width: 26px;
height: 26px;
}
.badge--icon-only .badge__icon {
width: 12px;
height: 12px;
}
.badge--icon-only.badge--sm .badge__icon {
width: 10px;
height: 10px;
}
.badge--icon-only.badge--lg .badge__icon {
width: 13px;
height: 13px;
}
.status-banner {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 4px 4px 4px 12px;
border-radius: 9999px;
border: 1px solid transparent;
font-size: var(--text-body-sm-size);
font-family: var(--font-base);
white-space: nowrap;
}
.status-banner:has(.badge:first-child) {
padding: 4px 12px 4px 4px;
}
.status-banner:has(.badge__arrow) {
gap: 7px;
}
.status-banner__message {
font-weight: var(--font-weight-medium);
}
.status-banner__arrow {
margin-left: 2px;
flex-shrink: 0;
}
.status-banner--info {
background-color: var(--color-peggy-blue-50);
border-color: var(--color-peggy-blue-100);
color: var(--color-peggy-blue-700);
}
.status-banner--neutral {
background-color: var(--color-neutral-20);
border-color: var(--color-neutral-30);
color: var(--color-neutral-500);
}
.status-banner--critical {
background-color: var(--color-critical-50);
border-color: var(--color-critical-100);
color: var(--color-critical-700);
}
.status-banner--warning {
background-color: var(--color-warning-100);
border-color: var(--color-warning-200);
color: var(--color-warning-800);
}
.status-banner--success {
background-color: var(--color-success-50);
border-color: var(--color-success-100);
color: var(--color-success-700);
}
.status-banner .badge {
background-color: var(--color-surface-default);
border-style: solid;
border-width: 1px;
gap: 6px;
}
.status-banner .badge--info,
.status-banner .badge--accent {
border-color: var(--color-brand-secondary-muted);
}
.status-banner .badge--neutral,
.status-banner .badge--neutral-bold,
.status-banner .badge--neutral-text {
border-color: var(--color-border-default);
}
.status-banner .badge--critical,
.status-banner .badge--critical-bold {
border-color: var(--color-critical-border);
}
.status-banner .badge--warning {
border-color: var(--color-warning-border);
}
.status-banner .badge--success {
border-color: var(--color-success-border);
}
.badge-row {
display: flex;
flex-wrap: wrap;
gap: 10px;
align-items: center;
margin-bottom: 8px;
}
.status-banner-stack {
display: flex;
flex-direction: column;
gap: 10px;
align-items: flex-start;
}
pg-avatar {
display: inline-block;
line-height: 0;
}
.pg-av {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
overflow: visible;
font-family: var(--font-base);
font-weight: var(--font-weight-medium);
letter-spacing: -0.02em;
user-select: none;
}
.pg-av__img {
width: 100%;
height: 100%;
border-radius: inherit;
object-fit: cover;
display: block;
border: 0.83px solid var(--color-border-subtle);
}
.pg-av__inner {
position: relative;
width: var(--av-size);
height: var(--av-size);
border-radius: var(--av-radius);
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
background: var(--color-surface-sunken2);
color: var(--av-fg, var(--color-text-placeholder));
font-size: var(--av-font-size);
line-height: 1;
flex-shrink: 0;
border: 0.83px solid var(--color-border-subtle);
transition: border var(--transition-fast), border-width var(--transition-fast);
box-sizing: border-box;
}
.pg-av:hover .pg-av__inner {
border: 0.83px solid var(--color-border-subtle);
background: var(--color-surface-sunken2);
}
.pg-av:active .pg-av__inner,
.pg-av--active .pg-av__inner {
border: 4px solid var(--color-border-subtle);
background: var(--color-surface-sunken2);
}
.pg-av--xs  { --av-size: 20px; --av-font-size: 10px;  --av-icon-size: 13px; --av-badge-size: 7px;  }
.pg-av--sm  { --av-size: 24px; --av-font-size: 12px;  --av-icon-size: 16px; --av-badge-size: 8px;  }
.pg-av--md  { --av-size: 32px; --av-font-size: 14px;  --av-icon-size: 20px; --av-badge-size: 10px; }
.pg-av--lg  { --av-size: 40px; --av-font-size: 16px;  --av-icon-size: 24px; --av-badge-size: 12px; }
.pg-av--xl  { --av-size: 48px; --av-font-size: 18px;  --av-icon-size: 28px; --av-badge-size: 14px; }
.pg-av--2xl { --av-size: 56px; --av-font-size: 20px;  --av-icon-size: 32px; --av-badge-size: 16px; }
.pg-av--3xl { --av-size: 64px; --av-font-size: 24px;  --av-icon-size: 32px; --av-badge-size: 18px; }
.pg-av--circle .pg-av__inner { --av-radius: 9999px; }
.pg-av--square .pg-av__inner { --av-radius: var(--radius-sm); }
.pg-av--square.pg-av--lg  .pg-av__inner,
.pg-av--square.pg-av--xl  .pg-av__inner { --av-radius: var(--radius); }
.pg-av--square.pg-av--2xl .pg-av__inner,
.pg-av--square.pg-av--3xl .pg-av__inner { --av-radius: var(--radius-lg); }
.pg-av__placeholder {
width: var(--av-icon-size, 60%);
height: var(--av-icon-size, 60%);
color: var(--color-icon-primary);
flex-shrink: 0;
}
.pg-av__status {
position: absolute;
bottom: -1px;
right: -1px;
width: var(--av-badge-size);
height: var(--av-badge-size);
border-radius: 9999px;
border: 2px solid var(--color-bg-canvas);
box-sizing: border-box;
z-index: 1;
}
.pg-av--xs .pg-av__status,
.pg-av--sm .pg-av__status { border-width: 1.5px; }
.pg-av__status--online  { background: var(--color-success-icon); }
.pg-av__status--busy    { background: var(--color-critical-icon); }
.pg-av__status--away    { background: var(--color-warning-icon); }
.pg-av__status--offline { background: var(--color-border-default); }
.pg-av__badge {
position: absolute;
bottom: -2px;
right: -2px;
width: calc(var(--av-badge-size) * 1.55);
height: calc(var(--av-badge-size) * 1.55);
border-radius: 9999px;
background: var(--color-brand-primary);
border: 2px solid var(--color-bg-canvas);
display: flex;
align-items: center;
justify-content: center;
z-index: 1;
color: var(--color-brand-on-primary);
font-size: calc(var(--av-badge-size) * 0.75);
}
.pg-av--xs .pg-av__badge,
.pg-av--sm .pg-av__badge { border-width: 1.5px; }
pg-avatar-group {
display: inline-flex;
align-items: center;
}
.pg-av-group {
display: inline-flex;
align-items: center;
flex-direction: row;
}
.pg-av-group pg-avatar + pg-avatar,
.pg-av-group .pg-av-group__overflow {
margin-left: var(--av-group-offset, -10px);
}
.pg-av-group--xs  { --av-group-offset: -5px;  }
.pg-av-group--sm  { --av-group-offset: -6px;  }
.pg-av-group--md  { --av-group-offset: -8px;  }
.pg-av-group--lg  { --av-group-offset: -10px; }
.pg-av-group--xl  { --av-group-offset: -12px; }
.pg-av-group--2xl { --av-group-offset: -14px; }
.pg-av-group--3xl { --av-group-offset: -16px; }
.pg-av-group pg-avatar .pg-av__inner {
box-shadow: 0 0 0 2px var(--color-bg-canvas);
border-color: transparent;
}
.pg-av-group__overflow {
display: inline-flex;
align-items: center;
justify-content: center;
width: var(--av-size);
height: var(--av-size);
border-radius: 9999px;
background: var(--color-surface-sunken2);
color: var(--color-text-placeholder);
font-family: var(--font-base);
font-size: var(--av-font-size);
font-weight: var(--font-weight-medium);
border: 0.83px solid var(--color-border-subtle);
box-shadow: 0 0 0 2px var(--color-bg-canvas);
white-space: nowrap;
cursor: default;
}
.pg-av-group__add {
display: inline-flex;
align-items: center;
justify-content: center;
width: var(--av-size);
height: var(--av-size);
border-radius: 9999px;
background: transparent;
color: var(--color-text-tertiary);
font-size: var(--av-font-size);
border: 0.83px dashed var(--color-border-default);
cursor: pointer;
margin-left: 6px;
transition: background var(--transition-fast), color var(--transition-fast),
border-color var(--transition-fast);
}
.pg-av-group__add:hover {
background: var(--color-surface-sunken2);
color: var(--color-text-primary);
border-color: var(--color-border-strong);
}
body {
font-size: var(--font-size-base);
line-height: var(--line-height-base);
color: var(--color-text-primary);
background-color: var(--color-bg-canvas);
}
section {
max-width: 1440px;
margin: auto;
padding: 2rem;
}
.page-intro {
color: var(--color-text-secondary);
margin-top: var(--space-sm);
}
.family-heading {
max-width: 1440px;
margin: var(--space-2xl) auto var(--space-lg);
padding: 0 2rem;
color: var(--color-text-primary);
}
.family-heading:first-of-type {
margin-top: 0;
}
.type-spec {
border-top: 1px solid var(--color-border-subtle);
padding-top: var(--space-xl);
padding-bottom: var(--space-xl);
}
.type-spec:first-of-type {
border-top: none;
}
.type-spec__header {
display: flex;
align-items: baseline;
justify-content: space-between;
flex-wrap: wrap;
gap: var(--space-sm);
margin-bottom: var(--space-lg);
}
.type-spec__label {
font-size: var(--font-size-sm);
font-weight: var(--font-weight-semibold);
color: var(--color-text-secondary);
text-transform: uppercase;
letter-spacing: 0.04em;
}
.type-spec__meta {
font-size: var(--font-size-sm);
color: var(--color-text-tertiary);
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.type-spec__row {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: var(--space-lg);
}
.type-spec__example {
display: flex;
flex-direction: column;
gap: var(--space-sm);
min-width: 0;
}
.type-spec__example code {
font-size: var(--font-size-sm);
color: var(--color-text-link);
background-color: var(--color-bg-subtle);
border: 1px solid var(--color-border-subtle);
border-radius: 4px;
padding: var(--space-xs) var(--space-sm);
width: fit-content;
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
@media (max-width: 1024px) {
.type-spec__row {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 600px) {
.type-spec__row {
grid-template-columns: 1fr;
}
}
.page-home {
display: flex;
align-items: center;
justify-content: center;
padding: var(--space-lg);
}
.home-content {
max-width: 720px;
width: 100%;
text-align: center;
}
.home-content h1 {
margin-bottom: var(--space-sm);
}
.page-list {
margin-top: var(--space-2xl);
display: flex;
flex-direction: column;
gap: var(--space-md);
}
.page-card {
display: block;
text-align: left;
padding: var(--space-lg);
background-color: var(--color-surface-default);
border: 1px solid var(--color-border-subtle);
border-radius: var(--radius);
transition: border-color var(--transition), transform var(--transition);
text-decoration: none;
color: inherit;
}
.page-card:hover {
border-color: var(--color-border-focus);
transform: translateY(-2px);
}
.page-card__title {
display: block;
color: var(--color-text-primary);
margin-bottom: var(--space-xs);
}
.page-card__desc {
display: block;
color: var(--color-text-secondary);
}
@media (max-width: 600px) {
.page-home {
align-items: flex-start;
padding-top: var(--space-2xl);
}
.page-card {
padding: var(--space-md);
}
}
.logo-spec__row {
display: flex;
flex-direction: column;
gap: var(--space-lg);
}
.url-block {
display: block;
background-color: var(--color-bg-subtle);
border: 1px solid var(--color-border-subtle);
border-radius: var(--radius);
padding: var(--space-md) var(--space-lg);
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
color: var(--color-text-primary);
word-break: break-all;
}
.url-token {
color: var(--color-text-link);
font-weight: var(--font-weight-semibold);
}
.url-note {
color: var(--color-text-secondary);
}
.inline-code {
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
font-size: 0.9em;
background-color: var(--color-bg-subtle);
padding: 0.1em 0.3em;
border-radius: 4px;
border: 1px solid var(--color-border-subtle);
}
.logo-example {
display: flex;
flex-direction: column;
gap: var(--space-sm);
align-items: flex-start;
}
.logo-example img {
max-height: 64px;
width: auto;
padding: var(--space-md);
background-color: var(--color-bg-subtle);
border: 1px solid var(--color-border-subtle);
border-radius: var(--radius);
}
.logo-table-wrap {
overflow-x: auto;
}
.logo-table {
width: 100%;
text-align: left;
}
.logo-table th,
.logo-table td {
padding: var(--space-sm) var(--space-md);
border-bottom: 1px solid var(--color-border-subtle);
}
.logo-table th {
color: var(--color-text-secondary);
text-transform: uppercase;
letter-spacing: 0.04em;
}
.logo-table tbody tr:last-child td {
border-bottom: none;
}
.logo-table code {
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
font-size: 0.9em;
background-color: var(--color-bg-subtle);
padding: 0.15em 0.4em;
border-radius: 4px;
border: 1px solid var(--color-border-subtle);
}
.color-family {
margin-bottom: var(--space-2xl);
}
.color-family__header {
display: flex;
align-items: baseline;
justify-content: space-between;
flex-wrap: wrap;
gap: var(--space-sm);
margin-bottom: var(--space-lg);
}
.color-family__label {
font-size: var(--font-size-sm);
font-weight: var(--font-weight-semibold);
color: var(--color-text-secondary);
text-transform: uppercase;
letter-spacing: 0.04em;
}
.color-family__desc {
font-size: var(--font-size-sm);
color: var(--color-text-tertiary);
max-width: 480px;
}
.color-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
gap: var(--space-md);
}
.color-swatch {
border-radius: var(--radius);
overflow: hidden;
border: 1px solid var(--color-border-subtle);
transition: transform var(--transition), box-shadow var(--transition);
}
.color-swatch:hover {
transform: translateY(-2px);
box-shadow: var(--shadow-md);
}
.color-swatch__preview {
height: 80px;
width: 100%;
}
.color-swatch__info {
padding: var(--space-sm) var(--space-md);
background: var(--color-surface-default);
}
.color-swatch__name {
font-size: var(--text-body-sm-size);
font-weight: var(--font-weight-medium);
color: var(--color-text-primary);
line-height: 1.3;
}
.color-swatch__hex {
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
font-size: var(--text-body-xs-size);
color: var(--color-text-tertiary);
line-height: 1.3;
margin-top: 2px;
}
.semantic-table-wrap {
overflow-x: auto;
margin-top: var(--space-lg);
}
.semantic-table {
width: 100%;
text-align: left;
border-collapse: collapse;
font-size: var(--text-body-sm-size);
}
.semantic-table th,
.semantic-table td {
padding: var(--space-sm) var(--space-md);
border-bottom: 1px solid var(--color-border-subtle);
}
.semantic-table th {
color: var(--color-text-secondary);
font-weight: var(--font-weight-semibold);
text-transform: uppercase;
letter-spacing: 0.04em;
font-size: var(--text-label-xs-size);
white-space: nowrap;
}
.semantic-table tbody tr:last-child td {
border-bottom: none;
}
.semantic-table tbody tr:hover {
background: var(--color-bg-subtle);
}
.token-name {
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
font-size: var(--text-body-xs-size);
color: var(--color-text-primary);
}
.token-value {
display: flex;
align-items: center;
gap: var(--space-sm);
}
.token-dot {
width: 16px;
height: 16px;
border-radius: var(--radius-sm);
border: 1px solid var(--color-border-subtle);
flex-shrink: 0;
}
.token-hex {
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
font-size: var(--text-body-xs-size);
color: var(--color-text-tertiary);
}
.theme-toggle {
position: fixed;
top: calc(var(--pg-topbar-height, 48px) + var(--space-md));
right: var(--space-lg);
z-index: 90;
}
.theme-toggle__btn {
display: inline-flex;
align-items: center;
gap: var(--space-sm);
padding: var(--space-sm) var(--space-md);
background: var(--color-surface-default);
border: 1px solid var(--color-border-default);
border-radius: var(--radius);
color: var(--color-text-primary);
font-size: var(--text-body-sm-size);
font-weight: var(--font-weight-medium);
cursor: pointer;
transition: all var(--transition-fast);
box-shadow: var(--shadow-sm);
}
.theme-toggle__btn:hover {
background: var(--color-bg-subtle);
border-color: var(--color-border-medium);
}
.theme-toggle__icon {
width: 16px;
height: 16px;
}
.section-divider {
border-top: 1px solid var(--color-border-subtle);
margin: var(--space-2xl) 0;
}
.usage-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: var(--space-lg);
margin-top: var(--space-lg);
}
.usage-card {
border-radius: var(--radius);
border: 1px solid var(--color-border-subtle);
overflow: hidden;
}
.usage-card__preview {
padding: var(--space-xl);
display: flex;
flex-direction: column;
gap: var(--space-md);
align-items: center;
justify-content: center;
min-height: 120px;
}
.usage-card__code {
padding: var(--space-md) var(--space-lg);
background: var(--color-bg-subtle);
border-top: 1px solid var(--color-border-subtle);
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
font-size: var(--text-body-xs-size);
color: var(--color-text-secondary);
overflow-x: auto;
}
.status-badge {
display: inline-flex;
align-items: center;
gap: var(--space-xs);
padding: var(--space-xs) var(--space-sm);
border-radius: var(--radius-sm);
font-size: var(--text-body-xs-size);
font-weight: var(--font-weight-medium);
}
.status-badge--success {
background: var(--color-success-bg);
color: var(--color-success-text);
border: 1px solid var(--color-success-border);
}
.status-badge--warning {
background: var(--color-warning-bg);
color: var(--color-warning-text);
border: 1px solid var(--color-warning-border);
}
.status-badge--critical {
background: var(--color-critical-bg);
color: var(--color-critical-text);
border: 1px solid var(--color-critical-border);
}
html,
body {
height: 100%;
}
body {
margin: 0;
background: var(--color-bg-canvas);
color: var(--color-text-primary);
font-size: 15px;
line-height: 1.55;
-webkit-font-smoothing: auto;
-moz-osx-font-smoothing: auto;
}
#workpeg-root {
box-sizing: border-box;
height: 100%;
display: flex;
flex-direction: column;
overflow: hidden;
}
#workpeg-root > * {
flex: 1 1 auto;
min-height: 0;
}
.pg-column {
gap: var(--space-sm);
}
.pg-row {
gap: 10px;
align-items: center;
}
.pg-text,
.pg-locale {
color: inherit;
}
.pg-text-heading,
.pg-locale-heading {
font-size: 24px;
font-weight: 700;
letter-spacing: -0.01em;
line-height: 1.25;
}
.pg-text-caption,
.pg-locale-caption {
font-size: 13px;
color: var(--color-text-secondary);
}
.pg-text-muted,
.pg-locale-muted {
color: var(--color-text-secondary);
}
.pg-link {
color: var(--color-brand-primary);
font-weight: 500;
text-decoration: none;
transition: color var(--transition);
}
.pg-link:hover {
text-decoration: underline;
}
.pg-textinput,
.pg-textarea,
.pg-select {
font-family: var(--font-base);
font-size: 14px;
color: var(--color-text-primary);
background: var(--color-surface-default);
padding: 9px 12px;
border: 1px solid var(--color-border-subtle);
border-radius: var(--radius);
transition: border-color var(--transition), box-shadow var(--transition);
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
padding-right: 34px;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 13px center;
}
.pg-textinput:focus,
.pg-textarea:focus,
.pg-select:focus {
outline: none;
border-color: var(--color-brand-primary);
box-shadow: 0 0 0 3px rgba(59, 110, 240, 0.15);
}
.pg-checkbox {
display: inline-flex;
align-items: center;
gap: 7px;
}
.pg-checkbox,
.pg-checkbox input {
accent-color: var(--color-brand-primary);
}
.pg-container-card {
background: var(--color-surface-default);
border: 1px solid var(--color-border-subtle);
border-radius: var(--radius);
box-shadow: var(--shadow-md);
}
.pg-draggable {
cursor: grab;
}
.pg-draggable:active {
cursor: grabbing;
}
.pg-dragging {
opacity: 0.4;
}
.pg-droptarget {
transition: padding-top var(--transition);
}
.pg-droptarget.pg-drag-over:has(> .pg-draggable) {
padding-top: 26px;
}
.pg-droptarget.pg-drag-over:not(:has(> .pg-draggable)) {
background: color-mix(in srgb, var(--color-brand-primary) 7%, transparent);
border-radius: var(--radius);
}
.pg-resize-handle {
position: absolute;
top: 0;
bottom: 0;
width: 7px;
cursor: col-resize;
z-index: 5;
background: transparent;
touch-action: none;
}
.pg-resize-handle:hover,
.pg-resize-handle:active {
background: color-mix(in srgb, var(--color-brand-primary) 45%, transparent);
}
.pg-code {
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas,
"Liberation Mono", monospace;
font-size: 0.875em;
}
pre.pg-code {
margin: 0;
padding: 12px 14px;
background: var(--color-surface-default);
color: var(--color-text-primary);
border: 1px solid var(--color-border-subtle);
border-radius: var(--radius);
overflow-x: auto;
white-space: pre;
line-height: 1.55;
tab-size: 4;
}
pre.pg-code code {
font: inherit;
background: none;
padding: 0;
border: 0;
}
code.pg-code--inline {
background: var(--color-surface-default);
border: 1px solid var(--color-border-subtle);
border-radius: 5px;
padding: 1px 5px;
white-space: pre-wrap;
}
.pg-modal-backdrop {
position: fixed;
inset: 0;
z-index: 1000;
display: flex;
align-items: flex-start;
justify-content: center;
padding: 40px 16px;
box-sizing: border-box;
background: rgba(0, 0, 0, 0.65);
backdrop-filter: blur(16px);
}
.pg-modal-card {
background: var(--color-bg-default, var(--color-surface-default));
color: var(--color-text-primary);
border: 1px solid var(--color-border-subtle);
border-radius: 16px;
box-shadow: var(--shadow-lg), 0 0 0 1px rgba(0, 0, 0, 0.05);
padding: 20px;
max-width: min(92vw, 520px);
max-height: 100%;
overflow: auto;
}
.pg-modal-title {
margin-bottom: 12px;
font-weight: 600;
font-size: 1.1em;
}
.pg-drawer {
--pg-drawer-w: 300px;
width: 0;
flex-shrink: 0;
height: 100%;
overflow: hidden;
background: var(--color-surface-sunken2);
transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.pg-drawer--open {
width: min(85vw, var(--pg-drawer-w));
}
.pg-drawer__panel {
width: min(85vw, var(--pg-drawer-w));
height: 100%;
display: flex;
flex-direction: column;
}
.pg-drawer__header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 4px 4px 4px 10px;
gap: 10px;
flex-shrink: 0;
}
.pg-drawer__title {
margin: 0;
font-size: var(--text-body-lg-size);
font-weight: var(--font-weight-medium);
color: var(--color-text-secondary);
}
.pg-toast-stack {
position: fixed;
bottom: 20px;
right: 20px;
z-index: 2000;
display: flex;
flex-direction: column;
gap: 8px;
pointer-events: none;
}
.pg-toast {
pointer-events: auto;
min-width: 220px;
max-width: 360px;
padding: 11px 14px;
border-radius: 9px;
color: #ffffff;
font: 500 14px/1.4 var(--font-base);
background: #2b3344;
box-shadow: var(--shadow-md);
transition: opacity 0.2s ease;
}
.pg-toast--success { background: #1a8f5a; }
.pg-toast--warning { background: #b7791f; }
.pg-toast--danger { background: #d64545; }
.pg-menu {
position: relative;
display: inline-block;
}
.pg-menu-panel {
position: absolute;
display: none;
z-index: 500;
min-width: 168px;
flex-direction: column;
gap: 2px;
padding: 8px;
background: var(--color-bg-default);
border: 1px solid var(--color-border-subtle);
border-radius: var(--radius-lg);
box-shadow: 0px 24px 48px -12px rgba(0, 0, 0, 0.18);
}
.pg-menu--open > .pg-menu-panel { display: flex; }
.pg-menu--open { --pg-nav-action-open: var(--color-surface-sunken2); }
.pg-container-apps-scroll::-webkit-scrollbar { width: 0; height: 0; }
.pg-container-app-logo img[src$="-dark.svg"] { display: none !important; }
@media (prefers-color-scheme: dark) {
:root:not(.light) .pg-container-app-logo img[src$="-light.svg"] { display: none !important; }
:root:not(.light) .pg-container-app-logo img[src$="-dark.svg"] { display: block !important; }
}
.dark .pg-container-app-logo img[src$="-light.svg"] { display: none !important; }
.dark .pg-container-app-logo img[src$="-dark.svg"] { display: block !important; }
.light .pg-container-app-logo img[src$="-light.svg"] { display: block !important; }
.light .pg-container-app-logo img[src$="-dark.svg"] { display: none !important; }
.pg-menu[data-at="bottom"] > .pg-menu-panel { top: 100%; left: 0; margin-top: 6px; }
.pg-menu[data-at="top"] > .pg-menu-panel { bottom: 100%; left: 0; margin-bottom: 6px; }
.pg-menu[data-at="right"] > .pg-menu-panel { left: 100%; top: 0; margin-left: 6px; }
.pg-menu[data-at="left"] > .pg-menu-panel { right: 100%; top: 0; margin-right: 6px; }
.pg-menu .ti-selector { transition: transform 0.22s cubic-bezier(0.4, 0, 0.2, 1); }
.pg-menu--open .ti-selector { transform: rotate(180deg); }
.pg-tabs { display: flex; flex-direction: column; }
.pg-tabs[data-at="bottom"] { flex-direction: column-reverse; }
.pg-tabs[data-at="left"] { flex-direction: row; }
.pg-tabs[data-at="right"] { flex-direction: row-reverse; }
.pg-tab-bar { display: flex; gap: 2px; border-bottom: 1px solid var(--color-border-subtle); }
.pg-tabs[data-at="bottom"] > .pg-tab-bar {
border-bottom: none; border-top: 1px solid var(--color-border-subtle);
}
.pg-tabs[data-at="left"] > .pg-tab-bar,
.pg-tabs[data-at="right"] > .pg-tab-bar {
flex-direction: column; border-bottom: none;
}
.pg-tabs[data-at="left"] > .pg-tab-bar { border-right: 1px solid var(--color-border-subtle); }
.pg-tabs[data-at="right"] > .pg-tab-bar { border-left: 1px solid var(--color-border-subtle); }
.pg-tab {
appearance: none;
background: transparent;
border: none;
border-bottom: 2px solid transparent;
margin-bottom: -1px;
padding: 8px 14px;
font: inherit;
color: var(--color-text-secondary);
cursor: pointer;
white-space: nowrap;
}
.pg-tab:hover { color: var(--color-text-primary); }
.pg-tab--active { color: var(--color-text-primary); border-bottom-color: var(--color-brand-primary); }
.pg-tabs[data-at="left"] .pg-tab,
.pg-tabs[data-at="right"] .pg-tab {
border-bottom: none; margin-bottom: 0; text-align: left;
}
.pg-tabs[data-at="left"] .pg-tab--active {
border-right: 2px solid var(--color-brand-primary); margin-right: -1px;
}
.pg-tabs[data-at="right"] .pg-tab--active {
border-left: 2px solid var(--color-brand-primary); margin-left: -1px;
}
.pg-tab-panels { flex: 1; min-width: 0; }
.pg-tab-panel { display: none; padding: 14px 2px; }
.pg-tab-panel--active { display: block; }
.pg-spinner {
display: inline-block;
box-sizing: border-box;
border-style: solid;
border-color: var(--color-border-subtle);
border-top-color: var(--color-brand-primary);
border-radius: 50%;
animation: pg-spin 0.7s linear infinite;
}
@keyframes pg-spin { to { transform: rotate(360deg); } }
.pg-progress {
width: 100%;
height: 6px;
background: var(--color-border-subtle);
border-radius: 999px;
overflow: hidden;
}
.pg-progress-bar {
height: 100%;
width: 0;
background: var(--color-brand-primary);
border-radius: 999px;
transition: width 0.2s ease;
}
.pg-progress--indeterminate .pg-progress-bar {
width: 40%;
animation: pg-progress-slide 1.1s ease-in-out infinite;
}
@keyframes pg-progress-slide {
0% { margin-left: -40%; }
100% { margin-left: 100%; }
}
@keyframes pg-shimmer {
from { background-position: 200% 0; }
to { background-position: -200% 0; }
}
.pg-divider {
border: 0;
border-top-style: solid;
border-top-color: var(--color-border-subtle);
align-self: stretch;
}
.pg-divider--vertical {
border-top: 0;
border-left-style: solid;
border-left-color: var(--color-border-subtle);
align-self: stretch;
width: 0;
min-height: 1.2em;
}
.pg-listtile {
display: flex;
align-items: center;
gap: 12px;
padding: 10px 12px;
border-radius: var(--radius);
}
.pg-listtile[role="button"] { cursor: pointer; }
.pg-listtile[role="button"]:hover { background: var(--color-surface-default); }
.pg-listtile-leading,
.pg-listtile-trailing { flex: none; display: flex; align-items: center; }
.pg-listtile-trailing { margin-left: auto; color: var(--color-text-secondary); }
.pg-listtile-body { flex: 1; min-width: 0; }
.pg-listtile-title { color: var(--color-text-primary); }
.pg-listtile-subtitle {
color: var(--color-text-secondary);
font-size: 0.88em;
margin-top: 2px;
}
.pg-switch {
display: inline-flex;
align-items: center;
gap: 9px;
cursor: pointer;
}
.pg-switch-input {
appearance: none;
-webkit-appearance: none;
flex: none;
margin: 0;
width: 38px;
height: 22px;
border-radius: 999px;
background: var(--color-border-default);
position: relative;
cursor: pointer;
transition: background 0.15s ease;
}
.pg-switch-input::before {
content: "";
position: absolute;
top: 2px;
left: 2px;
width: 18px;
height: 18px;
border-radius: 50%;
background: #fff;
transition: transform 0.15s ease;
}
.pg-switch-input:checked { background: var(--color-brand-secondary); }
.pg-switch-input:checked::before { transform: translateX(16px); }
.pg-switch-input:disabled { opacity: 0.5; cursor: not-allowed; }
.pg-badge-label {
display: inline-flex;
align-items: center;
justify-content: center;
box-sizing: border-box;
min-width: 18px;
height: 18px;
padding: 0 6px;
font-size: 0.72em;
font-weight: 600;
line-height: 1;
color: var(--color-brand-on-primary);
background: var(--color-brand-primary);
border-radius: 999px;
}
.pg-badge-label--dot { min-width: 0; width: 9px; height: 9px; padding: 0; }
.pg-badge-anchor { position: relative; display: inline-flex; }
.pg-badge-float { position: absolute; top: -6px; right: -6px; }
.pg-chip {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 4px 10px;
font-size: 0.86em;
color: var(--color-text-primary);
background: var(--color-surface-default);
border: 1px solid var(--color-border-subtle);
border-radius: 999px;
}
.pg-chip[role="button"] { cursor: pointer; }
.pg-chip[role="button"]:hover { border-color: var(--color-text-secondary); }
.pg-chip--selected {
color: var(--color-brand-on-primary);
background: var(--color-brand-primary);
border-color: var(--color-brand-primary);
}
.pg-chip-delete {
appearance: none;
border: 0;
background: transparent;
color: inherit;
cursor: pointer;
font-size: 1.1em;
line-height: 1;
padding: 0;
opacity: 0.7;
}
.pg-chip-delete:hover { opacity: 1; }
.pg-form { display: flex; flex-direction: column; gap: 16px; }
.pg-field { display: flex; flex-direction: column; gap: 6px; }
.pg-field-label { font-size: 0.9em; font-weight: 500; color: var(--color-text-primary); }
.pg-field-error { font-size: 0.82em; color: #e23b3b; min-height: 1em; }
.pg-field[data-invalid="1"] .pg-textinput,
.pg-field[data-invalid="1"] .pg-textarea,
.pg-field[data-invalid="1"] .pg-select,
.pg-field[data-invalid="1"] .pg-chatinput { border-color: #e23b3b; }
.pg-futurebuilder,
.pg-streambuilder { display: contents; }
.pg-gesturedetector { display: block; }
.pg-media-start {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 10px 16px;
border: 1px solid var(--color-border-subtle);
border-radius: 10px;
background: var(--color-surface-default);
color: var(--color-text-primary);
font: inherit;
cursor: pointer;
}
.pg-media-start:hover { border-color: var(--color-text-secondary); }
.pg-fileupload {
display: block;
border: 1px dashed var(--color-border-subtle);
border-radius: var(--radius);
background: var(--color-surface-default);
padding: 20px;
text-align: center;
cursor: pointer;
transition: border-color var(--transition), background var(--transition);
}
.pg-fileupload:hover,
.pg-fileupload--over {
border-color: var(--color-brand-primary);
background: color-mix(in srgb, var(--color-brand-primary) 6%, var(--color-surface-default));
}
.pg-fileupload-input {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0 0 0 0);
white-space: nowrap;
border: 0;
}
.pg-fileupload-label {
color: var(--color-text-secondary);
font: inherit;
}
.pg-fileupload-previews {
display: flex;
flex-wrap: wrap;
gap: 10px;
justify-content: center;
margin-top: 14px;
}
.pg-fileupload-thumb {
width: 72px;
height: 72px;
object-fit: cover;
border-radius: 8px;
border: 1px solid var(--color-border-subtle);
}
.pg-fileupload-file {
min-width: 96px;
max-width: 160px;
padding: 10px 12px;
border: 1px solid var(--color-border-subtle);
border-radius: 8px;
background: var(--color-surface-default, var(--color-surface-default));
text-align: left;
}
.pg-fileupload-name {
font-size: 0.85rem;
color: var(--color-text-primary);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.pg-fileupload-meta {
font-size: 0.75rem;
color: var(--color-text-secondary);
margin-top: 2px;
}
.pg-gravatarimage { vertical-align: middle; }
.pg-gravatar-initials {
white-space: nowrap;
text-transform: uppercase;
letter-spacing: 0.02em;
}
.pg-dismissible { position: relative; overflow: hidden; }
.pg-dismissible-bg {
position: absolute;
inset: 0;
display: flex;
align-items: center;
}
.pg-dismissible-content {
position: relative;
background: var(--color-surface-default);
will-change: transform, opacity;
}
.pg-chatinput {
display: block;
width: 100%;
box-sizing: border-box;
padding: 11px 14px;
background: var(--color-surface-default);
color: var(--color-text-primary);
border: 1px solid var(--color-border-subtle);
border-radius: var(--radius);
font: inherit;
line-height: 1.5;
white-space: pre-wrap;
word-break: break-word;
outline: none;
}
.pg-chatinput:focus { border-color: var(--color-brand-primary); }
.pg-chatinput:empty::before {
content: attr(data-placeholder);
color: var(--color-text-secondary);
pointer-events: none;
}
.pg-chatinput .pg-md-mark { opacity: 0.45; }
.pg-chatinput .pg-md-tok-b { font-weight: 700; }
.pg-chatinput .pg-md-tok-i { font-style: italic; }
.pg-chatinput .pg-md-tok-code {
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
font-size: 0.92em;
}
.pg-chatinput .pg-md-tok-link { color: var(--color-brand-primary); }
.pg-chatinput .pg-md-h1 { font-size: 1.5em; font-weight: 700; }
.pg-chatinput .pg-md-h2 { font-size: 1.3em; font-weight: 700; }
.pg-chatinput .pg-md-h3 { font-size: 1.15em; font-weight: 700; }
.pg-chatinput .pg-md-h4,
.pg-chatinput .pg-md-h5,
.pg-chatinput .pg-md-h6 { font-weight: 700; }
.pg-chatinput .pg-md-quote { color: var(--color-text-secondary); font-style: italic; }
.pg-chatinput .pg-md-list > .pg-md-mark { color: var(--color-brand-primary); opacity: 1; }
.pg-markdown { line-height: 1.6; }
.pg-markdown > :first-child { margin-top: 0; }
.pg-markdown > :last-child { margin-bottom: 0; }
.pg-markdown p { margin: 0 0 10px; }
.pg-markdown h1, .pg-markdown h2, .pg-markdown h3,
.pg-markdown h4, .pg-markdown h5, .pg-markdown h6 {
margin: 16px 0 8px;
line-height: 1.3;
font-weight: 600;
}
.pg-markdown ul, .pg-markdown ol { margin: 0 0 10px; padding-left: 22px; }
.pg-markdown li { margin: 2px 0; }
.pg-markdown blockquote {
margin: 0 0 10px;
padding: 2px 12px;
border-left: 3px solid var(--color-border-subtle);
color: var(--color-text-secondary);
}
.pg-markdown :not(pre) > code {
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
font-size: 0.875em;
background: var(--color-surface-default);
border: 1px solid var(--color-border-subtle);
border-radius: 5px;
padding: 1px 5px;
}
.pg-markdown pre.pg-code { margin: 0 0 10px; }
.pg-markdown a { color: var(--color-brand-primary); }
.pg-markdown hr {
border: none;
border-top: 1px solid var(--color-border-subtle);
margin: 14px 0;
}
.pg-htmlview {
max-width: 100%;
overflow-x: auto;
line-height: 1.5;
color: var(--color-text-primary);
}
.pg-htmlview img { max-width: 100%; height: auto; }
.pg-htmlview a { color: var(--color-brand-primary); }
.pg-htmlview table { border-collapse: collapse; }
.pg-tip {
position: fixed;
z-index: 2000;
max-width: 280px;
padding: 5px 9px;
border-radius: 7px;
background: var(--tip-bg, var(--color-text-primary));
color: var(--tip-fg, var(--color-surface-default));
font: 500 12px/1.4 var(--font-base);
white-space: nowrap;
pointer-events: none;
opacity: 0;
box-shadow: var(--shadow-md);
transition: opacity 90ms ease;
}
.pg-tip::after {
content: "";
position: absolute;
border: 5px solid transparent;
}
.pg-tip[data-at="top"]::after {
top: 100%;
left: var(--tip-arrow, 50%);
transform: translateX(-50%);
border-top-color: var(--tip-bg, var(--color-text-primary));
}
.pg-tip[data-at="bottom"]::after {
bottom: 100%;
left: var(--tip-arrow, 50%);
transform: translateX(-50%);
border-bottom-color: var(--tip-bg, var(--color-text-primary));
}
.pg-tip[data-at="left"]::after {
left: 100%;
top: var(--tip-arrow, 50%);
transform: translateY(-50%);
border-left-color: var(--tip-bg, var(--color-text-primary));
}
.pg-tip[data-at="right"]::after {
right: 100%;
top: var(--tip-arrow, 50%);
transform: translateY(-50%);
border-right-color: var(--tip-bg, var(--color-text-primary));
}
.pg-markdown ul { list-style: disc; }
.pg-markdown ol { list-style: decimal; }
.pg-markdown ul, .pg-markdown ol { padding-left: 22px; }
.pg-markdown a, .pg-htmlview a { text-decoration: underline; }