:root {
    color-scheme: light;
    --ps-primary-100: #eef2e6;
    --ps-primary-200: #d6e1c4;
    --ps-primary-300: #b8c9a2;
    --ps-primary-400: #a0b487;
    --ps-primary-500: #869a6d;
    --ps-primary-600: #6c8255;
    --ps-primary-700: #556a41;
    --ps-primary-100-rgb: 238, 242, 230;
    --ps-primary-200-rgb: 214, 225, 196;
    --ps-primary-300-rgb: 184, 201, 162;
    --ps-primary-400-rgb: 160, 180, 135;
    --ps-primary-500-rgb: 134, 154, 109;
    --ps-primary-600-rgb: 108, 130, 85;
    --ps-primary-700-rgb: 85, 106, 65;
    --ps-primary-rgb: 134, 154, 109;
    --ps-secondary: #eba44d;
    --ps-secondary-rgb: 235, 164, 77;
    --ps-dark: #3b3235;
    --ps-dark-rgb: 59, 50, 53;
    --ps-muted: #777d77;
    --ps-muted-rgb: 119, 125, 119;
    --ps-border: #d9d9d9;
    --ps-border-rgb: 217, 217, 217;
    --ps-bg: #f8f9f8;
    --ps-bg-rgb: 248, 249, 248;
    --ps-surface: #efefef;
    --ps-surface-rgb: 239, 239, 239;
    --ps-surface-alt: #fcfcf8;
    --ps-surface-alt-rgb: 252, 252, 248;
    --ps-page-bg: #ece7de;
    --ps-page-bg-light: #f3f0e9;
    --ps-page-bg-dark: #ddd7cd;
    --ps-header-bg: #cac5bd;
    --ps-success: #778678;
    --ps-success-rgb: 119, 134, 120;
    --ps-warning: #f29146;
    --ps-warning-rgb: 242, 145, 70;
    --ps-error: #7b2821;
    --ps-error-rgb: 123, 40, 33;
}

body {
    margin: 0;
    background-color: var(--ps-bg);
    color: var(--ps-dark);
    font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

* {
    box-sizing: border-box;
}

.ps-page-bg {
    background-color: var(--ps-page-bg-light);
    background-image: linear-gradient(135deg, var(--ps-page-bg-light), var(--ps-page-bg-dark));
}

.ps-header-bg {
    background-color: var(--ps-header-bg);
}

input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration {
    -webkit-appearance: none;
}

.ps-search-filter::placeholder,
.ps-search-filter::-webkit-input-placeholder,
.ps-search-filter::-moz-placeholder,
.ps-search-filter:-ms-input-placeholder,
.ps-search-filter:-moz-placeholder {
    color: rgba(var(--ps-muted-rgb), 0.25) !important;
    opacity: 1;
}

.ps-search-filter:focus::placeholder,
.ps-search-filter:focus::-webkit-input-placeholder,
.ps-search-filter:focus::-moz-placeholder,
.ps-search-filter:focus:-ms-input-placeholder,
.ps-search-filter:focus:-moz-placeholder {
    color: transparent !important;
    opacity: 0;
}

.ps-nav-logo {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: rgb(var(--ps-primary-700-rgb));
    text-decoration: none;
}

.ps-nav-logo-badge {
    display: grid;
    place-items: center;
    height: 2.5rem;
    width: 2.5rem;
    border-radius: 9999px;
    background-color: var(--ps-primary-300);
    color: rgb(var(--ps-primary-700-rgb));
    border: 1px solid #1f2a18;
    box-shadow: none;
    font-weight: 800;
}

.ps-nav-logo-image {
    height: 2.5rem;
    width: auto;
    display: block;
}

.ps-nav-search {
    display: none;
    flex: 1;
    max-width: 40rem;
    margin: 0 1.5rem;
    align-items: center;
}

.ps-nav-search-inner {
    position: relative;
    width: 100%;
    border: 1px solid #ede9e4;
    border-radius: 14px;
    background-color: #ffffff;
}

.ps-nav-search-field {
    width: 100%;
    height: 2.5rem;
    border-radius: 14px !important;
    border: none;
    background-color: #ffffff;
    padding: 0.625rem 3.5rem 0.625rem 1rem;
    font-size: 0.875rem;
    color: rgb(var(--ps-dark-rgb));
}

.ps-nav-search-field:focus {
    outline: none;
    box-shadow: none;
}

.ps-nav-search-inner:focus-within {
    border-color: rgb(var(--ps-primary-300-rgb));
    box-shadow: 0 0 0 2px rgb(var(--ps-primary-100-rgb));
}

.ps-nav-search-button {
    position: absolute;
    right: 0.375rem;
    top: 50%;
    transform: translateY(-50%);
    border-radius: 9999px;
    border: none;
    background-color: var(--ps-primary-300);
    color: rgb(var(--ps-primary-700-rgb));
    padding: 0.5rem;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.ps-nav-search-field,
.ps-nav-search-button {
    -webkit-appearance: none;
    appearance: none;
}

.ps-nav-search-button:hover {
    background-color: var(--ps-primary-400);
}

.ps-nav-toggle {
    display: inline-flex;
    align-items: center;
    border-radius: 0.5rem;
    border: 1px solid var(--ps-border);
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: rgb(var(--ps-muted-rgb));
    transition: background-color 0.2s ease;
}

.ps-nav-toggle:hover {
    background-color: rgba(0, 0, 0, 0.05);
}

.ps-nav-menu {
    position: absolute;
    left: 0;
    right: 0;
    top: 72px;
    display: none;
    flex-direction: column;
    gap: 1rem;
    border-bottom: 1px solid var(--ps-border);
    background-color: var(--ps-header-bg);
    padding: 1.5rem 1rem;
}

.ps-nav-menu.is-open {
    display: flex;
}

.ps-nav-link {
    font-size: 0.875rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgb(var(--ps-muted-rgb));
    transition: color 0.2s ease;
    text-decoration: none;
}

.ps-nav-link:hover,
.ps-nav-link.active {
    color: rgb(var(--ps-primary-700-rgb));
}

.ps-nav-cta {
    border-radius: 9999px;
    border: 1px solid var(--ps-primary-400);
    background-color: var(--ps-primary-100);
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: rgb(var(--ps-primary-700-rgb));
    transition: background-color 0.2s ease;
    text-decoration: none;
}

.ps-nav-cta:hover {
    background-color: var(--ps-primary-200);
}

.ps-hero-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    border-radius: 9999px;
    border: 1px solid var(--ps-primary-200);
    background-color: var(--ps-primary-100);
    padding: 0.5rem 1rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: rgb(var(--ps-primary-700-rgb));
    box-shadow: 0 2px 6px rgba(55, 65, 81, 0.18);
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
    text-decoration: none;
}

.ps-hero-chip i {
    opacity: 0.6;
    transition: opacity 0.2s ease;
}

.ps-hero-chip:hover {
    border-color: var(--ps-primary-300);
    background-color: var(--ps-primary-200);
    color: rgb(var(--ps-primary-700-rgb));
}

.ps-hero-chip:hover i {
    opacity: 1;
}

@media (min-width: 1024px) {
    .ps-nav-search {
        display: flex;
    }

    .ps-nav-toggle {
        display: none;
    }

    .ps-nav-menu {
        position: static;
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 1rem;
        border: none;
        background-color: transparent;
        padding: 0;
    }
}

/* Reset browser fieldset outline that can appear around hero/headings */
fieldset {
    border: 0;
    margin: 0;
    padding: 0;
    min-width: 0;
}

.hero-title:focus,
.hero-title:focus-visible {
    outline: none;
    box-shadow: none;
}

/* Prevent auto-focus outlines on page titles when FocusOnNavigate targets h1. */
h1[tabindex="-1"]:focus,
h1[tabindex="-1"]:focus-visible {
    outline: none;
    box-shadow: none;
}

/* Neutral surfaces */
:is(.bg-slate-950, .bg-slate-950\/95) {
    background-color: rgb(var(--ps-bg-rgb) / var(--tw-bg-opacity, 1)) !important;
}

.bg-slate-950 { --tw-bg-opacity: 1 !important; }
.bg-slate-950\/95 { --tw-bg-opacity: 0.95 !important; }

:is(.bg-slate-950\/70, .bg-slate-950\/60, .bg-slate-950\/50, .bg-slate-950\/40) {
    background-color: rgb(var(--ps-bg-rgb) / var(--tw-bg-opacity, 1)) !important;
}

.bg-slate-950\/70 { --tw-bg-opacity: 0.7 !important; }
.bg-slate-950\/60 { --tw-bg-opacity: 0.6 !important; }
.bg-slate-950\/50 { --tw-bg-opacity: 0.9 !important; }
.bg-slate-950\/40 { --tw-bg-opacity: 0.8 !important; }

:is(.bg-slate-950\/70, .bg-slate-900\/70) {
    background-color: rgb(var(--ps-surface-rgb) / var(--tw-bg-opacity, 1)) !important;
}

:is(.bg-slate-950\/60, .bg-slate-900\/60, .bg-slate-900\/80) {
    background-color: rgb(var(--ps-surface-rgb) / var(--tw-bg-opacity, 1)) !important;
}

.bg-slate-900\/80 { --tw-bg-opacity: 0.8 !important; }
.bg-slate-900\/70 { --tw-bg-opacity: 0.92 !important; }
.bg-slate-900\/60 { --tw-bg-opacity: 0.85 !important; }

:is(.bg-slate-950\/50, .bg-slate-900\/50, .bg-slate-900\/40, .bg-slate-900\/30) {
    background-color: rgb(var(--ps-surface-rgb) / var(--tw-bg-opacity, 1)) !important;
}

.bg-slate-900\/50 { --tw-bg-opacity: 0.9 !important; }
.bg-slate-900\/40 { --tw-bg-opacity: 0.85 !important; }
.bg-slate-900\/30 { --tw-bg-opacity: 0.8 !important; }

.bg-slate-900,
.bg-slate-900\/95 {
    background-color: rgb(var(--ps-surface-rgb) / var(--tw-bg-opacity, 1)) !important;
}

.bg-slate-900 { --tw-bg-opacity: 1 !important; }
.bg-slate-900\/95 { --tw-bg-opacity: 0.95 !important; }

:is(.bg-slate-800, .bg-slate-800\/80, .bg-slate-800\/70, .bg-slate-800\/60, .bg-slate-800\/50, .bg-slate-700, .bg-slate-700\/60, .bg-slate-700\/40) {
    background-color: rgb(var(--ps-surface-rgb) / var(--tw-bg-opacity, 1)) !important;
}

.bg-slate-800 { --tw-bg-opacity: 0.92 !important; }
.bg-slate-800\/80 { --tw-bg-opacity: 0.8 !important; }
.bg-slate-800\/70 { --tw-bg-opacity: 0.7 !important; }
.bg-slate-800\/60 { --tw-bg-opacity: 0.6 !important; }
.bg-slate-800\/50 { --tw-bg-opacity: 0.5 !important; }
.bg-slate-700 { --tw-bg-opacity: 0.65 !important; }
.bg-slate-700\/60 { --tw-bg-opacity: 0.6 !important; }
.bg-slate-700\/40 { --tw-bg-opacity: 0.4 !important; }

.bg-slate-500\/10 {
    --tw-bg-opacity: 0.1 !important;
    background-color: rgb(var(--ps-border-rgb) / var(--tw-bg-opacity)) !important;
}

/* Neutral text */
:is(.text-white) {
    color: var(--ps-dark) !important;
}

:is(.text-slate-900, .text-slate-950, .text-slate-800, .text-slate-700, .text-slate-600, .text-slate-100) {
    --tw-text-opacity: 1 !important;
    color: rgb(var(--ps-dark-rgb) / var(--tw-text-opacity)) !important;
}

:is(.text-slate-500, .text-slate-400, .text-slate-300, .text-slate-200) {
    --tw-text-opacity: 1 !important;
    color: rgb(var(--ps-muted-rgb) / var(--tw-text-opacity)) !important;
}

/* Neutral borders */
:is(.border-slate-950, .border-slate-900, .border-slate-900\/80, .border-slate-800, .border-slate-800\/70, .border-slate-800\/60, .border-slate-700, .border-slate-700\/40, .border-slate-700\/60, .border-slate-700\/40, .border-slate-500, .border-slate-500\/60, .border-slate-300, .border-slate-200) {
    border-color: rgb(var(--ps-border-rgb) / var(--tw-border-opacity, 1)) !important;
}

.border-slate-700\/40 {
    --tw-border-opacity: 0.4 !important;
}

.border-slate-700\/60 {
    --tw-border-opacity: 0.6 !important;
}

.border-slate-500\/60 {
    --tw-border-opacity: 0.6 !important;
}

.border-slate-900\/80 {
    --tw-border-opacity: 0.8 !important;
}

/* Primary accent overrides (emerald -> sky blue) */
:is(.text-emerald-50\\/90, .text-emerald-100, .text-emerald-100\\/50) {
    color: rgb(var(--ps-primary-100-rgb) / var(--tw-text-opacity, 1)) !important;
}

.text-emerald-200 {
    color: rgb(var(--ps-primary-200-rgb) / var(--tw-text-opacity, 1)) !important;
}

.text-emerald-300 {
    color: rgb(var(--ps-primary-300-rgb) / var(--tw-text-opacity, 1)) !important;
}

:is(.text-emerald-400, .text-emerald-400\\/70) {
    color: rgb(var(--ps-primary-400-rgb) / var(--tw-text-opacity, 1)) !important;
}

.text-emerald-500 {
    color: rgb(var(--ps-primary-500-rgb) / var(--tw-text-opacity, 1)) !important;
}

.text-emerald-600 {
    color: rgb(var(--ps-primary-600-rgb) / var(--tw-text-opacity, 1)) !important;
}

.text-emerald-700 {
    color: rgb(var(--ps-primary-700-rgb) / var(--tw-text-opacity, 1)) !important;
}

:is(.bg-emerald-50, .bg-emerald-100) {
    --tw-bg-opacity: 1 !important;
    background-color: var(--ps-primary-100) !important;
}

.bg-emerald-200 {
    --tw-bg-opacity: 1 !important;
    background-color: var(--ps-primary-200) !important;
}

.bg-emerald-300 {
    --tw-bg-opacity: 1 !important;
    background-color: var(--ps-primary-300) !important;
}

.bg-emerald-400 {
    --tw-bg-opacity: 1 !important;
    background-color: var(--ps-primary-400) !important;
}

:is(.bg-emerald-400\/10, .bg-emerald-400\/20, .bg-emerald-400\/60, .bg-emerald-500\/5, .bg-emerald-500\/10, .bg-emerald-500\/20, .bg-emerald-500\/30, .bg-emerald-500\/50, .bg-emerald-500\/60, .bg-emerald-500\/70, .bg-emerald-900\/20, .bg-emerald-900\/30, .bg-emerald-800) {
    background-color: rgb(var(--ps-primary-rgb) / var(--tw-bg-opacity, 1)) !important;
}

.bg-emerald-500 {
    --tw-bg-opacity: 1 !important;
    background-color: var(--ps-primary-500) !important;
    color: #ffffff !important;
}

.bg-emerald-400 {
    --tw-bg-opacity: 1 !important;
    background-color: var(--ps-primary-400) !important;
}

.bg-emerald-600 {
    --tw-bg-opacity: 1 !important;
    background-color: var(--ps-primary-600) !important;
    color: #ffffff !important;
}

.bg-emerald-500\/5 { --tw-bg-opacity: 0.05 !important; }
.bg-emerald-400\/10 { --tw-bg-opacity: 0.1 !important; }
.bg-emerald-400\/20 { --tw-bg-opacity: 0.2 !important; }
.bg-emerald-400\/60 { --tw-bg-opacity: 0.6 !important; }
.bg-emerald-500\/10 { --tw-bg-opacity: 0.1 !important; }
.bg-emerald-500\/20 { --tw-bg-opacity: 0.2 !important; }
.bg-emerald-500\/30 { --tw-bg-opacity: 0.3 !important; }
.bg-emerald-500\/50 { --tw-bg-opacity: 0.5 !important; }
.bg-emerald-500\/60 { --tw-bg-opacity: 0.6 !important; }
.bg-emerald-500\/70 { --tw-bg-opacity: 0.7 !important; }
.bg-emerald-900\/20 { --tw-bg-opacity: 0.2 !important; }
.bg-emerald-900\/30 { --tw-bg-opacity: 0.3 !important; }
.bg-emerald-800 { --tw-bg-opacity: 1 !important; }

:is(.border-emerald-200, .border-emerald-200\/30, .border-emerald-200\/70, .border-emerald-300, .border-emerald-300\/40, .border-emerald-300\/60, .border-emerald-400, .border-emerald-400\/20, .border-emerald-400\/40, .border-emerald-400\/50, .border-emerald-400\/60, .border-emerald-400\/70, .border-emerald-500, .border-emerald-500\/20, .border-emerald-500\/30, .border-emerald-500\/40, .border-emerald-500\/50, .border-emerald-500\/60, .border-emerald-500\/70, .border-emerald-800\/50) {
    border-color: rgb(var(--ps-primary-rgb) / var(--tw-border-opacity, 1)) !important;
}

.border-emerald-200\/30 { --tw-border-opacity: 0.3 !important; }
.border-emerald-200\/70 { --tw-border-opacity: 0.7 !important; }
.border-emerald-300\/40 { --tw-border-opacity: 0.4 !important; }
.border-emerald-300\/60 { --tw-border-opacity: 0.6 !important; }
.border-emerald-400\/20 { --tw-border-opacity: 0.2 !important; }
.border-emerald-400\/40 { --tw-border-opacity: 0.4 !important; }
.border-emerald-400\/50 { --tw-border-opacity: 0.5 !important; }
.border-emerald-400\/60 { --tw-border-opacity: 0.6 !important; }
.border-emerald-400\/70 { --tw-border-opacity: 0.7 !important; }
.border-emerald-500\/20 { --tw-border-opacity: 0.2 !important; }
.border-emerald-500\/30 { --tw-border-opacity: 0.3 !important; }
.border-emerald-500\/40 { --tw-border-opacity: 0.4 !important; }
.border-emerald-500\/50 { --tw-border-opacity: 0.5 !important; }
.border-emerald-500\/60 { --tw-border-opacity: 0.6 !important; }
.border-emerald-500\/70 { --tw-border-opacity: 0.7 !important; }
.border-emerald-800\/50 { --tw-border-opacity: 0.5 !important; }

:is(.ring-emerald-400, .ring-emerald-400\/30, .focus\\:ring-emerald-400:focus, .focus\\:ring-emerald-400\\/30:focus, .focus\\:border-emerald-400:focus, .focus\\:border-emerald-500:focus) {
    --tw-ring-color: rgb(var(--ps-primary-rgb) / var(--tw-ring-opacity, 1)) !important;
    --tw-border-opacity: var(--tw-border-opacity, 1);
    border-color: rgb(var(--ps-primary-rgb) / var(--tw-border-opacity)) !important;
}

.ring-emerald-400\/30,
.focus\:ring-emerald-400\/30:focus {
    --tw-ring-opacity: 0.3 !important;
}

.focus\:ring-emerald-400:focus,
.ring-emerald-400 {
    --tw-ring-opacity: 1 !important;
}

:is(.ring-emerald-700, .ring-emerald-700\/60) {
    --tw-ring-color: rgb(var(--ps-primary-700-rgb) / var(--tw-ring-opacity, 1)) !important;
}

.ring-emerald-700\/60 { --tw-ring-opacity: 0.6 !important; }
.ring-emerald-700 { --tw-ring-opacity: 1 !important; }

:is(.shadow-emerald-500\/10, .shadow-emerald-900\/20, .shadow-emerald-500\/25, .shadow-emerald-900\/30) {
    --tw-shadow-color: rgb(var(--ps-primary-rgb) / var(--tw-shadow-opacity, 1)) !important;
}

.shadow-emerald-500\/10 { --tw-shadow-opacity: 0.1 !important; }
.shadow-emerald-500\/25 { --tw-shadow-opacity: 0.25 !important; }
.shadow-emerald-900\/20 { --tw-shadow-opacity: 0.2 !important; }
.shadow-emerald-900\/30 { --tw-shadow-opacity: 0.3 !important; }

/* Warning colors (amber -> warm amber) */
:is(.text-amber-300, .text-amber-400, .text-amber-500) {
    --tw-text-opacity: 1 !important;
    color: rgb(var(--ps-warning-rgb) / var(--tw-text-opacity)) !important;
}

:is(.bg-amber-400, .bg-amber-400\/10, .bg-amber-500, .bg-amber-500\/5, .bg-amber-500\/10) {
    background-color: rgb(var(--ps-warning-rgb) / var(--tw-bg-opacity, 1)) !important;
}

.bg-amber-400\/10 { --tw-bg-opacity: 0.1 !important; }
.bg-amber-500\/5 { --tw-bg-opacity: 0.05 !important; }
.bg-amber-500\/10 { --tw-bg-opacity: 0.1 !important; }

:is(.border-amber-300, .border-amber-300\/60, .border-amber-400\/30, .border-amber-500, .border-amber-500\/30, .border-amber-500\/60) {
    border-color: rgb(var(--ps-warning-rgb) / var(--tw-border-opacity, 1)) !important;
}

.border-amber-300\/60 { --tw-border-opacity: 0.6 !important; }
.border-amber-400\/30 { --tw-border-opacity: 0.3 !important; }
.border-amber-500\/30 { --tw-border-opacity: 0.3 !important; }
.border-amber-500\/60 { --tw-border-opacity: 0.6 !important; }

/* Error colors (rose -> deep oxblood) */
:is(.text-rose-100, .text-rose-200, .text-rose-300) {
    --tw-text-opacity: 1 !important;
    color: rgb(var(--ps-error-rgb) / var(--tw-text-opacity)) !important;
}

:is(.bg-rose-400\/50, .bg-rose-500, .bg-rose-500\/10, .bg-rose-500\/20, .bg-rose-950\/60) {
    background-color: rgb(var(--ps-error-rgb) / var(--tw-bg-opacity, 1)) !important;
}

.bg-rose-500\/10 { --tw-bg-opacity: 0.1 !important; }
.bg-rose-500\/20 { --tw-bg-opacity: 0.2 !important; }
.bg-rose-400\/50 { --tw-bg-opacity: 0.5 !important; }
.bg-rose-950\/60 { --tw-bg-opacity: 0.6 !important; }

:is(.border-rose-300, .border-rose-300\/40, .border-rose-300\/60, .border-rose-400\/60, .border-rose-500, .border-rose-500\/40, .border-rose-500\/50, .border-rose-500\/60) {
    border-color: rgb(var(--ps-error-rgb) / var(--tw-border-opacity, 1)) !important;
}

.border-rose-300\/40 { --tw-border-opacity: 0.4 !important; }
.border-rose-300\/60 { --tw-border-opacity: 0.6 !important; }
.border-rose-400\/60 { --tw-border-opacity: 0.6 !important; }
.border-rose-500\/40 { --tw-border-opacity: 0.4 !important; }
.border-rose-500\/50 { --tw-border-opacity: 0.5 !important; }
.border-rose-500\/60 { --tw-border-opacity: 0.6 !important; }

/* Success colors (green -> muted success) */
:is(.text-green-300, .text-emerald-200\\/70) {
    color: rgb(var(--ps-success-rgb) / var(--tw-text-opacity, 1)) !important;
}

:is(.bg-green-500\/10, .bg-emerald-500\/10.active\\:bg-green-500\\/10) {
    background-color: rgb(var(--ps-success-rgb) / var(--tw-bg-opacity, 0.1)) !important;
}

:is(.border-green-300, .border-green-500, .border-green-500\/10) {
    border-color: rgb(var(--ps-success-rgb) / var(--tw-border-opacity, 1)) !important;
}

.border-green-500\/10 { --tw-border-opacity: 0.1 !important; }

/* Secondary accent tokens for future use */
.bg-secondary,
.text-secondary,
.border-secondary {
    --tw-bg-opacity: var(--tw-bg-opacity, 1);
    --tw-text-opacity: var(--tw-text-opacity, 1);
    --tw-border-opacity: var(--tw-border-opacity, 1);
    background-color: rgb(var(--ps-secondary-rgb) / var(--tw-bg-opacity)) !important;
    color: rgb(var(--ps-secondary-rgb) / var(--tw-text-opacity)) !important;
    border-color: rgb(var(--ps-secondary-rgb) / var(--tw-border-opacity)) !important;
}

/* Gradient + shadow arbitrary classes */
.bg-\[radial-gradient\(45%_40%_at_50%_60%,rgba\(16,185,129,0\.12\),transparent\)\] {
    background-image: radial-gradient(45% 40% at 50% 60%, rgba(var(--ps-primary-rgb), 0.18), transparent) !important;
}

.bg-\[linear-gradient\(to_right,rgba\(15,23,42,0\.8\),rgba\(15,23,42,0\.4\)\),url\\('/images/hero-pattern\\.svg'\\)\] {
    background-image: linear-gradient(to right, rgba(var(--ps-primary-rgb), 0.32), rgba(var(--ps-primary-rgb), 0.12)), url('/images/hero-pattern.svg') !important;
}

.shadow-\[0_0_40px_rgba\(16,185,129,0\.25\)\] {
    --tw-shadow: 0 0 40px rgba(var(--ps-primary-rgb), 0.25) !important;
    --tw-shadow-colored: 0 0 40px rgba(var(--ps-primary-rgb), 0.25) !important;
    box-shadow: var(--tw-shadow) !important;
}

/* Skeleton loading */
.ps-skeleton {
    position: relative;
    overflow: hidden;
    background-color: #e6e1d8;
}

.ps-skeleton::after {
    content: "";
    position: absolute;
    inset: 0;
    transform: translateX(-100%);
    background-image: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.7), transparent);
    animation: ps-shimmer 1.4s ease-in-out infinite;
}

@keyframes ps-shimmer {
    100% {
        transform: translateX(100%);
    }
}

.ps-skeleton-media {
    height: 10rem;
    border-radius: 0.75rem;
}

.ps-skeleton-line {
    height: 0.85rem;
    border-radius: 9999px;
}

.ps-skeleton-line-sm {
    width: 70%;
}

.ps-skeleton-line-xs {
    width: 45%;
}

.ps-skeleton-pill {
    height: 1.3rem;
    width: 6rem;
    border-radius: 9999px;
}

.ps-skeleton-button {
    height: 1.3rem;
    width: 5rem;
    border-radius: 9999px;
}

.ps-skeleton-avatar {
    width: 3rem;
    height: 3rem;
    border-radius: 9999px;
}

.ps-spinner {
    width: 1rem;
    height: 1rem;
    border-radius: 9999px;
    border: 2px solid rgba(var(--ps-primary-rgb), 0.25);
    border-top-color: rgb(var(--ps-primary-600-rgb));
    animation: ps-spin 0.8s linear infinite;
}

@keyframes ps-spin {
    to {
        transform: rotate(360deg);
    }
}


.ps-sticky-header {
    position: sticky;
    top: 0;
    z-index: 40;
    background-color: #0f172a !important;
    color: #f8fafc !important;
    box-shadow: inset 0 -1px 0 #1f2937;
}