/* Generated by apps/website/tools/build-tokens.mjs — do not edit. * Source of truth: apps/client/src/app/app.theme.ts and apps/client/src/styles/. * --font-family is declared here because the Angular app never defines it, * while its stylesheets and this site both consume it. */ :root,:host{--p-stone-50:#fafaf9;--p-stone-100:#f5f5f4;--p-stone-200:#e7e5e4;--p-stone-300:#d6d3d1;--p-stone-400:#a8a29e;--p-stone-500:#78716c;--p-stone-600:#57534e;--p-stone-700:#44403c;--p-stone-800:#292524;--p-stone-900:#1c1917;--p-stone-950:#0c0a09;--p-neutral-50:#fafafa;--p-neutral-100:#f5f5f5;--p-neutral-200:#e5e5e5;--p-neutral-300:#d4d4d4;--p-neutral-400:#a3a3a3;--p-neutral-500:#737373;--p-neutral-600:#525252;--p-neutral-700:#404040;--p-neutral-800:#262626;--p-neutral-900:#171717;--p-neutral-950:#0a0a0a;--p-zinc-50:#fafafa;--p-zinc-100:#f4f4f5;--p-zinc-200:#e4e4e7;--p-zinc-300:#d4d4d8;--p-zinc-400:#a1a1aa;--p-zinc-500:#71717a;--p-zinc-600:#52525b;--p-zinc-700:#3f3f46;--p-zinc-800:#27272a;--p-zinc-900:#18181b;--p-zinc-950:#09090b;--p-gray-50:#f9fafb;--p-gray-100:#f3f4f6;--p-gray-200:#e5e7eb;--p-gray-300:#d1d5db;--p-gray-400:#9ca3af;--p-gray-500:#6b7280;--p-gray-600:#4b5563;--p-gray-700:#374151;--p-gray-800:#1f2937;--p-gray-900:#111827;--p-gray-950:#030712;--p-slate-50:#f8fafc;--p-slate-100:#f1f5f9;--p-slate-200:#e2e8f0;--p-slate-300:#cbd5e1;--p-slate-400:#94a3b8;--p-slate-500:#64748b;--p-slate-600:#475569;--p-slate-700:#334155;--p-slate-800:#1e293b;--p-slate-900:#0f172a;--p-slate-950:#020617;--p-rose-50:#fff1f2;--p-rose-100:#ffe4e6;--p-rose-200:#fecdd3;--p-rose-300:#fda4af;--p-rose-400:#fb7185;--p-rose-500:#f43f5e;--p-rose-600:#e11d48;--p-rose-700:#be123c;--p-rose-800:#9f1239;--p-rose-900:#881337;--p-rose-950:#4c0519;--p-pink-50:#fdf2f8;--p-pink-100:#fce7f3;--p-pink-200:#fbcfe8;--p-pink-300:#f9a8d4;--p-pink-400:#f472b6;--p-pink-500:#ec4899;--p-pink-600:#db2777;--p-pink-700:#be185d;--p-pink-800:#9d174d;--p-pink-900:#831843;--p-pink-950:#500724;--p-fuchsia-50:#fdf4ff;--p-fuchsia-100:#fae8ff;--p-fuchsia-200:#f5d0fe;--p-fuchsia-300:#f0abfc;--p-fuchsia-400:#e879f9;--p-fuchsia-500:#d946ef;--p-fuchsia-600:#c026d3;--p-fuchsia-700:#a21caf;--p-fuchsia-800:#86198f;--p-fuchsia-900:#701a75;--p-fuchsia-950:#4a044e;--p-purple-50:#faf5ff;--p-purple-100:#f3e8ff;--p-purple-200:#e9d5ff;--p-purple-300:#d8b4fe;--p-purple-400:#c084fc;--p-purple-500:#a855f7;--p-purple-600:#9333ea;--p-purple-700:#7e22ce;--p-purple-800:#6b21a8;--p-purple-900:#581c87;--p-purple-950:#3b0764;--p-violet-50:#f5f3ff;--p-violet-100:#ede9fe;--p-violet-200:#ddd6fe;--p-violet-300:#c4b5fd;--p-violet-400:#a78bfa;--p-violet-500:#8b5cf6;--p-violet-600:#7c3aed;--p-violet-700:#6d28d9;--p-violet-800:#5b21b6;--p-violet-900:#4c1d95;--p-violet-950:#2e1065;--p-indigo-50:#eef2ff;--p-indigo-100:#e0e7ff;--p-indigo-200:#c7d2fe;--p-indigo-300:#a5b4fc;--p-indigo-400:#818cf8;--p-indigo-500:#6366f1;--p-indigo-600:#4f46e5;--p-indigo-700:#4338ca;--p-indigo-800:#3730a3;--p-indigo-900:#312e81;--p-indigo-950:#1e1b4b;--p-blue-50:#eff6ff;--p-blue-100:#dbeafe;--p-blue-200:#bfdbfe;--p-blue-300:#93c5fd;--p-blue-400:#60a5fa;--p-blue-500:#3b82f6;--p-blue-600:#2563eb;--p-blue-700:#1d4ed8;--p-blue-800:#1e40af;--p-blue-900:#1e3a8a;--p-blue-950:#172554;--p-sky-50:#f0f9ff;--p-sky-100:#e0f2fe;--p-sky-200:#bae6fd;--p-sky-300:#7dd3fc;--p-sky-400:#38bdf8;--p-sky-500:#0ea5e9;--p-sky-600:#0284c7;--p-sky-700:#0369a1;--p-sky-800:#075985;--p-sky-900:#0c4a6e;--p-sky-950:#082f49;--p-cyan-50:#ecfeff;--p-cyan-100:#cffafe;--p-cyan-200:#a5f3fc;--p-cyan-300:#67e8f9;--p-cyan-400:#22d3ee;--p-cyan-500:#06b6d4;--p-cyan-600:#0891b2;--p-cyan-700:#0e7490;--p-cyan-800:#155e75;--p-cyan-900:#164e63;--p-cyan-950:#083344;--p-teal-50:#f0fdfa;--p-teal-100:#ccfbf1;--p-teal-200:#99f6e4;--p-teal-300:#5eead4;--p-teal-400:#2dd4bf;--p-teal-500:#14b8a6;--p-teal-600:#0d9488;--p-teal-700:#0f766e;--p-teal-800:#115e59;--p-teal-900:#134e4a;--p-teal-950:#042f2e;--p-yellow-50:#fefce8;--p-yellow-100:#fef9c3;--p-yellow-200:#fef08a;--p-yellow-300:#fde047;--p-yellow-400:#facc15;--p-yellow-500:#eab308;--p-yellow-600:#ca8a04;--p-yellow-700:#a16207;--p-yellow-800:#854d0e;--p-yellow-900:#713f12;--p-yellow-950:#422006;--p-amber-50:#fffbeb;--p-amber-100:#fef3c7;--p-amber-200:#fde68a;--p-amber-300:#fcd34d;--p-amber-400:#fbbf24;--p-amber-500:#f59e0b;--p-amber-600:#d97706;--p-amber-700:#b45309;--p-amber-800:#92400e;--p-amber-900:#78350f;--p-amber-950:#451a03;--p-orange-50:#fff7ed;--p-orange-100:#ffedd5;--p-orange-200:#fed7aa;--p-orange-300:#fdba74;--p-orange-400:#fb923c;--p-orange-500:#f97316;--p-orange-600:#ea580c;--p-orange-700:#c2410c;--p-orange-800:#9a3412;--p-orange-900:#7c2d12;--p-orange-950:#431407;--p-red-50:#fef2f2;--p-red-100:#fee2e2;--p-red-200:#fecaca;--p-red-300:#fca5a5;--p-red-400:#f87171;--p-red-500:#ef4444;--p-red-600:#dc2626;--p-red-700:#b91c1c;--p-red-800:#991b1b;--p-red-900:#7f1d1d;--p-red-950:#450a0a;--p-lime-50:#f7fee7;--p-lime-100:#ecfccb;--p-lime-200:#d9f99d;--p-lime-300:#bef264;--p-lime-400:#a3e635;--p-lime-500:#84cc16;--p-lime-600:#65a30d;--p-lime-700:#4d7c0f;--p-lime-800:#3f6212;--p-lime-900:#365314;--p-lime-950:#1a2e05;--p-green-50:#f0fdf4;--p-green-100:#dcfce7;--p-green-200:#bbf7d0;--p-green-300:#86efac;--p-green-400:#4ade80;--p-green-500:#22c55e;--p-green-600:#16a34a;--p-green-700:#15803d;--p-green-800:#166534;--p-green-900:#14532d;--p-green-950:#052e16;--p-emerald-50:#ecfdf5;--p-emerald-100:#d1fae5;--p-emerald-200:#a7f3d0;--p-emerald-300:#6ee7b7;--p-emerald-400:#34d399;--p-emerald-500:#10b981;--p-emerald-600:#059669;--p-emerald-700:#047857;--p-emerald-800:#065f46;--p-emerald-900:#064e3b;--p-emerald-950:#022c22;--p-border-radius-none:0;--p-border-radius-xs:2px;--p-border-radius-sm:4px;--p-border-radius-md:6px;--p-border-radius-lg:8px;--p-border-radius-xl:12px;} :root,:host{--p-transition-duration:0.2s;--p-disabled-opacity:0.6;--p-icon-size:1rem;--p-anchor-gutter:2px;--p-text-color:light-dark(var(--p-surface-700),var(--p-surface-0));--p-text-hover-color:light-dark(var(--p-surface-800),var(--p-surface-0));--p-text-muted-color:light-dark(var(--p-surface-500),var(--p-surface-400));--p-text-hover-muted-color:light-dark(var(--p-surface-600),var(--p-surface-300));--p-highlight-background:light-dark(var(--p-primary-50),color-mix(in srgb,var(--p-primary-400),transparent 84%));--p-highlight-focus-background:light-dark(var(--p-primary-100),color-mix(in srgb,var(--p-primary-400),transparent 76%));--p-highlight-color:light-dark(var(--p-primary-700),rgba(255,255,255,.87));--p-highlight-focus-color:light-dark(var(--p-primary-800),rgba(255,255,255,.87));--p-surface-0:#ffffff;--p-surface-50:light-dark(var(--p-slate-50),var(--p-zinc-50));--p-surface-100:light-dark(var(--p-slate-100),var(--p-zinc-100));--p-surface-200:light-dark(var(--p-slate-200),var(--p-zinc-200));--p-surface-300:light-dark(var(--p-slate-300),var(--p-zinc-300));--p-surface-400:light-dark(var(--p-slate-400),var(--p-zinc-400));--p-surface-500:light-dark(var(--p-slate-500),var(--p-zinc-500));--p-surface-600:light-dark(var(--p-slate-600),var(--p-zinc-600));--p-surface-700:light-dark(var(--p-slate-700),var(--p-zinc-700));--p-surface-800:light-dark(var(--p-slate-800),var(--p-zinc-800));--p-surface-900:light-dark(var(--p-slate-900),var(--p-zinc-900));--p-surface-950:light-dark(var(--p-slate-950),var(--p-zinc-950));--p-overlay-navigation-shadow:0 4px 6px -1px rgba(0,0,0,0.1),0 2px 4px -2px rgba(0,0,0,0.1);--p-overlay-modal-border-radius:var(--p-border-radius-xl);--p-overlay-modal-padding:1.25rem;--p-overlay-modal-shadow:0 20px 25px -5px rgba(0,0,0,0.1),0 8px 10px -6px rgba(0,0,0,0.1);--p-overlay-modal-background:light-dark(var(--p-surface-0),var(--p-surface-900));--p-overlay-modal-border-color:light-dark(var(--p-surface-200),var(--p-surface-700));--p-overlay-modal-color:var(--p-text-color);--p-overlay-popover-border-radius:var(--p-border-radius-md);--p-overlay-popover-padding:0.75rem;--p-overlay-popover-shadow:0 4px 6px -1px rgba(0,0,0,0.1),0 2px 4px -2px rgba(0,0,0,0.1);--p-overlay-popover-background:light-dark(var(--p-surface-0),var(--p-surface-900));--p-overlay-popover-border-color:light-dark(var(--p-surface-200),var(--p-surface-700));--p-overlay-popover-color:var(--p-text-color);--p-overlay-select-border-radius:var(--p-border-radius-md);--p-overlay-select-shadow:0 4px 6px -1px rgba(0,0,0,0.1),0 2px 4px -2px rgba(0,0,0,0.1);--p-overlay-select-background:light-dark(var(--p-surface-0),var(--p-surface-900));--p-overlay-select-border-color:light-dark(var(--p-surface-200),var(--p-surface-700));--p-overlay-select-color:var(--p-text-color);--p-navigation-submenu-icon-size:0.875rem;--p-navigation-submenu-icon-color:light-dark(var(--p-surface-400),var(--p-surface-500));--p-navigation-submenu-icon-focus-color:light-dark(var(--p-surface-500),var(--p-surface-400));--p-navigation-submenu-icon-active-color:light-dark(var(--p-surface-500),var(--p-surface-400));--p-navigation-submenu-label-padding:0.5rem 0.75rem;--p-navigation-submenu-label-font-weight:600;--p-navigation-submenu-label-font-size:var(--p-typography-font-size);--p-navigation-submenu-label-background:transparent;--p-navigation-submenu-label-color:var(--p-text-muted-color);--p-navigation-item-padding:0.5rem 0.75rem;--p-navigation-item-border-radius:var(--p-border-radius-sm);--p-navigation-item-gap:0.5rem;--p-navigation-item-focus-background:light-dark(var(--p-surface-100),var(--p-surface-800));--p-navigation-item-active-background:light-dark(var(--p-surface-100),var(--p-surface-800));--p-navigation-item-color:var(--p-text-color);--p-navigation-item-focus-color:var(--p-text-hover-color);--p-navigation-item-active-color:var(--p-text-hover-color);--p-navigation-item-transition-duration:0s;--p-navigation-item-label-font-weight:var(--p-typography-font-weight);--p-navigation-item-label-font-size:var(--p-typography-font-size);--p-navigation-item-icon-size:var(--p-icon-size);--p-navigation-item-icon-color:light-dark(var(--p-surface-400),var(--p-surface-500));--p-navigation-item-icon-focus-color:light-dark(var(--p-surface-500),var(--p-surface-400));--p-navigation-item-icon-active-color:light-dark(var(--p-surface-500),var(--p-surface-400));--p-navigation-list-padding:0.25rem 0.25rem;--p-navigation-list-gap:2px;--p-mask-transition-duration:0.15s;--p-mask-background:light-dark(rgba(0,0,0,0.4),rgba(0,0,0,0.6));--p-mask-color:var(--p-surface-200);--p-content-border-radius:var(--p-border-radius-md);--p-content-background:light-dark(var(--p-surface-0),var(--p-surface-900));--p-content-hover-background:light-dark(var(--p-surface-100),var(--p-surface-800));--p-content-border-color:light-dark(var(--p-surface-200),var(--p-surface-700));--p-content-color:var(--p-text-color);--p-content-hover-color:var(--p-text-hover-color);--p-list-padding:0.25rem 0.25rem;--p-list-gap:2px;--p-list-option-group-padding:0.5rem 0.75rem;--p-list-option-group-font-weight:600;--p-list-option-group-font-size:var(--p-typography-font-size);--p-list-option-group-background:transparent;--p-list-option-group-color:var(--p-text-muted-color);--p-list-option-padding:0.5rem 0.75rem;--p-list-option-border-radius:var(--p-border-radius-sm);--p-list-option-font-weight:var(--p-typography-font-weight);--p-list-option-font-size:var(--p-typography-font-size);--p-list-option-transition-duration:0s;--p-list-option-focus-background:light-dark(var(--p-surface-100),var(--p-surface-800));--p-list-option-selected-background:var(--p-highlight-background);--p-list-option-selected-focus-background:var(--p-highlight-focus-background);--p-list-option-color:var(--p-text-color);--p-list-option-focus-color:var(--p-text-hover-color);--p-list-option-selected-color:var(--p-highlight-color);--p-list-option-selected-focus-color:var(--p-highlight-focus-color);--p-list-option-selected-font-weight:var(--p-typography-font-weight);--p-list-option-icon-color:light-dark(var(--p-surface-400),var(--p-surface-500));--p-list-option-icon-focus-color:light-dark(var(--p-surface-500),var(--p-surface-400));--p-list-header-padding:0.5rem 1rem 0.25rem 1rem;--p-form-field-font-weight:var(--p-typography-font-weight);--p-form-field-font-size:var(--p-typography-font-size);--p-form-field-padding-x:0.75rem;--p-form-field-padding-y:0.5rem;--p-form-field-border-radius:var(--p-border-radius-md);--p-form-field-transition-duration:var(--p-transition-duration);--p-form-field-background:light-dark(var(--p-surface-0),var(--p-surface-950));--p-form-field-disabled-background:light-dark(var(--p-surface-200),var(--p-surface-700));--p-form-field-filled-background:light-dark(var(--p-surface-50),var(--p-surface-800));--p-form-field-filled-hover-background:light-dark(var(--p-surface-50),var(--p-surface-800));--p-form-field-filled-focus-background:light-dark(var(--p-surface-50),var(--p-surface-800));--p-form-field-border-color:light-dark(var(--p-surface-300),var(--p-surface-600));--p-form-field-hover-border-color:light-dark(var(--p-surface-400),var(--p-surface-500));--p-form-field-focus-border-color:var(--p-primary-color);--p-form-field-invalid-border-color:light-dark(var(--p-red-400),var(--p-red-300));--p-form-field-color:light-dark(var(--p-surface-700),var(--p-surface-0));--p-form-field-disabled-color:light-dark(var(--p-surface-500),var(--p-surface-400));--p-form-field-placeholder-color:light-dark(var(--p-surface-500),var(--p-surface-400));--p-form-field-invalid-placeholder-color:light-dark(var(--p-red-600),var(--p-red-400));--p-form-field-float-label-color:light-dark(var(--p-surface-500),var(--p-surface-400));--p-form-field-float-label-focus-color:light-dark(var(--p-primary-600),var(--p-primary-color));--p-form-field-float-label-active-color:light-dark(var(--p-surface-500),var(--p-surface-400));--p-form-field-float-label-invalid-color:var(--p-form-field-invalid-placeholder-color);--p-form-field-icon-color:var(--p-surface-400);--p-form-field-shadow:0 0 #0000,0 0 #0000,0 1px 2px 0 rgba(18,18,23,0.05);--p-form-field-focus-ring-width:0;--p-form-field-focus-ring-style:none;--p-form-field-focus-ring-color:transparent;--p-form-field-focus-ring-offset:0;--p-form-field-focus-ring-shadow:none;--p-form-field-lg-font-size:1.125rem;--p-form-field-lg-padding-x:0.875rem;--p-form-field-lg-padding-y:0.625rem;--p-form-field-sm-font-size:0.875rem;--p-form-field-sm-padding-x:0.625rem;--p-form-field-sm-padding-y:0.375rem;--p-primary-50:#fff8ed;--p-primary-100:#ffefd4;--p-primary-200:#ffdca8;--p-primary-300:#ffc87a;--p-primary-400:#ffbc57;--p-primary-500:#f9a12e;--p-primary-600:#e08519;--p-primary-700:#ba6816;--p-primary-800:#955218;--p-primary-900:#784517;--p-primary-950:#41210a;--p-primary-color:light-dark(var(--p-primary-500),var(--p-primary-400));--p-primary-contrast-color:light-dark(#ffffff,var(--p-surface-900));--p-primary-hover-color:light-dark(var(--p-primary-600),var(--p-primary-300));--p-primary-active-color:light-dark(var(--p-primary-700),var(--p-primary-200));--p-focus-ring-width:1px;--p-focus-ring-style:solid;--p-focus-ring-color:var(--p-primary-color);--p-focus-ring-offset:2px;--p-focus-ring-shadow:none;--p-typography-line-height:1.5;--p-typography-font-family:inherit;--p-typography-font-weight:normal;--p-typography-font-size:0.875rem;--p-navigation-submenu-icon-color:var(--p-surface-400);--p-navigation-submenu-icon-focus-color:var(--p-surface-500);--p-navigation-submenu-icon-active-color:var(--p-surface-500);--p-navigation-submenu-label-background:transparent;--p-navigation-submenu-label-color:var(--p-text-muted-color);--p-navigation-item-focus-background:var(--p-surface-100);--p-navigation-item-active-background:var(--p-surface-100);--p-navigation-item-color:var(--p-text-color);--p-navigation-item-focus-color:var(--p-text-hover-color);--p-navigation-item-active-color:var(--p-text-hover-color);--p-navigation-item-icon-color:var(--p-surface-400);--p-navigation-item-icon-focus-color:var(--p-surface-500);--p-navigation-item-icon-active-color:var(--p-surface-500);--p-list-option-group-background:transparent;--p-list-option-group-color:var(--p-text-muted-color);--p-list-option-focus-background:var(--p-surface-100);--p-list-option-selected-background:var(--p-highlight-background);--p-list-option-selected-focus-background:var(--p-highlight-focus-background);--p-list-option-color:var(--p-text-color);--p-list-option-focus-color:var(--p-text-hover-color);--p-list-option-selected-color:var(--p-highlight-color);--p-list-option-selected-focus-color:var(--p-highlight-focus-color);--p-list-option-icon-color:var(--p-surface-400);--p-list-option-icon-focus-color:var(--p-surface-500);--p-overlay-modal-background:rgba(255,255,255,0.85);--p-overlay-modal-border-color:rgba(255,255,255,0.3);--p-overlay-modal-color:var(--p-text-color);--p-overlay-popover-background:rgba(255,255,255,0.8);--p-overlay-popover-border-color:rgba(255,255,255,0.3);--p-overlay-popover-color:var(--p-text-color);--p-overlay-select-background:rgba(255,255,255,0.8);--p-overlay-select-border-color:rgba(255,255,255,0.3);--p-overlay-select-color:var(--p-text-color);--p-content-background:var(--p-surface-0);--p-content-hover-background:var(--p-surface-100);--p-content-border-color:var(--p-surface-200);--p-content-color:var(--p-text-color);--p-content-hover-color:var(--p-text-hover-color);--p-text-color:var(--p-surface-700);--p-text-hover-color:var(--p-surface-800);--p-text-muted-color:var(--p-surface-500);--p-text-hover-muted-color:var(--p-surface-600);--p-form-field-background:var(--p-surface-0);--p-form-field-disabled-background:var(--p-surface-200);--p-form-field-filled-background:var(--p-surface-50);--p-form-field-filled-hover-background:var(--p-surface-50);--p-form-field-filled-focus-background:var(--p-surface-50);--p-form-field-border-color:var(--p-surface-300);--p-form-field-hover-border-color:var(--p-surface-400);--p-form-field-focus-border-color:var(--p-primary-color);--p-form-field-invalid-border-color:var(--p-red-400);--p-form-field-color:var(--p-surface-700);--p-form-field-disabled-color:var(--p-surface-500);--p-form-field-placeholder-color:var(--p-surface-500);--p-form-field-invalid-placeholder-color:var(--p-red-600);--p-form-field-float-label-color:var(--p-surface-500);--p-form-field-float-label-focus-color:var(--p-primary-600);--p-form-field-float-label-active-color:var(--p-surface-500);--p-form-field-float-label-invalid-color:var(--p-form-field-invalid-placeholder-color);--p-form-field-icon-color:var(--p-surface-400);--p-form-field-shadow:0 0 #0000,0 0 #0000,0 1px 2px 0 rgba(18,18,23,0.05);--p-mask-background:rgba(0,0,0,0.4);--p-mask-color:var(--p-surface-200);--p-highlight-background:var(--p-primary-50);--p-highlight-focus-background:var(--p-primary-100);--p-highlight-color:var(--p-primary-700);--p-highlight-focus-color:var(--p-primary-800);--p-primary-color:var(--p-primary-500);--p-primary-contrast-color:#ffffff;--p-primary-hover-color:var(--p-primary-600);--p-primary-active-color:var(--p-primary-700);--p-surface-0:#ffffff;--p-surface-50:#f8fafc;--p-surface-100:#f1f5f9;--p-surface-200:#e2e8f0;--p-surface-300:#cbd5e1;--p-surface-400:#94a3b8;--p-surface-500:#64748b;--p-surface-600:#475569;--p-surface-700:#334155;--p-surface-800:#1e293b;--p-surface-900:#0f172a;--p-surface-950:#020617;}.clk-dark{--p-navigation-submenu-icon-color:var(--p-surface-500);--p-navigation-submenu-icon-focus-color:var(--p-surface-400);--p-navigation-submenu-icon-active-color:var(--p-surface-400);--p-navigation-submenu-label-background:transparent;--p-navigation-submenu-label-color:var(--p-text-muted-color);--p-navigation-item-focus-background:var(--p-surface-800);--p-navigation-item-active-background:var(--p-surface-800);--p-navigation-item-color:var(--p-text-color);--p-navigation-item-focus-color:var(--p-text-hover-color);--p-navigation-item-active-color:var(--p-text-hover-color);--p-navigation-item-icon-color:var(--p-surface-500);--p-navigation-item-icon-focus-color:var(--p-surface-400);--p-navigation-item-icon-active-color:var(--p-surface-400);--p-list-option-group-background:transparent;--p-list-option-group-color:var(--p-text-muted-color);--p-list-option-focus-background:var(--p-surface-800);--p-list-option-selected-background:var(--p-highlight-background);--p-list-option-selected-focus-background:var(--p-highlight-focus-background);--p-list-option-color:var(--p-text-color);--p-list-option-focus-color:var(--p-text-hover-color);--p-list-option-selected-color:var(--p-highlight-color);--p-list-option-selected-focus-color:var(--p-highlight-focus-color);--p-list-option-icon-color:var(--p-surface-500);--p-list-option-icon-focus-color:var(--p-surface-400);--p-overlay-modal-background:rgba(24,24,27,0.9);--p-overlay-modal-border-color:rgba(255,255,255,0.1);--p-overlay-modal-color:var(--p-text-color);--p-overlay-popover-background:rgba(24,24,27,0.85);--p-overlay-popover-border-color:rgba(255,255,255,0.1);--p-overlay-popover-color:var(--p-text-color);--p-overlay-select-background:rgba(24,24,27,0.85);--p-overlay-select-border-color:rgba(255,255,255,0.1);--p-overlay-select-color:var(--p-text-color);--p-content-background:var(--p-surface-900);--p-content-hover-background:var(--p-surface-800);--p-content-border-color:var(--p-surface-700);--p-content-color:var(--p-text-color);--p-content-hover-color:var(--p-text-hover-color);--p-text-color:var(--p-surface-0);--p-text-hover-color:var(--p-surface-0);--p-text-muted-color:var(--p-surface-400);--p-text-hover-muted-color:var(--p-surface-300);--p-form-field-background:var(--p-surface-950);--p-form-field-disabled-background:var(--p-surface-700);--p-form-field-filled-background:var(--p-surface-800);--p-form-field-filled-hover-background:var(--p-surface-800);--p-form-field-filled-focus-background:var(--p-surface-800);--p-form-field-border-color:var(--p-surface-600);--p-form-field-hover-border-color:var(--p-surface-500);--p-form-field-focus-border-color:var(--p-primary-color);--p-form-field-invalid-border-color:var(--p-red-300);--p-form-field-color:var(--p-surface-0);--p-form-field-disabled-color:var(--p-surface-400);--p-form-field-placeholder-color:var(--p-surface-400);--p-form-field-invalid-placeholder-color:var(--p-red-400);--p-form-field-float-label-color:var(--p-surface-400);--p-form-field-float-label-focus-color:var(--p-primary-color);--p-form-field-float-label-active-color:var(--p-surface-400);--p-form-field-float-label-invalid-color:var(--p-form-field-invalid-placeholder-color);--p-form-field-icon-color:var(--p-surface-400);--p-form-field-shadow:0 0 #0000,0 0 #0000,0 1px 2px 0 rgba(18,18,23,0.05);--p-mask-background:rgba(0,0,0,0.6);--p-mask-color:var(--p-surface-200);--p-highlight-background:color-mix(in srgb,var(--p-primary-400),transparent 84%);--p-highlight-focus-background:color-mix(in srgb,var(--p-primary-400),transparent 76%);--p-highlight-color:rgba(255,255,255,.87);--p-highlight-focus-color:rgba(255,255,255,.87);--p-primary-color:var(--p-primary-400);--p-primary-contrast-color:var(--p-surface-900);--p-primary-hover-color:var(--p-primary-300);--p-primary-active-color:var(--p-primary-200);--p-surface-0:#ffffff;--p-surface-50:#fafafa;--p-surface-100:#f4f4f5;--p-surface-200:#e4e4e7;--p-surface-300:#d4d4d8;--p-surface-400:#a1a1aa;--p-surface-500:#71717a;--p-surface-600:#52525b;--p-surface-700:#3f3f46;--p-surface-800:#27272a;--p-surface-900:#18181b;--p-surface-950:#09090b;} :root,:host{--p-tiktok-color:#000000;--p-tiktok-background:#000000;--p-tiktok-hover-background:#222222;--p-slack-color:#319874;--p-slack-background:#319874;--p-slack-hover-background:#3aaf85;--p-instagram-color:#7c39ac;--p-instagram-background:#7c39ac;--p-instagram-hover-background:#833ab4;--p-google-color:#d62d20;--p-google-background:#d62d20;--p-google-hover-background:#ea4335;--p-facebook-color:#0151b8;--p-facebook-background:#0151b8;--p-facebook-hover-background:#0165e1;--p-discord-color:#5865f2;--p-discord-background:#5865f2;--p-discord-hover-background:#7289da;color-scheme:light}.clk-dark{color-scheme:dark} :root { --font-family: 'Poppins', system-ui, sans-serif; } /* poppins-regular - latin */ @font-face { font-family: 'Poppins'; font-style: normal; font-weight: 400; src: local(''), url('./fonts/poppins-v20-latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */ url('./fonts/poppins-v20-latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ } /* poppins-500 - latin */ @font-face { font-family: 'Poppins'; font-style: normal; font-weight: 500; src: local(''), url('./fonts/poppins-v20-latin-500.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */ url('./fonts/poppins-v20-latin-500.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ } /* poppins-600 - latin */ @font-face { font-family: 'Poppins'; font-style: normal; font-weight: 600; src: local(''), url('./fonts/poppins-v20-latin-600.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */ url('./fonts/poppins-v20-latin-600.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ } /* poppins-700 - latin */ @font-face { font-family: 'Poppins'; font-style: normal; font-weight: 700; src: local(''), url('./fonts/poppins-v20-latin-700.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */ url('./fonts/poppins-v20-latin-700.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ } /** * Base Styles & CSS Layers Definition * * This file defines the CSS layer order and provides base reset styles. * Layers control cascade precedence: later layers win over earlier ones. */ /* Define layer order - later layers have higher precedence */ @layer reset, tokens, base, layout, components, utilities, primeng-overrides; @layer reset { *, *::before, *::after { box-sizing: border-box; } * { margin: 0; padding: 0; } html { -webkit-text-size-adjust: 100%; tab-size: 4; } body { line-height: inherit; } hr { height: 0; color: inherit; border-top-width: 1px; } abbr:where([title]) { text-decoration: underline dotted; } h1, h2, h3, h4, h5, h6 { font-size: inherit; font-weight: inherit; } a { color: inherit; text-decoration: inherit; } b, strong { font-weight: bolder; } code, kbd, samp, pre { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace; font-size: 1em; } small { font-size: 80%; } sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } sub { bottom: -0.25em; } sup { top: -0.5em; } table { text-indent: 0; border-color: inherit; border-collapse: collapse; } button, input, optgroup, select, textarea { font-family: inherit; font-size: 100%; font-weight: inherit; line-height: inherit; color: inherit; margin: 0; padding: 0; } button, select { text-transform: none; } button, [type='button'], [type='reset'], [type='submit'] { -webkit-appearance: button; background-color: transparent; background-image: none; } :-moz-focusring { outline: auto; } :-moz-ui-invalid { box-shadow: none; } progress { vertical-align: baseline; } ::-webkit-inner-spin-button, ::-webkit-outer-spin-button { height: auto; } [type='search'] { -webkit-appearance: textfield; outline-offset: -2px; } ::-webkit-search-decoration { -webkit-appearance: none; } ::-webkit-file-upload-button { -webkit-appearance: button; font: inherit; } summary { display: list-item; } blockquote, dl, dd, h1, h2, h3, h4, h5, h6, hr, figure, p, pre { margin: 0; } fieldset { margin: 0; padding: 0; } legend { padding: 0; } ol, ul, menu { list-style: none; margin: 0; padding: 0; } dialog { padding: 0; } textarea { resize: vertical; } input::placeholder, textarea::placeholder { opacity: 1; color: var(--p-text-muted-color, #9ca3af); } button, [role='button'] { cursor: pointer; } :disabled { cursor: default; } img, svg, video, canvas, audio, iframe, embed, object { display: block; vertical-align: middle; } img, video { max-width: 100%; height: auto; } [hidden]:where(:not([hidden='until-found'])) { display: none; } } @layer base { html { font-family: var(--font-family, system-ui, -apple-system, sans-serif), sans-serif; font-feature-settings: normal; font-variation-settings: normal; } body { font-family: inherit; } /* Default focus styles */ :focus-visible { outline: 2px solid var(--p-primary-color, #3b82f6); outline-offset: 2px; } /* Selection styles */ ::selection { background-color: var(--p-primary-color, #3b82f6); color: var(--p-primary-contrast-color, #fff); } /* Reduced motion preference */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* Print styles */ @media print { * { background: transparent !important; color: black !important; box-shadow: none !important; text-shadow: none !important; } } } /** * CSS Custom Properties (Design Tokens) * * This file defines all design tokens used throughout the application. * Organized by category for easy maintenance and theming. */ @layer tokens { :root { /* ============================================ * Spacing Scale * Based on 0.25rem (4px) increments * ============================================ */ --space-0: 0; --space-0-5: 0.125rem; /* 2px */ --space-1: 0.25rem; /* 4px */ --space-1-5: 0.375rem; /* 6px */ --space-2: 0.5rem; /* 8px */ --space-2-5: 0.625rem; /* 10px */ --space-3: 0.75rem; /* 12px */ --space-3-5: 0.875rem; /* 14px */ --space-4: 1rem; /* 16px */ --space-5: 1.25rem; /* 20px */ --space-6: 1.5rem; /* 24px */ --space-7: 1.75rem; /* 28px */ --space-8: 2rem; /* 32px */ --space-9: 2.25rem; /* 36px */ --space-10: 2.5rem; /* 40px */ --space-11: 2.75rem; /* 44px */ --space-12: 3rem; /* 48px */ --space-14: 3.5rem; /* 56px */ --space-16: 4rem; /* 64px */ --space-20: 5rem; /* 80px */ --space-24: 6rem; /* 96px */ --space-28: 7rem; /* 112px */ --space-32: 8rem; /* 128px */ --space-36: 9rem; /* 144px */ --space-40: 10rem; /* 160px */ --space-44: 11rem; /* 176px */ --space-48: 12rem; /* 192px */ --space-52: 13rem; /* 208px */ --space-56: 14rem; /* 224px */ --space-60: 15rem; /* 240px */ --space-64: 16rem; /* 256px */ --space-72: 18rem; /* 288px */ --space-80: 20rem; /* 320px */ --space-96: 24rem; /* 384px */ /* ============================================ * Typography Scale * ============================================ */ --font-size-xs: 0.75rem; /* 12px */ --font-size-sm: 0.875rem; /* 14px */ --font-size-base: 1rem; /* 16px */ --font-size-lg: 1.125rem; /* 18px */ --font-size-xl: 1.25rem; /* 20px */ --font-size-2xl: 1.5rem; /* 24px */ --font-size-3xl: 1.875rem; /* 30px */ --font-size-4xl: 2.25rem; /* 36px */ --font-size-5xl: 3rem; /* 48px */ --font-size-6xl: 3.75rem; /* 60px */ --font-size-7xl: 4.5rem; /* 72px */ --font-size-8xl: 6rem; /* 96px */ --font-size-9xl: 8rem; /* 128px */ /* Line Heights */ --line-height-none: 1; --line-height-tight: 1.25; --line-height-snug: 1.375; --line-height-normal: 1.5; --line-height-relaxed: 1.625; --line-height-loose: 2; /* Font Weights */ --font-weight-thin: 100; --font-weight-extralight: 200; --font-weight-light: 300; --font-weight-normal: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; --font-weight-extrabold: 800; --font-weight-black: 900; /* Letter Spacing */ --letter-spacing-tighter: -0.05em; --letter-spacing-tight: -0.025em; --letter-spacing-normal: 0em; --letter-spacing-wide: 0.025em; --letter-spacing-wider: 0.05em; --letter-spacing-widest: 0.1em; /* ============================================ * Border Radius Scale * ============================================ */ --radius-none: 0; --radius-sm: 0.125rem; /* 2px */ --radius-default: 0.25rem; /* 4px */ --radius-md: 0.375rem; /* 6px */ --radius-lg: 0.5rem; /* 8px */ --radius-xl: 0.75rem; /* 12px */ --radius-2xl: 1rem; /* 16px */ --radius-3xl: 1.5rem; /* 24px */ --radius-full: 9999px; /* ============================================ * Shadows * ============================================ */ --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05); --shadow-default: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1); --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1); --shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25); --shadow-inner: inset 0 2px 4px 0 rgb(0 0 0 / 0.05); --shadow-none: 0 0 #0000; /* ============================================ * Z-Index Scale * ============================================ */ --z-auto: auto; --z-0: 0; --z-10: 10; --z-20: 20; --z-30: 30; --z-40: 40; --z-50: 50; --z-dropdown: 1000; --z-sticky: 1020; --z-fixed: 1030; --z-modal-backdrop: 1040; --z-modal: 1050; --z-popover: 1060; --z-tooltip: 1070; /* ============================================ * Transitions * ============================================ */ --duration-75: 75ms; --duration-100: 100ms; --duration-150: 150ms; --duration-200: 200ms; --duration-300: 300ms; --duration-500: 500ms; --duration-700: 700ms; --duration-1000: 1000ms; --ease-linear: linear; --ease-in: cubic-bezier(0.4, 0, 1, 1); --ease-out: cubic-bezier(0, 0, 0.2, 1); --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1); /* ============================================ * Breakpoint Reference (for documentation) * These are used in @container queries * ============================================ */ --breakpoint-sm: 640px; --breakpoint-md: 768px; --breakpoint-lg: 1024px; --breakpoint-xl: 1280px; --breakpoint-2xl: 1536px; /* ============================================ * Width/Height Utilities * ============================================ */ --size-full: 100%; --size-screen: 100vw; --size-screen-vh: 100vh; --size-screen-dvh: 100dvh; --size-screen-dvw: 100dvw; --size-min: min-content; --size-max: max-content; --size-fit: fit-content; /* ============================================ * Aspect Ratios * ============================================ */ --aspect-auto: auto; --aspect-square: 1 / 1; --aspect-video: 16 / 9; --aspect-photo: 4 / 3; /* ============================================ * Opacity Scale * ============================================ */ --opacity-0: 0; --opacity-5: 0.05; --opacity-10: 0.1; --opacity-20: 0.2; --opacity-25: 0.25; --opacity-30: 0.3; --opacity-40: 0.4; --opacity-50: 0.5; --opacity-60: 0.6; --opacity-70: 0.7; --opacity-75: 0.75; --opacity-80: 0.8; --opacity-90: 0.9; --opacity-95: 0.95; --opacity-100: 1; /* ============================================ * Layout tokens * ============================================ */ --clk-topbar-height: 3.75rem; /* ============================================ * Calendar redesign — shared surface tokens * Reused by sidebar (phase 1), topbar (phase 2), * and calendar (phase 3). * ============================================ */ --clk-sidebar-bg: rgba(24, 24, 27, 0.6); --clk-glass-border: rgba(255, 255, 255, 0.08); --clk-glass-border-strong: rgba(255, 255, 255, 0.15); --clk-text-muted-warm: rgba(252, 247, 240, 0.42); --clk-text-strong-warm: rgba(252, 247, 240, 0.92); --clk-section-label-tracking: 0.08em; --clk-section-label-size: 11px; } } /** * Utility Classes * * Modern CSS utility classes to replace Tailwind utilities. * Organized by category and placed in the utilities layer for highest precedence. */ @layer utilities { /* ============================================ * Display Utilities * ============================================ */ .block { display: block; } .inline-block { display: inline-block; } .inline { display: inline; } .flex { display: flex; } .inline-flex { display: inline-flex; } .grid { display: grid; } .inline-grid { display: inline-grid; } .contents { display: contents; } .hidden { display: none; } /* ============================================ * Flexbox Utilities * ============================================ */ .flex-row { flex-direction: row; } .flex-row-reverse { flex-direction: row-reverse; } .flex-col { flex-direction: column; } .flex-column { flex-direction: column; } .flex-col-reverse { flex-direction: column-reverse; } .flex-wrap { flex-wrap: wrap; } .flex-wrap-reverse { flex-wrap: wrap-reverse; } .flex-nowrap { flex-wrap: nowrap; } .flex-1 { flex: 1 1 0%; } .flex-auto { flex: 1 1 auto; } .flex-initial { flex: 0 1 auto; } .flex-none { flex: none; } .grow { flex-grow: 1; } .grow-0 { flex-grow: 0; } .shrink { flex-shrink: 1; } .shrink-0 { flex-shrink: 0; } /* Alignment */ .items-start { align-items: flex-start; } .items-end { align-items: flex-end; } .items-center { align-items: center; } .items-baseline { align-items: baseline; } .items-stretch { align-items: stretch; } /* Legacy PrimeNG naming convention support */ .align-items-start { align-items: flex-start; } .align-items-end { align-items: flex-end; } .align-items-center { align-items: center; } .align-items-baseline { align-items: baseline; } .align-items-stretch { align-items: stretch; } .justify-start { justify-content: flex-start; } .justify-end { justify-content: flex-end; } .justify-center { justify-content: center; } .justify-between { justify-content: space-between; } .justify-around { justify-content: space-around; } .justify-evenly { justify-content: space-evenly; } /* Legacy PrimeNG naming convention support */ .justify-content-start { justify-content: flex-start; } .justify-content-end { justify-content: flex-end; } .justify-content-center { justify-content: center; } .justify-content-between { justify-content: space-between; } .justify-content-around { justify-content: space-around; } .justify-content-evenly { justify-content: space-evenly; } .self-auto { align-self: auto; } .self-start { align-self: flex-start; } .self-end { align-self: flex-end; } .self-center { align-self: center; } .self-stretch { align-self: stretch; } .self-baseline { align-self: baseline; } /* ============================================ * Grid Utilities * ============================================ */ .grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); } .grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); } .grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); } .grid-cols-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); } .grid-cols-none { grid-template-columns: none; } .col-span-1 { grid-column: span 1 / span 1; } .col-span-2 { grid-column: span 2 / span 2; } .col-span-3 { grid-column: span 3 / span 3; } .col-span-4 { grid-column: span 4 / span 4; } .col-span-5 { grid-column: span 5 / span 5; } .col-span-6 { grid-column: span 6 / span 6; } .col-span-7 { grid-column: span 7 / span 7; } .col-span-8 { grid-column: span 8 / span 8; } .col-span-9 { grid-column: span 9 / span 9; } .col-span-10 { grid-column: span 10 / span 10; } .col-span-11 { grid-column: span 11 / span 11; } .col-span-12 { grid-column: span 12 / span 12; } .col-span-full { grid-column: 1 / -1; } .grid-rows-1 { grid-template-rows: repeat(1, minmax(0, 1fr)); } .grid-rows-2 { grid-template-rows: repeat(2, minmax(0, 1fr)); } .grid-rows-3 { grid-template-rows: repeat(3, minmax(0, 1fr)); } .grid-rows-4 { grid-template-rows: repeat(4, minmax(0, 1fr)); } .grid-rows-none { grid-template-rows: none; } .place-items-center { place-items: center; } .place-items-start { place-items: start; } .place-items-end { place-items: end; } .place-content-center { place-content: center; } .place-content-start { place-content: start; } .place-content-end { place-content: end; } .place-content-between { place-content: space-between; } /* ============================================ * Gap Utilities * ============================================ */ .gap-0 { gap: var(--space-0); } .gap-0\.5 { gap: var(--space-0-5); } .gap-1 { gap: var(--space-1); } .gap-1\.5 { gap: var(--space-1-5); } .gap-2 { gap: var(--space-2); } .gap-2\.5 { gap: var(--space-2-5); } .gap-3 { gap: var(--space-3); } .gap-3\.5 { gap: var(--space-3-5); } .gap-4 { gap: var(--space-4); } .gap-5 { gap: var(--space-5); } .gap-6 { gap: var(--space-6); } .gap-7 { gap: var(--space-7); } .gap-8 { gap: var(--space-8); } .gap-9 { gap: var(--space-9); } .gap-10 { gap: var(--space-10); } .gap-11 { gap: var(--space-11); } .gap-12 { gap: var(--space-12); } .gap-14 { gap: var(--space-14); } .gap-16 { gap: var(--space-16); } .gap-20 { gap: var(--space-20); } .gap-24 { gap: var(--space-24); } .gap-x-0 { column-gap: var(--space-0); } .gap-x-1 { column-gap: var(--space-1); } .gap-x-2 { column-gap: var(--space-2); } .gap-x-3 { column-gap: var(--space-3); } .gap-x-4 { column-gap: var(--space-4); } .gap-x-5 { column-gap: var(--space-5); } .gap-x-6 { column-gap: var(--space-6); } .gap-x-8 { column-gap: var(--space-8); } .gap-y-0 { row-gap: var(--space-0); } .gap-y-1 { row-gap: var(--space-1); } .gap-y-2 { row-gap: var(--space-2); } .gap-y-3 { row-gap: var(--space-3); } .gap-y-4 { row-gap: var(--space-4); } .gap-y-5 { row-gap: var(--space-5); } .gap-y-6 { row-gap: var(--space-6); } .gap-y-8 { row-gap: var(--space-8); } /* ============================================ * Spacing Utilities (Padding) * ============================================ */ .p-0 { padding: var(--space-0); } .p-0\.5 { padding: var(--space-0-5); } .p-1 { padding: var(--space-1); } .p-1\.5 { padding: var(--space-1-5); } .p-2 { padding: var(--space-2); } .p-2\.5 { padding: var(--space-2-5); } .p-3 { padding: var(--space-3); } .p-3\.5 { padding: var(--space-3-5); } .p-4 { padding: var(--space-4); } .p-5 { padding: var(--space-5); } .p-6 { padding: var(--space-6); } .p-7 { padding: var(--space-7); } .p-8 { padding: var(--space-8); } .p-9 { padding: var(--space-9); } .p-10 { padding: var(--space-10); } .p-11 { padding: var(--space-11); } .p-12 { padding: var(--space-12); } .px-0 { padding-left: var(--space-0); padding-right: var(--space-0); } .px-1 { padding-left: var(--space-1); padding-right: var(--space-1); } .px-2 { padding-left: var(--space-2); padding-right: var(--space-2); } .px-3 { padding-left: var(--space-3); padding-right: var(--space-3); } .px-4 { padding-left: var(--space-4); padding-right: var(--space-4); } .px-5 { padding-left: var(--space-5); padding-right: var(--space-5); } .px-6 { padding-left: var(--space-6); padding-right: var(--space-6); } .px-8 { padding-left: var(--space-8); padding-right: var(--space-8); } .py-0 { padding-top: var(--space-0); padding-bottom: var(--space-0); } .py-1 { padding-top: var(--space-1); padding-bottom: var(--space-1); } .py-2 { padding-top: var(--space-2); padding-bottom: var(--space-2); } .py-3 { padding-top: var(--space-3); padding-bottom: var(--space-3); } .py-4 { padding-top: var(--space-4); padding-bottom: var(--space-4); } .py-5 { padding-top: var(--space-5); padding-bottom: var(--space-5); } .py-6 { padding-top: var(--space-6); padding-bottom: var(--space-6); } .py-8 { padding-top: var(--space-8); padding-bottom: var(--space-8); } .pt-0 { padding-top: var(--space-0); } .pt-1 { padding-top: var(--space-1); } .pt-2 { padding-top: var(--space-2); } .pt-3 { padding-top: var(--space-3); } .pt-4 { padding-top: var(--space-4); } .pt-5 { padding-top: var(--space-5); } .pt-6 { padding-top: var(--space-6); } .pt-8 { padding-top: var(--space-8); } .pr-0 { padding-right: var(--space-0); } .pr-1 { padding-right: var(--space-1); } .pr-2 { padding-right: var(--space-2); } .pr-3 { padding-right: var(--space-3); } .pr-4 { padding-right: var(--space-4); } .pr-5 { padding-right: var(--space-5); } .pr-6 { padding-right: var(--space-6); } .pr-8 { padding-right: var(--space-8); } .pb-0 { padding-bottom: var(--space-0); } .pb-1 { padding-bottom: var(--space-1); } .pb-2 { padding-bottom: var(--space-2); } .pb-3 { padding-bottom: var(--space-3); } .pb-4 { padding-bottom: var(--space-4); } .pb-5 { padding-bottom: var(--space-5); } .pb-6 { padding-bottom: var(--space-6); } .pb-8 { padding-bottom: var(--space-8); } .pl-0 { padding-left: var(--space-0); } .pl-1 { padding-left: var(--space-1); } .pl-2 { padding-left: var(--space-2); } .pl-3 { padding-left: var(--space-3); } .pl-4 { padding-left: var(--space-4); } .pl-5 { padding-left: var(--space-5); } .pl-6 { padding-left: var(--space-6); } .pl-8 { padding-left: var(--space-8); } /* ============================================ * Spacing Utilities (Margin) * ============================================ */ .m-0 { margin: var(--space-0); } .m-0\.5 { margin: var(--space-0-5); } .m-1 { margin: var(--space-1); } .m-1\.5 { margin: var(--space-1-5); } .m-2 { margin: var(--space-2); } .m-2\.5 { margin: var(--space-2-5); } .m-3 { margin: var(--space-3); } .m-3\.5 { margin: var(--space-3-5); } .m-4 { margin: var(--space-4); } .m-5 { margin: var(--space-5); } .m-6 { margin: var(--space-6); } .m-7 { margin: var(--space-7); } .m-8 { margin: var(--space-8); } .m-auto { margin: auto; } .mx-0 { margin-left: var(--space-0); margin-right: var(--space-0); } .mx-1 { margin-left: var(--space-1); margin-right: var(--space-1); } .mx-2 { margin-left: var(--space-2); margin-right: var(--space-2); } .mx-3 { margin-left: var(--space-3); margin-right: var(--space-3); } .mx-4 { margin-left: var(--space-4); margin-right: var(--space-4); } .mx-5 { margin-left: var(--space-5); margin-right: var(--space-5); } .mx-6 { margin-left: var(--space-6); margin-right: var(--space-6); } .mx-8 { margin-left: var(--space-8); margin-right: var(--space-8); } .mx-auto { margin-left: auto; margin-right: auto; } .my-0 { margin-top: var(--space-0); margin-bottom: var(--space-0); } .my-1 { margin-top: var(--space-1); margin-bottom: var(--space-1); } .my-2 { margin-top: var(--space-2); margin-bottom: var(--space-2); } .my-3 { margin-top: var(--space-3); margin-bottom: var(--space-3); } .my-4 { margin-top: var(--space-4); margin-bottom: var(--space-4); } .my-5 { margin-top: var(--space-5); margin-bottom: var(--space-5); } .my-6 { margin-top: var(--space-6); margin-bottom: var(--space-6); } .my-8 { margin-top: var(--space-8); margin-bottom: var(--space-8); } .my-auto { margin-top: auto; margin-bottom: auto; } .mt-0 { margin-top: var(--space-0); } .mt-1 { margin-top: var(--space-1); } .mt-2 { margin-top: var(--space-2); } .mt-3 { margin-top: var(--space-3); } .mt-4 { margin-top: var(--space-4); } .mt-5 { margin-top: var(--space-5); } .mt-6 { margin-top: var(--space-6); } .mt-8 { margin-top: var(--space-8); } .mt-auto { margin-top: auto; } .mr-0 { margin-right: var(--space-0); } .mr-1 { margin-right: var(--space-1); } .mr-2 { margin-right: var(--space-2); } .mr-3 { margin-right: var(--space-3); } .mr-4 { margin-right: var(--space-4); } .mr-5 { margin-right: var(--space-5); } .mr-6 { margin-right: var(--space-6); } .mr-8 { margin-right: var(--space-8); } .mr-auto { margin-right: auto; } .mb-0 { margin-bottom: var(--space-0); } .mb-1 { margin-bottom: var(--space-1); } .mb-2 { margin-bottom: var(--space-2); } .mb-3 { margin-bottom: var(--space-3); } .mb-4 { margin-bottom: var(--space-4); } .mb-5 { margin-bottom: var(--space-5); } .mb-6 { margin-bottom: var(--space-6); } .mb-8 { margin-bottom: var(--space-8); } .mb-auto { margin-bottom: auto; } .ml-0 { margin-left: var(--space-0); } .ml-1 { margin-left: var(--space-1); } .ml-2 { margin-left: var(--space-2); } .ml-3 { margin-left: var(--space-3); } .ml-4 { margin-left: var(--space-4); } .ml-5 { margin-left: var(--space-5); } .ml-6 { margin-left: var(--space-6); } .ml-8 { margin-left: var(--space-8); } .ml-auto { margin-left: auto; } /* Negative margins */ .-mt-1 { margin-top: calc(var(--space-1) * -1); } .-mt-2 { margin-top: calc(var(--space-2) * -1); } .-mt-3 { margin-top: calc(var(--space-3) * -1); } .-mt-4 { margin-top: calc(var(--space-4) * -1); } /* ============================================ * Width Utilities * ============================================ */ .w-0 { width: 0; } .w-1 { width: var(--space-1); } .w-2 { width: var(--space-2); } .w-3 { width: var(--space-3); } .w-4 { width: var(--space-4); } .w-5 { width: var(--space-5); } .w-6 { width: var(--space-6); } .w-7 { width: var(--space-7); } .w-8 { width: var(--space-8); } .w-9 { width: var(--space-9); } .w-10 { width: var(--space-10); } .w-11 { width: var(--space-11); } .w-12 { width: var(--space-12); } .w-14 { width: var(--space-14); } .w-16 { width: var(--space-16); } .w-20 { width: var(--space-20); } .w-24 { width: var(--space-24); } .w-32 { width: var(--space-32); } .w-40 { width: var(--space-40); } .w-48 { width: var(--space-48); } .w-56 { width: var(--space-56); } .w-64 { width: var(--space-64); } .w-auto { width: auto; } .w-px { width: 1px; } .w-1\/2 { width: 50%; } .w-1\/3 { width: 33.333333%; } .w-2\/3 { width: 66.666667%; } .w-1\/4 { width: 25%; } .w-2\/4 { width: 50%; } .w-3\/4 { width: 75%; } .w-1\/5 { width: 20%; } .w-2\/5 { width: 40%; } .w-3\/5 { width: 60%; } .w-4\/5 { width: 80%; } .w-full { width: 100%; } .w-screen { width: 100vw; } .w-dvw { width: 100dvw; } .w-min { width: min-content; } .w-max { width: max-content; } .w-fit { width: fit-content; } .min-w-0 { min-width: 0; } .min-w-full { min-width: 100%; } .min-w-min { min-width: min-content; } .min-w-max { min-width: max-content; } .min-w-fit { min-width: fit-content; } .max-w-0 { max-width: 0; } .max-w-none { max-width: none; } .max-w-xs { max-width: 20rem; } .max-w-sm { max-width: 24rem; } .max-w-md { max-width: 28rem; } .max-w-lg { max-width: 32rem; } .max-w-xl { max-width: 36rem; } .max-w-2xl { max-width: 42rem; } .max-w-3xl { max-width: 48rem; } .max-w-4xl { max-width: 56rem; } .max-w-5xl { max-width: 64rem; } .max-w-6xl { max-width: 72rem; } .max-w-7xl { max-width: 80rem; } .max-w-full { max-width: 100%; } .max-w-min { max-width: min-content; } .max-w-max { max-width: max-content; } .max-w-fit { max-width: fit-content; } .max-w-prose { max-width: 65ch; } .max-w-screen-sm { max-width: 640px; } .max-w-screen-md { max-width: 768px; } .max-w-screen-lg { max-width: 1024px; } .max-w-screen-xl { max-width: 1280px; } .max-w-screen-2xl { max-width: 1536px; } /* ============================================ * Height Utilities * ============================================ */ .h-0 { height: 0; } .h-1 { height: var(--space-1); } .h-2 { height: var(--space-2); } .h-3 { height: var(--space-3); } .h-4 { height: var(--space-4); } .h-5 { height: var(--space-5); } .h-6 { height: var(--space-6); } .h-7 { height: var(--space-7); } .h-8 { height: var(--space-8); } .h-9 { height: var(--space-9); } .h-10 { height: var(--space-10); } .h-11 { height: var(--space-11); } .h-12 { height: var(--space-12); } .h-14 { height: var(--space-14); } .h-16 { height: var(--space-16); } .h-20 { height: var(--space-20); } .h-24 { height: var(--space-24); } .h-32 { height: var(--space-32); } .h-40 { height: var(--space-40); } .h-48 { height: var(--space-48); } .h-56 { height: var(--space-56); } .h-64 { height: var(--space-64); } .h-auto { height: auto; } .h-px { height: 1px; } .h-1\/2 { height: 50%; } .h-1\/3 { height: 33.333333%; } .h-2\/3 { height: 66.666667%; } .h-1\/4 { height: 25%; } .h-2\/4 { height: 50%; } .h-3\/4 { height: 75%; } .h-full { height: 100%; } .h-screen { height: 100vh; } .h-dvh { height: 100dvh; } .h-min { height: min-content; } .h-max { height: max-content; } .h-fit { height: fit-content; } .min-h-0 { min-height: 0; } .min-h-full { min-height: 100%; } .min-h-screen { min-height: 100vh; } .min-h-dvh { min-height: 100dvh; } .min-h-min { min-height: min-content; } .min-h-max { min-height: max-content; } .min-h-fit { min-height: fit-content; } .max-h-0 { max-height: 0; } .max-h-none { max-height: none; } .max-h-full { max-height: 100%; } .max-h-screen { max-height: 100vh; } .max-h-dvh { max-height: 100dvh; } .max-h-min { max-height: min-content; } .max-h-max { max-height: max-content; } .max-h-fit { max-height: fit-content; } /* ============================================ * Size Utilities (Width & Height) * ============================================ */ .size-0 { width: 0; height: 0; } .size-1 { width: var(--space-1); height: var(--space-1); } .size-2 { width: var(--space-2); height: var(--space-2); } .size-3 { width: var(--space-3); height: var(--space-3); } .size-4 { width: var(--space-4); height: var(--space-4); } .size-5 { width: var(--space-5); height: var(--space-5); } .size-6 { width: var(--space-6); height: var(--space-6); } .size-7 { width: var(--space-7); height: var(--space-7); } .size-8 { width: var(--space-8); height: var(--space-8); } .size-9 { width: var(--space-9); height: var(--space-9); } .size-10 { width: var(--space-10); height: var(--space-10); } .size-11 { width: var(--space-11); height: var(--space-11); } .size-12 { width: var(--space-12); height: var(--space-12); } .size-14 { width: var(--space-14); height: var(--space-14); } .size-16 { width: var(--space-16); height: var(--space-16); } .size-20 { width: var(--space-20); height: var(--space-20); } .size-24 { width: var(--space-24); height: var(--space-24); } .size-full { width: 100%; height: 100%; } /* ============================================ * Typography Utilities * ============================================ */ .text-xs { font-size: var(--font-size-xs); line-height: var(--line-height-normal); } .text-sm { font-size: var(--font-size-sm); line-height: var(--line-height-snug); } .text-base { font-size: var(--font-size-base); line-height: var(--line-height-normal); } .text-lg { font-size: var(--font-size-lg); line-height: var(--line-height-relaxed); } .text-xl { font-size: var(--font-size-xl); line-height: var(--line-height-relaxed); } .text-2xl { font-size: var(--font-size-2xl); line-height: var(--line-height-snug); } .text-3xl { font-size: var(--font-size-3xl); line-height: var(--line-height-snug); } .text-4xl { font-size: var(--font-size-4xl); line-height: var(--line-height-tight); } .text-5xl { font-size: var(--font-size-5xl); line-height: var(--line-height-none); } .text-6xl { font-size: var(--font-size-6xl); line-height: var(--line-height-none); } .font-thin { font-weight: var(--font-weight-thin); } .font-extralight { font-weight: var(--font-weight-extralight); } .font-light { font-weight: var(--font-weight-light); } .font-normal { font-weight: var(--font-weight-normal); } .font-medium { font-weight: var(--font-weight-medium); } .font-semibold { font-weight: var(--font-weight-semibold); } .font-bold { font-weight: var(--font-weight-bold); } .font-extrabold { font-weight: var(--font-weight-extrabold); } .font-black { font-weight: var(--font-weight-black); } .italic { font-style: italic; } .not-italic { font-style: normal; } .text-left { text-align: left; } .text-center { text-align: center; } .text-right { text-align: right; } .text-justify { text-align: justify; } .uppercase { text-transform: uppercase; } .lowercase { text-transform: lowercase; } .capitalize { text-transform: capitalize; } .normal-case { text-transform: none; } .underline { text-decoration-line: underline; } .overline { text-decoration-line: overline; } .line-through { text-decoration-line: line-through; } .no-underline { text-decoration-line: none; } .leading-none { line-height: var(--line-height-none); } .leading-tight { line-height: var(--line-height-tight); } .leading-snug { line-height: var(--line-height-snug); } .leading-normal { line-height: var(--line-height-normal); } .leading-relaxed { line-height: var(--line-height-relaxed); } .leading-loose { line-height: var(--line-height-loose); } .tracking-tighter { letter-spacing: var(--letter-spacing-tighter); } .tracking-tight { letter-spacing: var(--letter-spacing-tight); } .tracking-normal { letter-spacing: var(--letter-spacing-normal); } .tracking-wide { letter-spacing: var(--letter-spacing-wide); } .tracking-wider { letter-spacing: var(--letter-spacing-wider); } .tracking-widest { letter-spacing: var(--letter-spacing-widest); } .truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .text-ellipsis { text-overflow: ellipsis; } .text-clip { text-overflow: clip; } .whitespace-normal { white-space: normal; } .whitespace-nowrap { white-space: nowrap; } .whitespace-pre { white-space: pre; } .whitespace-pre-line { white-space: pre-line; } .whitespace-pre-wrap { white-space: pre-wrap; } .whitespace-break-spaces { white-space: break-spaces; } .break-normal { overflow-wrap: normal; word-break: normal; } .break-words { overflow-wrap: break-word; } .break-all { word-break: break-all; } .break-keep { word-break: keep-all; } /* ============================================ * Text Color Utilities (using PrimeNG variables) * ============================================ */ .text-primary { color: var(--p-primary-color); } .text-secondary { color: var(--p-text-muted-color); } .text-muted { color: var(--p-text-muted-color); } /* Surface colors for text */ .text-surface-0 { color: var(--p-surface-0); } .text-surface-50 { color: var(--p-surface-50); } .text-surface-100 { color: var(--p-surface-100); } .text-surface-200 { color: var(--p-surface-200); } .text-surface-300 { color: var(--p-surface-300); } .text-surface-400 { color: var(--p-surface-400); } .text-surface-500 { color: var(--p-surface-500); } .text-surface-600 { color: var(--p-surface-600); } .text-surface-700 { color: var(--p-surface-700); } .text-surface-800 { color: var(--p-surface-800); } .text-surface-900 { color: var(--p-surface-900); } .text-surface-950 { color: var(--p-surface-950); } /* ============================================ * Background Color Utilities * ============================================ */ .bg-transparent { background-color: transparent; } .bg-current { background-color: currentColor; } .bg-primary { background-color: var(--p-primary-color); } .bg-surface-ground { background-color: var(--surface-ground); } .bg-surface-card { background-color: var(--surface-card); } .bg-surface-overlay { background-color: var(--surface-overlay); } /* Surface background colors */ .bg-surface-0 { background-color: var(--p-surface-0); } .bg-surface-50 { background-color: var(--p-surface-50); } .bg-surface-100 { background-color: var(--p-surface-100); } .bg-surface-200 { background-color: var(--p-surface-200); } .bg-surface-300 { background-color: var(--p-surface-300); } .bg-surface-400 { background-color: var(--p-surface-400); } .bg-surface-500 { background-color: var(--p-surface-500); } .bg-surface-600 { background-color: var(--p-surface-600); } .bg-surface-700 { background-color: var(--p-surface-700); } .bg-surface-800 { background-color: var(--p-surface-800); } .bg-surface-900 { background-color: var(--p-surface-900); } .bg-surface-950 { background-color: var(--p-surface-950); } /* ============================================ * Border Utilities * ============================================ */ .border { border-width: 1px; } .border-0 { border-width: 0; } .border-2 { border-width: 2px; } .border-4 { border-width: 4px; } .border-8 { border-width: 8px; } .border-t { border-top-width: 1px; } .border-r { border-right-width: 1px; } .border-b { border-bottom-width: 1px; } .border-l { border-left-width: 1px; } .border-t-0 { border-top-width: 0; } .border-r-0 { border-right-width: 0; } .border-b-0 { border-bottom-width: 0; } .border-l-0 { border-left-width: 0; } .border-solid { border-style: solid; } .border-dashed { border-style: dashed; } .border-dotted { border-style: dotted; } .border-double { border-style: double; } .border-hidden { border-style: hidden; } .border-none { border-style: none; } .border-surface { border-color: var(--surface-border); } .border-primary { border-color: var(--p-primary-color); } .border-transparent { border-color: transparent; } /* Border Radius */ .rounded-none { border-radius: var(--radius-none); } .rounded-sm { border-radius: var(--radius-sm); } .rounded { border-radius: var(--radius-default); } .rounded-md { border-radius: var(--radius-md); } .rounded-lg { border-radius: var(--radius-lg); } .rounded-xl { border-radius: var(--radius-xl); } .rounded-2xl { border-radius: var(--radius-2xl); } .rounded-3xl { border-radius: var(--radius-3xl); } .rounded-full { border-radius: var(--radius-full); } /* Individual corner rounding */ .rounded-t-none { border-top-left-radius: var(--radius-none); border-top-right-radius: var(--radius-none); } .rounded-t-lg { border-top-left-radius: var(--radius-lg); border-top-right-radius: var(--radius-lg); } .rounded-t-xl { border-top-left-radius: var(--radius-xl); border-top-right-radius: var(--radius-xl); } .rounded-r-lg { border-top-right-radius: var(--radius-lg); border-bottom-right-radius: var(--radius-lg); } .rounded-b-lg { border-bottom-left-radius: var(--radius-lg); border-bottom-right-radius: var(--radius-lg); } .rounded-l-lg { border-top-left-radius: var(--radius-lg); border-bottom-left-radius: var(--radius-lg); } /* ============================================ * Shadow Utilities * ============================================ */ .shadow-sm { box-shadow: var(--shadow-sm); } .shadow { box-shadow: var(--shadow-default); } .shadow-md { box-shadow: var(--shadow-md); } .shadow-lg { box-shadow: var(--shadow-lg); } .shadow-xl { box-shadow: var(--shadow-xl); } .shadow-2xl { box-shadow: var(--shadow-2xl); } .shadow-inner { box-shadow: var(--shadow-inner); } .shadow-none { box-shadow: var(--shadow-none); } /* ============================================ * Position Utilities * ============================================ */ .static { position: static; } .fixed { position: fixed; } .absolute { position: absolute; } .relative { position: relative; } .sticky { position: sticky; } .inset-0 { inset: 0; } .inset-auto { inset: auto; } .inset-x-0 { left: 0; right: 0; } .inset-y-0 { top: 0; bottom: 0; } .top-0 { top: 0; } .top-1 { top: var(--space-1); } .top-2 { top: var(--space-2); } .top-3 { top: var(--space-3); } .top-4 { top: var(--space-4); } .top-auto { top: auto; } .top-full { top: 100%; } .right-0 { right: 0; } .right-1 { right: var(--space-1); } .right-2 { right: var(--space-2); } .right-3 { right: var(--space-3); } .right-4 { right: var(--space-4); } .right-auto { right: auto; } .right-full { right: 100%; } .bottom-0 { bottom: 0; } .bottom-1 { bottom: var(--space-1); } .bottom-2 { bottom: var(--space-2); } .bottom-3 { bottom: var(--space-3); } .bottom-4 { bottom: var(--space-4); } .bottom-auto { bottom: auto; } .bottom-full { bottom: 100%; } .left-0 { left: 0; } .left-1 { left: var(--space-1); } .left-2 { left: var(--space-2); } .left-3 { left: var(--space-3); } .left-4 { left: var(--space-4); } .left-auto { left: auto; } .left-full { left: 100%; } /* Z-Index */ .z-0 { z-index: var(--z-0); } .z-10 { z-index: var(--z-10); } .z-20 { z-index: var(--z-20); } .z-30 { z-index: var(--z-30); } .z-40 { z-index: var(--z-40); } .z-50 { z-index: var(--z-50); } .z-auto { z-index: var(--z-auto); } /* ============================================ * Overflow Utilities * ============================================ */ .overflow-auto { overflow: auto; } .overflow-hidden { overflow: hidden; } .overflow-clip { overflow: clip; } .overflow-visible { overflow: visible; } .overflow-scroll { overflow: scroll; } .overflow-x-auto { overflow-x: auto; } .overflow-y-auto { overflow-y: auto; } .overflow-x-hidden { overflow-x: hidden; } .overflow-y-hidden { overflow-y: hidden; } .overflow-x-scroll { overflow-x: scroll; } .overflow-y-scroll { overflow-y: scroll; } /* ============================================ * Visibility & Opacity Utilities * ============================================ */ .visible { visibility: visible; } .invisible { visibility: hidden; } .collapse { visibility: collapse; } .opacity-0 { opacity: var(--opacity-0); } .opacity-5 { opacity: var(--opacity-5); } .opacity-10 { opacity: var(--opacity-10); } .opacity-20 { opacity: var(--opacity-20); } .opacity-25 { opacity: var(--opacity-25); } .opacity-30 { opacity: var(--opacity-30); } .opacity-40 { opacity: var(--opacity-40); } .opacity-50 { opacity: var(--opacity-50); } .opacity-60 { opacity: var(--opacity-60); } .opacity-70 { opacity: var(--opacity-70); } .opacity-75 { opacity: var(--opacity-75); } .opacity-80 { opacity: var(--opacity-80); } .opacity-90 { opacity: var(--opacity-90); } .opacity-95 { opacity: var(--opacity-95); } .opacity-100 { opacity: var(--opacity-100); } /* ============================================ * Cursor Utilities * ============================================ */ .cursor-auto { cursor: auto; } .cursor-default { cursor: default; } .cursor-pointer { cursor: pointer; } .cursor-wait { cursor: wait; } .cursor-text { cursor: text; } .cursor-move { cursor: move; } .cursor-help { cursor: help; } .cursor-not-allowed { cursor: not-allowed; } .cursor-none { cursor: none; } .cursor-grab { cursor: grab; } .cursor-grabbing { cursor: grabbing; } /* ============================================ * Pointer Events & User Select * ============================================ */ .pointer-events-none { pointer-events: none; } .pointer-events-auto { pointer-events: auto; } .select-none { user-select: none; } .select-text { user-select: text; } .select-all { user-select: all; } .select-auto { user-select: auto; } /* ============================================ * Transition Utilities * ============================================ */ .transition-none { transition-property: none; } .transition-all { transition-property: all; transition-timing-function: var(--ease-in-out); transition-duration: var(--duration-150); } .transition { transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter; transition-timing-function: var(--ease-in-out); transition-duration: var(--duration-150); } .transition-colors { transition-property: color, background-color, border-color, text-decoration-color, fill, stroke; transition-timing-function: var(--ease-in-out); transition-duration: var(--duration-150); } .transition-opacity { transition-property: opacity; transition-timing-function: var(--ease-in-out); transition-duration: var(--duration-150); } .transition-shadow { transition-property: box-shadow; transition-timing-function: var(--ease-in-out); transition-duration: var(--duration-150); } .transition-transform { transition-property: transform; transition-timing-function: var(--ease-in-out); transition-duration: var(--duration-150); } .duration-75 { transition-duration: var(--duration-75); } .duration-100 { transition-duration: var(--duration-100); } .duration-150 { transition-duration: var(--duration-150); } .duration-200 { transition-duration: var(--duration-200); } .duration-300 { transition-duration: var(--duration-300); } .duration-500 { transition-duration: var(--duration-500); } .duration-700 { transition-duration: var(--duration-700); } .duration-1000 { transition-duration: var(--duration-1000); } .ease-linear { transition-timing-function: var(--ease-linear); } .ease-in { transition-timing-function: var(--ease-in); } .ease-out { transition-timing-function: var(--ease-out); } .ease-in-out { transition-timing-function: var(--ease-in-out); } /* ============================================ * Transform Utilities * ============================================ */ .scale-0 { transform: scale(0); } .scale-50 { transform: scale(0.5); } .scale-75 { transform: scale(0.75); } .scale-90 { transform: scale(0.9); } .scale-95 { transform: scale(0.95); } .scale-100 { transform: scale(1); } .scale-105 { transform: scale(1.05); } .scale-110 { transform: scale(1.1); } .scale-125 { transform: scale(1.25); } .scale-150 { transform: scale(1.5); } .rotate-0 { transform: rotate(0deg); } .rotate-1 { transform: rotate(1deg); } .rotate-2 { transform: rotate(2deg); } .rotate-3 { transform: rotate(3deg); } .rotate-6 { transform: rotate(6deg); } .rotate-12 { transform: rotate(12deg); } .rotate-45 { transform: rotate(45deg); } .rotate-90 { transform: rotate(90deg); } .rotate-180 { transform: rotate(180deg); } .-rotate-1 { transform: rotate(-1deg); } .-rotate-2 { transform: rotate(-2deg); } .-rotate-3 { transform: rotate(-3deg); } .-rotate-6 { transform: rotate(-6deg); } .-rotate-12 { transform: rotate(-12deg); } .-rotate-45 { transform: rotate(-45deg); } .-rotate-90 { transform: rotate(-90deg); } .-rotate-180 { transform: rotate(-180deg); } .translate-x-0 { transform: translateX(0); } .translate-x-1 { transform: translateX(var(--space-1)); } .translate-x-2 { transform: translateX(var(--space-2)); } .translate-x-4 { transform: translateX(var(--space-4)); } .translate-x-full { transform: translateX(100%); } .-translate-x-1 { transform: translateX(calc(var(--space-1) * -1)); } .-translate-x-2 { transform: translateX(calc(var(--space-2) * -1)); } .-translate-x-full { transform: translateX(-100%); } .translate-y-0 { transform: translateY(0); } .translate-y-1 { transform: translateY(var(--space-1)); } .translate-y-2 { transform: translateY(var(--space-2)); } .translate-y-4 { transform: translateY(var(--space-4)); } .translate-y-full { transform: translateY(100%); } .-translate-y-1 { transform: translateY(calc(var(--space-1) * -1)); } .-translate-y-2 { transform: translateY(calc(var(--space-2) * -1)); } .-translate-y-full { transform: translateY(-100%); } .origin-center { transform-origin: center; } .origin-top { transform-origin: top; } .origin-top-right { transform-origin: top right; } .origin-right { transform-origin: right; } .origin-bottom-right { transform-origin: bottom right; } .origin-bottom { transform-origin: bottom; } .origin-bottom-left { transform-origin: bottom left; } .origin-left { transform-origin: left; } .origin-top-left { transform-origin: top left; } /* ============================================ * Object Fit & Position * ============================================ */ .object-contain { object-fit: contain; } .object-cover { object-fit: cover; } .object-fill { object-fit: fill; } .object-none { object-fit: none; } .object-scale-down { object-fit: scale-down; } .object-bottom { object-position: bottom; } .object-center { object-position: center; } .object-left { object-position: left; } .object-left-bottom { object-position: left bottom; } .object-left-top { object-position: left top; } .object-right { object-position: right; } .object-right-bottom { object-position: right bottom; } .object-right-top { object-position: right top; } .object-top { object-position: top; } /* ============================================ * Aspect Ratio * ============================================ */ .aspect-auto { aspect-ratio: var(--aspect-auto); } .aspect-square { aspect-ratio: var(--aspect-square); } .aspect-video { aspect-ratio: var(--aspect-video); } .aspect-photo { aspect-ratio: var(--aspect-photo); } /* ============================================ * List Utilities * ============================================ */ .list-none { list-style-type: none; } .list-disc { list-style-type: disc; } .list-decimal { list-style-type: decimal; } .list-inside { list-style-position: inside; } .list-outside { list-style-position: outside; } /* ============================================ * Container Queries Support * ============================================ */ .container-inline { container-type: inline-size; } .container-size { container-type: size; } .container-normal { container-type: normal; } /* ============================================ * Screen Reader Only * ============================================ */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border-width: 0; } .not-sr-only { position: static; width: auto; height: auto; padding: 0; margin: 0; overflow: visible; clip: auto; white-space: normal; } /* ============================================ * Dark Mode Utilities * Using :where for lower specificity * ============================================ */ :where(.clk-dark, .clk-dark *) { /* Dark mode specific overrides are handled in component CSS */ } /* Dark mode text colors */ :where(.clk-dark) .dark\:text-surface-0 { color: var(--p-surface-0); } :where(.clk-dark) .dark\:text-surface-100 { color: var(--p-surface-100); } :where(.clk-dark) .dark\:text-surface-200 { color: var(--p-surface-200); } :where(.clk-dark) .dark\:text-surface-300 { color: var(--p-surface-300); } :where(.clk-dark) .dark\:text-surface-400 { color: var(--p-surface-400); } } /* ============================================ * Responsive Utilities * sm: 640px, md: 768px, lg: 1024px, xl: 1280px * ============================================ */ /* Small screens (640px and up) */ @media (min-width: 640px) { .sm\:flex { display: flex; } .sm\:hidden { display: none; } .sm\:block { display: block; } .sm\:grid { display: grid; } .sm\:flex-row { flex-direction: row; } .sm\:flex-col { flex-direction: column; } .sm\:items-start { align-items: flex-start; } .sm\:items-center { align-items: center; } .sm\:justify-between { justify-content: space-between; } .sm\:w-full { width: 100%; } .sm\:w-auto { width: auto; } .sm\:w-1\/2 { width: 50%; } .sm\:gap-4 { gap: var(--space-4); } .sm\:gap-6 { gap: var(--space-6); } .sm\:p-4 { padding: var(--space-4); } .sm\:p-6 { padding: var(--space-6); } .sm\:px-4 { padding-left: var(--space-4); padding-right: var(--space-4); } .sm\:px-6 { padding-left: var(--space-6); padding-right: var(--space-6); } .sm\:text-lg { font-size: var(--font-size-lg); } .sm\:text-xl { font-size: var(--font-size-xl); } .sm\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* Medium screens (768px and up) */ @media (min-width: 768px) { .md\:flex { display: flex; } .md\:hidden { display: none; } .md\:block { display: block; } .md\:grid { display: grid; } .md\:flex-row { flex-direction: row; } .md\:flex-col { flex-direction: column; } .md\:items-start { align-items: flex-start; } .md\:items-center { align-items: center; } .md\:align-items-start { align-items: flex-start; } .md\:align-items-center { align-items: center; } .md\:align-start { align-items: flex-start; } .md\:align-center { align-items: center; } .md\:justify-between { justify-content: space-between; } .md\:justify-start { justify-content: flex-start; } .md\:w-full { width: 100%; } .md\:w-auto { width: auto; } .md\:w-1\/2 { width: 50%; } .md\:w-1\/3 { width: 33.333333%; } .md\:w-2\/3 { width: 66.666667%; } .md\:gap-4 { gap: var(--space-4); } .md\:gap-6 { gap: var(--space-6); } .md\:gap-8 { gap: var(--space-8); } .md\:p-4 { padding: var(--space-4); } .md\:p-6 { padding: var(--space-6); } .md\:p-8 { padding: var(--space-8); } .md\:px-4 { padding-left: var(--space-4); padding-right: var(--space-4); } .md\:px-6 { padding-left: var(--space-6); padding-right: var(--space-6); } .md\:px-8 { padding-left: var(--space-8); padding-right: var(--space-8); } .md\:py-4 { padding-top: var(--space-4); padding-bottom: var(--space-4); } .md\:py-6 { padding-top: var(--space-6); padding-bottom: var(--space-6); } .md\:mb-0 { margin-bottom: 0; } .md\:mr-4 { margin-right: var(--space-4); } .md\:mx-0 { margin-left: 0; margin-right: 0; } .md\:text-lg { font-size: var(--font-size-lg); } .md\:text-xl { font-size: var(--font-size-xl); } .md\:text-2xl { font-size: var(--font-size-2xl); } .md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .md\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .md\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .md\:col-span-4 { grid-column: span 4 / span 4; } .md\:col-span-6 { grid-column: span 6 / span 6; } .md\:col-span-8 { grid-column: span 8 / span 8; } .md\:col-span-12 { grid-column: span 12 / span 12; } /* PrimeNG grid compatibility */ .md\:col-4 { grid-column: span 4 / span 4; } .md\:col-6 { grid-column: span 6 / span 6; } } /* Large screens (1024px and up) */ @media (min-width: 1024px) { .lg\:flex { display: flex; } .lg\:hidden { display: none; } .lg\:block { display: block; } .lg\:grid { display: grid; } .lg\:flex-row { flex-direction: row; } .lg\:flex-col { flex-direction: column; } .lg\:items-start { align-items: flex-start; } .lg\:items-center { align-items: center; } .lg\:justify-between { justify-content: space-between; } .lg\:w-full { width: 100%; } .lg\:w-auto { width: auto; } .lg\:w-1\/2 { width: 50%; } .lg\:w-1\/3 { width: 33.333333%; } .lg\:w-2\/3 { width: 66.666667%; } .lg\:gap-4 { gap: var(--space-4); } .lg\:gap-6 { gap: var(--space-6); } .lg\:gap-8 { gap: var(--space-8); } .lg\:p-6 { padding: var(--space-6); } .lg\:p-8 { padding: var(--space-8); } .lg\:px-6 { padding-left: var(--space-6); padding-right: var(--space-6); } .lg\:px-8 { padding-left: var(--space-8); padding-right: var(--space-8); } .lg\:text-xl { font-size: var(--font-size-xl); } .lg\:text-2xl { font-size: var(--font-size-2xl); } .lg\:text-3xl { font-size: var(--font-size-3xl); } .lg\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .lg\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .lg\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .lg\:col-span-3 { grid-column: span 3 / span 3; } .lg\:col-span-5 { grid-column: span 5 / span 5; } .lg\:col-span-7 { grid-column: span 7 / span 7; } .lg\:col-span-8 { grid-column: span 8 / span 8; } .lg\:col-span-12 { grid-column: span 12 / span 12; } } /* Extra large screens (1280px and up) */ @media (min-width: 1280px) { .xl\:flex { display: flex; } .xl\:hidden { display: none; } .xl\:block { display: block; } .xl\:grid { display: grid; } .xl\:flex-row { flex-direction: row; } .xl\:w-full { width: 100%; } .xl\:w-auto { width: auto; } .xl\:gap-6 { gap: var(--space-6); } .xl\:gap-8 { gap: var(--space-8); } .xl\:p-8 { padding: var(--space-8); } .xl\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .xl\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } } /** * Glassmorphism Effects * * Modern glassmorphism styles with proper fallbacks for browser support * and accessibility considerations (reduced motion, contrast preferences). */ @layer components { /* ============================================ * Base Glass Effect * ============================================ */ .glass { background: var(--glass-background); backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturation)); -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturation)); border: 1px solid var(--glass-border-color); box-shadow: var(--glass-shadow); } /* ============================================ * Glass Variants * ============================================ */ /* Subtle glass - less blur, more transparency */ .glass-subtle { background: rgba(255, 255, 255, 0.5); backdrop-filter: blur(8px) saturate(150%); -webkit-backdrop-filter: blur(8px) saturate(150%); border: 1px solid rgba(255, 255, 255, 0.2); box-shadow: 0 4px 16px rgba(31, 38, 135, 0.1); } :where(.clk-dark) .glass-subtle { background: rgba(24, 24, 27, 0.5); border-color: rgba(255, 255, 255, 0.08); box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2); } /* Strong glass - more blur, less transparency */ .glass-strong { background: rgba(255, 255, 255, 0.9); backdrop-filter: blur(20px) saturate(200%); -webkit-backdrop-filter: blur(20px) saturate(200%); border: 1px solid rgba(255, 255, 255, 0.4); box-shadow: 0 12px 48px rgba(31, 38, 135, 0.2); } :where(.clk-dark) .glass-strong { background: rgba(24, 24, 27, 0.95); border-color: rgba(255, 255, 255, 0.12); box-shadow: 0 12px 48px rgba(0, 0, 0, 0.45); } /* Frosted glass - heavier blur with noise texture */ .glass-frosted { background: rgba(255, 255, 255, 0.7); backdrop-filter: blur(16px) saturate(180%); -webkit-backdrop-filter: blur(16px) saturate(180%); border: 1px solid rgba(255, 255, 255, 0.35); box-shadow: 0 8px 32px rgba(31, 38, 135, 0.15), inset 0 0 0 1px rgba(255, 255, 255, 0.1); } :where(.clk-dark) .glass-frosted { background: rgba(24, 24, 27, 0.85); border-color: rgba(255, 255, 255, 0.1); box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4), inset 0 0 0 1px rgba(255, 255, 255, 0.05); } /* Tinted glass - with primary color tint */ .glass-tinted { background: rgba(var(--p-primary-500-rgb, 99, 102, 241), 0.1); backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturation)); -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturation)); border: 1px solid rgba(var(--p-primary-500-rgb, 99, 102, 241), 0.2); box-shadow: 0 8px 32px rgba(var(--p-primary-500-rgb, 99, 102, 241), 0.15); } :where(.clk-dark) .glass-tinted { background: rgba(var(--p-primary-400-rgb, 129, 140, 248), 0.15); border-color: rgba(var(--p-primary-400-rgb, 129, 140, 248), 0.25); box-shadow: 0 8px 32px rgba(var(--p-primary-400-rgb, 129, 140, 248), 0.1); } /* ============================================ * Glass Card Component * ============================================ */ .glass-card { background: var(--glass-background); backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturation)); -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturation)); border: 1px solid var(--glass-border-color); border-radius: var(--radius-xl); box-shadow: var(--glass-shadow); padding: var(--space-6); } :where(.clk-dark) .glass-card { background: rgba(24, 24, 27, 0.7); border-color: rgba(255, 255, 255, 0.1); } /* Form elements inside glass card in dark mode */ :where(.clk-dark) .glass-card .p-inputtext, :where(.clk-dark) .glass-card .p-textarea { background: rgba(0, 0, 0, 0.3); border-color: rgba(255, 255, 255, 0.1); color: var(--text-color); } :where(.clk-dark) .glass-card .p-inputtext:focus, :where(.clk-dark) .glass-card .p-textarea:focus { background: rgba(0, 0, 0, 0.4); border-color: var(--p-primary-color); } /* Input group styling in glass card */ :where(.clk-dark) .glass-card .p-inputgroup { display: flex; align-items: stretch; } :where(.clk-dark) .glass-card .p-inputgroup-addon { background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.1); border-right: none; color: var(--text-color); display: flex; align-items: center; justify-content: center; padding: 0 0.75rem; border-radius: var(--p-inputtext-border-radius) 0 0 var(--p-inputtext-border-radius); } :where(.clk-dark) .glass-card .p-inputgroup .p-inputtext { border-top-left-radius: 0; border-bottom-left-radius: 0; } /* Emoji button in glass card */ :where(.clk-dark) .glass-card .bg-surface-100 { background: rgba(255, 255, 255, 0.1); } :where(.clk-dark) .glass-card .hover\:bg-surface-200:hover { background: rgba(255, 255, 255, 0.2); } .glass-card-sm { padding: var(--space-4); border-radius: var(--radius-lg); } .glass-card-lg { padding: var(--space-8); border-radius: var(--radius-2xl); } /* ============================================ * Glass Panel (for sidebars, modals) * ============================================ */ .glass-panel { background: var(--glass-background); backdrop-filter: blur(16px) saturate(var(--glass-saturation)); -webkit-backdrop-filter: blur(16px) saturate(var(--glass-saturation)); border: 1px solid var(--glass-border-color); box-shadow: var(--glass-shadow); } /* ============================================ * Glass Input * ============================================ */ .glass-input { background: rgba(255, 255, 255, 0.6); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border: 1px solid rgba(255, 255, 255, 0.3); border-radius: var(--radius-lg); transition: background-color var(--duration-200) var(--ease-in-out), border-color var(--duration-200) var(--ease-in-out), box-shadow var(--duration-200) var(--ease-in-out); } .glass-input:focus { background: rgba(255, 255, 255, 0.8); border-color: var(--p-primary-color); box-shadow: 0 0 0 3px rgba(var(--p-primary-500-rgb, 99, 102, 241), 0.15); outline: none; } :where(.clk-dark) .glass-input { background: rgba(24, 24, 27, 0.6); border-color: rgba(255, 255, 255, 0.1); } :where(.clk-dark) .glass-input:focus { background: rgba(24, 24, 27, 0.8); box-shadow: 0 0 0 3px rgba(var(--p-primary-400-rgb, 129, 140, 248), 0.2); } /* ============================================ * Glass Button * ============================================ */ .glass-button { background: rgba(255, 255, 255, 0.7); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border: 1px solid rgba(255, 255, 255, 0.3); border-radius: var(--radius-lg); padding: var(--space-2) var(--space-4); cursor: pointer; transition: background-color var(--duration-200) var(--ease-in-out), transform var(--duration-150) var(--ease-out), box-shadow var(--duration-200) var(--ease-in-out); } .glass-button:hover { background: rgba(255, 255, 255, 0.85); transform: translateY(-1px); box-shadow: 0 4px 12px rgba(31, 38, 135, 0.15); } .glass-button:active { transform: translateY(0); box-shadow: 0 2px 6px rgba(31, 38, 135, 0.1); } :where(.clk-dark) .glass-button { background: rgba(24, 24, 27, 0.7); border-color: rgba(255, 255, 255, 0.1); } :where(.clk-dark) .glass-button:hover { background: rgba(24, 24, 27, 0.85); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); } /* ============================================ * Glass Overlay (for modals, dialogs) * ============================================ */ .glass-overlay { background: rgba(0, 0, 0, 0.3); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); } /* ============================================ * Glass Divider * ============================================ */ .glass-divider { height: 1px; background: linear-gradient( 90deg, transparent, var(--glass-border-color), transparent ); } .glass-divider-vertical { width: 1px; height: 100%; background: linear-gradient( 180deg, transparent, var(--glass-border-color), transparent ); } /* ============================================ * Glass Badge * ============================================ */ .glass-badge { display: inline-flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, 0.6); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); border: 1px solid rgba(255, 255, 255, 0.25); border-radius: var(--radius-full); padding: var(--space-1) var(--space-3); font-size: var(--font-size-xs); font-weight: var(--font-weight-medium); } :where(.clk-dark) .glass-badge { background: rgba(24, 24, 27, 0.6); border-color: rgba(255, 255, 255, 0.08); } /* ============================================ * Fallbacks for Unsupported Browsers * ============================================ */ @supports not (backdrop-filter: blur(1px)) { .glass, .glass-subtle, .glass-strong, .glass-frosted, .glass-tinted, .glass-card, .glass-panel, .glass-input, .glass-button, .glass-badge { background: var(--surface-card); border: 1px solid var(--surface-border); } .glass-overlay { background: rgba(0, 0, 0, 0.5); } :where(.clk-dark) .glass, :where(.clk-dark) .glass-subtle, :where(.clk-dark) .glass-strong, :where(.clk-dark) .glass-frosted, :where(.clk-dark) .glass-tinted, :where(.clk-dark) .glass-card, :where(.clk-dark) .glass-panel, :where(.clk-dark) .glass-input, :where(.clk-dark) .glass-button, :where(.clk-dark) .glass-badge { background: var(--p-surface-900); border-color: var(--surface-border); } } /* ============================================ * Accessibility: Reduced Motion * ============================================ */ @media (prefers-reduced-motion: reduce) { .glass, .glass-subtle, .glass-strong, .glass-frosted, .glass-tinted, .glass-card, .glass-panel, .glass-input, .glass-button, .glass-overlay, .glass-badge { backdrop-filter: none; -webkit-backdrop-filter: none; } /* Use solid backgrounds instead */ .glass, .glass-card, .glass-panel { background: var(--surface-card); } :where(.clk-dark) .glass, :where(.clk-dark) .glass-card, :where(.clk-dark) .glass-panel { background: var(--p-surface-900); } } /* ============================================ * High Contrast Mode Support * ============================================ */ @media (prefers-contrast: more) { .glass, .glass-subtle, .glass-strong, .glass-frosted, .glass-tinted, .glass-card, .glass-panel, .glass-input, .glass-button, .glass-badge { backdrop-filter: none; -webkit-backdrop-filter: none; background: var(--surface-card); border-width: 2px; border-color: var(--p-text-color); } } /* ============================================ * Animation Utilities for Glass Elements * ============================================ */ @keyframes glass-shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } } .glass-shimmer { position: relative; overflow: hidden; } .glass-shimmer::after { content: ''; position: absolute; inset: 0; background: linear-gradient( 90deg, transparent, rgba(255, 255, 255, 0.2), transparent ); background-size: 200% 100%; animation: glass-shimmer 2s infinite; pointer-events: none; } @media (prefers-reduced-motion: reduce) { .glass-shimmer::after { animation: none; display: none; } } /* Glass glow effect on hover */ .glass-glow { transition: box-shadow var(--duration-300) var(--ease-out); } .glass-glow:hover { box-shadow: var(--glass-shadow), 0 0 20px rgba(var(--p-primary-500-rgb, 99, 102, 241), 0.2); } :where(.clk-dark) .glass-glow:hover { box-shadow: var(--glass-shadow), 0 0 20px rgba(var(--p-primary-400-rgb, 129, 140, 248), 0.15); } @media (prefers-reduced-motion: reduce) { .glass-glow { transition: none; } } } /* ============================================ * Island Tabs (Pill/Segmented Style) * Outside @layer for proper specificity over PrimeNG * ============================================ */ p-tabs.tabs-islands { --tabs-gap: var(--space-2, 0.5rem); --tab-radius: var(--radius-xl, 1rem); --tab-padding-x: var(--space-4, 1rem); --tab-padding-y: var(--space-2, 0.5rem); } p-tabs.tabs-islands .p-tablist { background: transparent; border: none; } p-tabs.tabs-islands .p-tablist-tab-list { background: transparent; border: none; gap: var(--tabs-gap); } p-tabs.tabs-islands .p-tab { display: inline-flex; align-items: center; gap: var(--space-2, 0.5rem); background: rgba(255, 255, 255, 0.1); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border: 1px solid rgba(255, 255, 255, 0.2); border-radius: var(--tab-radius); padding: var(--tab-padding-y) var(--tab-padding-x); margin: 0; transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, color 0.2s ease-in-out, box-shadow 0.2s ease-in-out; } p-tabs.tabs-islands .p-tab:hover:not(.p-tab-active) { background: rgba(255, 255, 255, 0.2); border-color: rgba(255, 255, 255, 0.3); } p-tabs.tabs-islands .p-tab.p-tab-active { background: rgba(var(--p-primary-500-rgb, 99, 102, 241), 0.2); border-color: rgba(var(--p-primary-500-rgb, 99, 102, 241), 0.4); color: var(--p-primary-color); box-shadow: 0 4px 12px rgba(var(--p-primary-500-rgb, 99, 102, 241), 0.15); } /* Hide default ink bar */ p-tabs.tabs-islands .p-tablist-active-bar { display: none; } /* Dark mode */ :where(.clk-dark) p-tabs.tabs-islands .p-tab { background: rgba(24, 24, 27, 0.4); border-color: rgba(255, 255, 255, 0.1); } :where(.clk-dark) p-tabs.tabs-islands .p-tab:hover:not(.p-tab-active) { background: rgba(24, 24, 27, 0.6); border-color: rgba(255, 255, 255, 0.15); } :where(.clk-dark) p-tabs.tabs-islands .p-tab.p-tab-active { background: rgba(var(--p-primary-400-rgb, 129, 140, 248), 0.25); border-color: rgba(var(--p-primary-400-rgb, 129, 140, 248), 0.4); color: var(--p-primary-400); box-shadow: 0 4px 12px rgba(var(--p-primary-400-rgb, 129, 140, 248), 0.1); } /* Fallback for unsupported browsers */ @supports not (backdrop-filter: blur(1px)) { p-tabs.tabs-islands .p-tab { background: var(--surface-100); } p-tabs.tabs-islands .p-tab.p-tab-active { background: var(--p-primary-100); } :where(.clk-dark) p-tabs.tabs-islands .p-tab { background: var(--surface-800); } :where(.clk-dark) p-tabs.tabs-islands .p-tab.p-tab-active { background: rgba(var(--p-primary-400-rgb), 0.3); } } /* Reduced motion */ @media (prefers-reduced-motion: reduce) { p-tabs.tabs-islands .p-tab { transition: none; } } /* ============================================ * Glass Dialog (for PrimeNG DynamicDialog) * Uses primeng-overrides layer for proper specificity * ============================================ */ @layer primeng-overrides { /* Dark mode dialog (default for clk-dark) */ :where(.clk-dark) .glass-dialog .p-dialog, .glass-dialog .p-dialog { background: rgba(24, 24, 27, 0.92); backdrop-filter: blur(24px) saturate(180%); -webkit-backdrop-filter: blur(24px) saturate(180%); border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 1.5rem; box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.05) inset; overflow: hidden; display: flex; flex-direction: column; } .glass-dialog .p-dialog-header { display: none; } .glass-dialog .p-dialog-content { padding: 0; background: transparent; color: var(--text-color); flex: 1; display: flex; flex-direction: column; min-height: 0; } .glass-dialog .p-dialog-footer { background: transparent; border-top: 1px solid rgba(255, 255, 255, 0.1); } /* Light mode glass dialog */ :where(:not(.clk-dark)) .glass-dialog .p-dialog { background: rgba(255, 255, 255, 0.92); border-color: rgba(0, 0, 0, 0.1); box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(0, 0, 0, 0.05) inset; } /* Maximized dialog state */ .glass-dialog.dialog-maximized .p-dialog { width: 100vw !important; height: 100vh !important; max-width: 100vw !important; max-height: 100vh !important; border-radius: 0; top: 0 !important; left: 0 !important; transform: none !important; } /* Glass dialog overlay with blur */ .glass-dialog.p-dialog-mask, .p-dialog-mask.glass-dialog { background: rgba(0, 0, 0, 0.5); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } } /* Fallback for unsupported browsers */ @layer primeng-overrides { @supports not (backdrop-filter: blur(1px)) { .glass-dialog .p-dialog { background: var(--p-surface-900); } :where(:not(.clk-dark)) .glass-dialog .p-dialog { background: var(--surface-card); } .glass-dialog.p-dialog-mask { background: rgba(0, 0, 0, 0.7); } } } /* Glass dialog header hiding - outside layer for specificity */ .p-dialog-mask.glass-dialog .p-dialog .p-dialog-header { display: none; } /* ============================================ * Aurora Mesh Background * * Layered radial gradients with continuous drift. * Apply to a wrapper element for "moments" pages * (auth, billing checkout, setup wizard, splash). * ============================================ */ @layer components { .aurora-bg { min-height: 100dvh; display: flex; flex-direction: column; position: relative; overflow: hidden; background: radial-gradient( at 18% 22%, color-mix(in srgb, var(--p-primary-500) 55%, transparent) 0, transparent 50% ), radial-gradient( at 82% 8%, color-mix(in srgb, var(--p-pink-500) 45%, transparent) 0, transparent 50% ), radial-gradient( at 5% 80%, color-mix(in srgb, var(--p-cyan-500) 42%, transparent) 0, transparent 50% ), radial-gradient( at 78% 78%, color-mix(in srgb, var(--p-amber-500) 35%, transparent) 0, transparent 50% ), linear-gradient(135deg, var(--p-surface-50), var(--p-primary-50)); } :where(.clk-dark) .aurora-bg { background: radial-gradient( at 18% 22%, color-mix(in srgb, var(--p-primary-500) 35%, transparent) 0, transparent 50% ), radial-gradient( at 82% 8%, color-mix(in srgb, var(--p-pink-500) 25%, transparent) 0, transparent 50% ), radial-gradient( at 5% 80%, color-mix(in srgb, var(--p-cyan-500) 22%, transparent) 0, transparent 50% ), radial-gradient( at 78% 78%, color-mix(in srgb, var(--p-amber-500) 18%, transparent) 0, transparent 50% ), linear-gradient(135deg, var(--p-surface-950), var(--p-surface-900)); } .aurora-bg::before { content: ''; position: absolute; inset: 0; pointer-events: none; background-image: radial-gradient( circle at 1px 1px, rgb(0 0 0 / 0.025) 1px, transparent 0 ); background-size: 18px 18px; } .aurora-bg::after { content: ''; position: absolute; inset: -5%; pointer-events: none; background: inherit; filter: blur(0px); animation: aurora-drift 30s linear infinite; will-change: transform; } /* Subtle variant — same shape, reduced opacities. Use on pages where the aurora supports content rather than carrying it. */ .aurora-bg--subtle { background: radial-gradient( at 18% 22%, color-mix(in srgb, var(--p-primary-500) 28%, transparent) 0, transparent 50% ), radial-gradient( at 82% 8%, color-mix(in srgb, var(--p-pink-500) 22%, transparent) 0, transparent 50% ), radial-gradient( at 5% 80%, color-mix(in srgb, var(--p-cyan-500) 20%, transparent) 0, transparent 50% ), radial-gradient( at 78% 78%, color-mix(in srgb, var(--p-amber-500) 16%, transparent) 0, transparent 50% ), linear-gradient(135deg, var(--p-surface-50), var(--p-primary-50)); } :where(.clk-dark) .aurora-bg--subtle { background: radial-gradient( at 18% 22%, color-mix(in srgb, var(--p-primary-500) 18%, transparent) 0, transparent 50% ), radial-gradient( at 82% 8%, color-mix(in srgb, var(--p-pink-500) 14%, transparent) 0, transparent 50% ), radial-gradient( at 5% 80%, color-mix(in srgb, var(--p-cyan-500) 12%, transparent) 0, transparent 50% ), radial-gradient( at 78% 78%, color-mix(in srgb, var(--p-amber-500) 10%, transparent) 0, transparent 50% ), linear-gradient(135deg, var(--p-surface-950), var(--p-surface-900)); } @keyframes aurora-drift { 0% { transform: translate3d(0, 0, 0); } 50% { transform: translate3d(2%, -1%, 0); } 100% { transform: translate3d(0, 0, 0); } } @media (prefers-reduced-motion: reduce) { .aurora-bg::after { animation: none; } } /* ============================================ * Gradient Text * * Brand-tone gradient applied to text. Use on hero * titles, headlines, brand wordmarks. * ============================================ */ .gradient-text { background: linear-gradient( 135deg, var(--p-primary-700), var(--p-pink-500) ); -webkit-background-clip: text; background-clip: text; color: transparent; } :where(.clk-dark) .gradient-text { background: linear-gradient( 135deg, var(--p-primary-300), var(--p-pink-500) ); -webkit-background-clip: text; background-clip: text; color: transparent; } /* ============================================ * Button system (.clk-btn family) * * Shared glassmorphism button utilities used by the redesigned * pages (planning, dashboard, event detail, analytics). Lives * here because Angular's emulated view encapsulation scopes * component-local CSS per-component — global rules apply to * any DOM regardless of which component declared the template. * ============================================ */ .clk-btn { display: inline-flex; align-items: center; gap: var(--space-1-5); padding: var(--space-2) var(--space-3); border-radius: var(--radius-lg); font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); line-height: 1; cursor: pointer; border: 1px solid transparent; font-family: inherit; transition: background-color var(--duration-150) var(--ease-out), border-color var(--duration-150) var(--ease-out), color var(--duration-150) var(--ease-out); } .clk-btn i { font-size: var(--font-size-base); } .clk-btn:disabled { opacity: 0.55; cursor: not-allowed; } .clk-btn-ghost { background: transparent; border-color: var(--clk-glass-border-strong); color: var(--clk-text-strong-warm, var(--p-text-color)); } .clk-btn-ghost:hover, .clk-btn-ghost:focus-visible { background-color: rgba(255, 255, 255, 0.04); outline: none; } .clk-btn-glass { background: rgba(255, 255, 255, 0.04); border-color: var(--clk-glass-border); color: var(--clk-text-muted-warm); } .clk-btn-glass:hover, .clk-btn-glass:focus-visible { background: rgba(255, 255, 255, 0.07); color: var(--clk-text-strong-warm, var(--p-text-color)); outline: none; } .clk-btn-glass.is-active { background: color-mix(in srgb, var(--p-primary-color) 14%, transparent); border-color: color-mix(in srgb, var(--p-primary-color) 45%, transparent); color: var(--p-primary-color); } .clk-btn-primary { background: var(--p-primary-color); border-color: var(--p-primary-color); color: var(--p-primary-color-text, #1f1100); } .clk-btn-primary:hover, .clk-btn-primary:focus-visible { filter: brightness(1.05); outline: none; } .clk-btn-lg { padding: var(--space-3) var(--space-5); font-size: var(--font-size-base); border-radius: var(--radius-xl, 12px); } .clk-btn-lg i { font-size: var(--font-size-lg); } } /* ============================================ * Global p-select dropdown polish (overlay teleports to body, * so per-component ::ng-deep doesn't reach it — keep here.) * ============================================ */ .p-select-overlay .p-select-list { padding: 0.5rem; display: flex; flex-direction: column; gap: 0.25rem; } .p-select-overlay .p-select-option { display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem 0.875rem; min-height: 2.5rem; border-radius: 8px; line-height: 1.4; font-size: var(--font-size-sm); } .p-select-overlay .p-select-option > img, .p-select-overlay .p-select-option > .flag, .p-select-overlay .p-select-option > [class*='flag'] { flex-shrink: 0; } .p-select-overlay .p-select-list-header { padding: 0.75rem 0.5rem 0.5rem; } /* keep the brace count balanced for the original @layer wrapper */ @layer components { /* ============================================ * Topbar action sizing * * Anything rendered via PageHeaderService into the topbar's * .topbar-actions slot (buttons, PrimeNG selects, time-range * pickers) should share the same compact height + font size * so they visually align as one strip. Pages no longer need * to redefine these rules per component. * ============================================ */ .topbar-actions .clk-btn, .topbar-actions .p-button, .topbar-actions .p-select { height: 1.875rem; min-height: 1.875rem; font-size: var(--font-size-xs); line-height: 1; } .topbar-actions .clk-btn { padding: 0 0.75rem; align-items: center; } .topbar-actions .clk-btn-primary { padding: 0 0.875rem; } /* Match icon size to label size so flex centering produces a clean visual line. Without this, default 16px icons sit visually above 12px text inside a 30px button, breaking horizontal alignment. */ .topbar-actions .clk-btn i, .topbar-actions .p-button i, .topbar-actions .p-select i { font-size: 0.9375rem; line-height: 1; display: inline-flex; align-items: center; } .topbar-actions .clk-btn span { line-height: 1; display: inline-flex; align-items: center; } .topbar-actions .p-select { min-width: 9rem; } .topbar-actions .p-select-label { padding: 0 var(--space-2); display: inline-flex; align-items: center; line-height: 1; } .topbar-actions .p-select-dropdown { width: 1.75rem; } .topbar-actions .time-range-picker { display: inline-flex; align-items: center; gap: 0.25rem; } .topbar-actions .time-range-picker .p-button { padding: 0 0.5rem; } .topbar-actions .p-button .p-button-label { line-height: 1; } /* ============================================ * Card Entrance * * 600ms ease-out fade + lift on first paint. * Apply to hero cards on moments pages. * ============================================ */ @keyframes card-enter { from { opacity: 0; transform: translateY(16px) scale(0.98); } to { opacity: 1; transform: translateY(0) scale(1); } } .card-enter { animation: card-enter 600ms var(--ease-out) both; } /* ============================================ * Panel Entrance (Cascading) * * 700ms ease-out fade + lift. Apply to panel sections * and add `animation-delay` per element via component * CSS to stagger the cascade. * ============================================ */ @keyframes panel-enter { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } } .panel-enter { animation: panel-enter 700ms var(--ease-out) both; } @media (prefers-reduced-motion: reduce) { .card-enter, .panel-enter { animation: none; } } /* ============================================ * Page Header * * Consistent page entrance pattern: h1 + optional * subtitle on the left, controls on the right. * Mobile-first stack, side-by-side at 768px+. * ============================================ */ .page-header { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-4); margin-bottom: var(--space-6); padding: 0 var(--space-4); } .page-header__titles { display: flex; flex-direction: column; gap: var(--space-1); } .page-header__title { margin: 0; font-size: clamp(var(--font-size-2xl), 3vw, var(--font-size-4xl)); font-weight: var(--font-weight-extrabold); letter-spacing: var(--letter-spacing-tight); line-height: var(--line-height-tight); color: var(--p-text-color); } .page-header__subtitle { margin: 0; color: var(--p-text-muted-color); font-size: var(--font-size-base); } .page-header__controls { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-3); } @media (min-width: 768px) { .page-header { flex-direction: row; align-items: center; justify-content: space-between; } .page-header__controls { flex-wrap: nowrap; } } } /** * Design system bridge * * Maps the token vocabulary used by the Claude Design prototype * (`--text`, `--bg`, `--surface`, `--glass-bg`, `--primary`, etc.) onto * the existing PrimeNG-driven token layer (`--p-text-color`, * `--p-surface-0`, `--p-primary-500`, …). New screens authored against * the prototype's vocabulary work without rewiring; existing screens * built against `--p-*` continue to work unchanged. * * Also ports a handful of utility classes from the prototype's shared * stylesheet that don't have a one-to-one PrimeNG equivalent * (eyebrow chip, corona gradient, grain overlay, stripey placeholder, * mono label, divider). */ @layer components { :root { /* ── Primary scale aliases ────────────────────────────────── * Prototype uses --p-50..--p-950 directly; the app exposes the * same scale as --p-primary-50..--p-primary-950 via PrimeNG. */ --p-50: var(--p-primary-50); --p-100: var(--p-primary-100); --p-200: var(--p-primary-200); --p-300: var(--p-primary-300); --p-400: var(--p-primary-400); --p-500: var(--p-primary-500); --p-600: var(--p-primary-600); --p-700: var(--p-primary-700); --p-800: var(--p-primary-800); --p-900: var(--p-primary-900); --p-950: var(--p-primary-950); /* ── Semantic color aliases ──────────────────────────────── * `--text`, `--bg`, `--surface`, `--border`, `--primary` — * the prototype's vocabulary. */ --text: var(--p-text-color); --text-muted: var(--p-text-muted-color); --text-subtle: var(--p-surface-400); --bg: var(--p-content-background); --bg-soft: var(--p-surface-0); --bg-muted: var(--p-surface-50); --bg-inverse: var(--p-surface-900); --surface: var(--p-surface-0); --surface-2: var(--p-surface-50); --border: var(--p-content-border-color); --border-strong: var(--p-surface-300); --primary: var(--p-primary-500); --primary-hover: var(--p-primary-600); --primary-soft: var(--p-primary-100); --primary-soft-2: var(--p-primary-50); --primary-contrast: var(--p-primary-contrast-color); /* ── Glass surface variables ─────────────────────────────── * The .glass utility uses --glass-background, --glass-blur, * --glass-saturation, --glass-border-color, --glass-shadow. * The prototype names these --glass-bg / --glass-bg-2 / * --glass-border. Mirror both directions. */ --glass-bg: rgba(255, 255, 255, 0.65); --glass-bg-2: rgba(255, 255, 255, 0.85); --glass-border: rgba(255, 255, 255, 0.45); /* ── Social platform color aliases ───────────────────────── * App uses --{platform}-color; prototype uses --c-{platform}. */ --c-discord: var(--discord-color); --c-facebook: var(--facebook-color); --c-google: var(--google-color); --c-instagram: var(--instagram-color); --c-slack: var(--slack-color); --c-tiktok: var(--tiktok-color); --c-twitter: var(--twitter-color); --c-whatsapp: var(--whatsapp-color); --c-tiktok-cyan: #25f4ee; --c-tiktok-red: #fe2c55; } /* Every token below is also set on `:root` (→ its light value). The dark * override must out-specify `:root`, so it targets `:root.clk-dark` (0,2,0) * rather than a zero-specificity `:where(.clk-dark)`, which would lose. */ :root.clk-dark { --text-subtle: rgba(252, 247, 240, 0.42); --border-strong: rgba(255, 255, 255, 0.15); --glass-bg: rgba(24, 24, 27, 0.6); --glass-bg-2: rgba(24, 24, 27, 0.82); --glass-border: rgba(255, 255, 255, 0.08); --surface: rgba(255, 255, 255, 0.06); --surface-2: rgba(255, 255, 255, 0.1); /* Soft-amber tints map to light `--p-primary-50/100`; translucent * amber reads correctly over the dark surface. */ --primary-soft: rgba(249, 161, 46, 0.16); --primary-soft-2: rgba(249, 161, 46, 0.1); } /* ── Eyebrow chip ────────────────────────────────────────────── * Uppercase tag with a soft primary background and a dot prefix — * used as a section opener across the prototype. */ .clk-eyebrow { display: inline-flex; align-items: center; gap: var(--space-2); padding: var(--space-1) var(--space-3); border-radius: var(--radius-full); background: var(--primary-soft); color: var(--primary); border: 1px solid var(--primary-soft); font-size: var(--font-size-xs); font-weight: var(--font-weight-medium); letter-spacing: var(--letter-spacing-wider); text-transform: uppercase; } :where(.clk-dark) .clk-eyebrow { border-color: rgba(249, 161, 46, 0.22); } .clk-eyebrow__dot { width: 6px; height: 6px; border-radius: var(--radius-full); background: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); } /* ── Horizontal divider with fade ──────────────────────────── */ .clk-divider { height: 1px; background: linear-gradient(90deg, transparent, var(--border), transparent); } /* ── Monospace caps label ────────────────────────────────────── * Used on placeholders, datelines, file paths. */ .clk-mono { font-family: 'JetBrains Mono', 'IBM Plex Mono', ui-monospace, Menlo, monospace; font-size: 11px; letter-spacing: var(--letter-spacing-wider); text-transform: uppercase; color: var(--text-subtle); } /* ── Warm corona gradient ───────────────────────────────────── * Soft amber wash for hero backdrops. Tone shifts in dark mode. */ .clk-corona { background: radial-gradient( 60% 60% at 75% 20%, rgba(249, 161, 46, 0.22) 0%, transparent 60% ), radial-gradient( 50% 50% at 15% 80%, rgba(255, 200, 122, 0.18) 0%, transparent 55% ); } :where(.clk-dark) .clk-corona { background: radial-gradient( 60% 60% at 75% 20%, rgba(249, 161, 46, 0.32) 0%, transparent 60% ), radial-gradient( 50% 50% at 15% 80%, rgba(186, 104, 22, 0.22) 0%, transparent 55% ); } /* ── Subtle grain overlay ───────────────────────────────────── * Add to a positioned parent with `position: relative` to dust the * surface. Opacity tightens slightly in dark mode. */ .clk-grain { position: relative; } .clk-grain::before { content: ''; position: absolute; inset: 0; pointer-events: none; background-image: url("data:image/svg+xml;utf8,"); opacity: 0.025; mix-blend-mode: overlay; } :where(.clk-dark) .clk-grain::before { opacity: 0.04; } /* ── Stripey image placeholder ──────────────────────────────── * Marks a known-future image slot without committing to a CDN URL. */ .clk-placeholder { position: relative; overflow: hidden; background-color: var(--surface-2); background-image: repeating-linear-gradient( 135deg, var(--border) 0 1px, transparent 1px 14px ); border: 1px solid var(--border); border-radius: var(--radius-2xl); display: flex; align-items: center; justify-content: center; } .clk-placeholder .clk-mono { background: var(--bg); padding: var(--space-1) var(--space-2); border-radius: var(--radius-sm); border: 1px solid var(--border); } .p-menu-item-icon { line-height: 1; } } :root { --primary-color: var(--p-primary-color); --primary-color-text: var(--p-primary-contrast-color); --text-color: var(--p-text-color); --text-color-secondary: var(--p-text-muted-color); --surface-border: var(--p-content-border-color); --surface-card: var(--p-content-background); --surface-hover: var(--p-content-hover-background); --surface-overlay: var(--p-overlay-popover-background); --transition-duration: var(--p-transition-duration); --maskbg: var(--p-mask-background); --border-radius: var(--p-content-border-radius); --layout-section-transition-duration: 0.2s; --focus-ring-shadow: var(--p-focus-ring-shadow); /***** Colors *****/ --apple-color: #a3aaae; --discord-color: #5865f2; --facebook-color: #0165e1; --google-color: #ea4335; --instagram-color: #e1306c; --slack-color: #4a154b; --tiktok-color: #000000; --twitter-color: #1d9bf0; --whatsapp-color: #25d366; /***** Heights *****/ --header-height: 66px; --full-height: 100%; --full-view-height: 100dvh; --full-view-height-header: calc( var(--full-view-height) - var(--header-height) ); --half-height: 50%; /**** Widths *****/ --full-width: 100%; --full-view-width: 100dvw; --half-width: 50%; /***** Margins *****/ --margin-sidebar-open: 15rem; --no-margin: 0; /**** Paddings *****/ --padding-block: 1rem; /***** Transitions *****/ --transition-margin-left: margin-left 150ms ease-out; /***** Borders *****/ --border-radius: 24px; /***** Masonry Sizes *****/ --one-third: 163px; --half: 245px; --two-third: 327px; --full: 492px; --extended: 738px; /***** Glassmorphism *****/ --glass-blur: 12px; --glass-saturation: 180%; /***** Text hierarchy (warm off-white for muted tiers — subtle brand warmth against the orange accent; keeps the UI from reading as pure grey-on-black) *****/ --text-primary: rgba(255, 255, 255, 0.95); --text-muted: rgba(252, 247, 240, 0.58); --text-subtle: rgba(252, 247, 240, 0.42); } :root { --surface-ground: var(--p-surface-100); --sidebar-shadow: 0px 4px 50px #d9ddfc; --sidebar-border: 1px solid transparent; --card-shadow: 0px 4px 30px rgba(221, 224, 255, 0.54); /***** Glassmorphism *****/ --glass-background: rgba(255, 255, 255, 0.75); --glass-border-color: rgba(255, 255, 255, 0.3); --glass-shadow: 0 8px 32px rgba(31, 38, 135, 0.15); } :root[class*='clk-dark'] { --surface-ground: var(--p-surface-950); --sidebar-shadow: none; --sidebar-border: 1px solid var(--surface-border); --card-shadow: none; /***** Glassmorphism *****/ --glass-background: rgba(24, 24, 27, 0.8); --glass-border-color: rgba(255, 255, 255, 0.1); --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.35); }