:root {
    --brand-primary: #145f4d;
    --brand-primary-dark: #0e493b;
    --public-page-background:
        radial-gradient(ellipse at 72% 12%, rgba(122, 181, 199, 0.22), transparent 34%),
        radial-gradient(ellipse at 18% 18%, rgba(237, 111, 31, 0.1), transparent 28%),
        repeating-radial-gradient(circle at 18% 22%, rgba(99, 78, 49, 0.055) 0 1px, transparent 1px 26px),
        repeating-radial-gradient(circle at 76% 46%, rgba(99, 78, 49, 0.045) 0 1px, transparent 1px 30px),
        linear-gradient(180deg, #fffaf1, #f8f0e2);
    --public-page-background-color: #f8f0e2;
    --play-page-background:
        radial-gradient(ellipse at 72% 10%, rgba(35, 91, 101, 0.36), transparent 36%),
        radial-gradient(ellipse at 18% 18%, rgba(160, 84, 42, 0.22), transparent 30%),
        radial-gradient(ellipse at 52% 82%, rgba(20, 95, 77, 0.16), transparent 38%),
        repeating-radial-gradient(circle at 18% 22%, rgba(67, 51, 31, 0.075) 0 1px, transparent 1px 26px),
        repeating-radial-gradient(circle at 76% 46%, rgba(67, 51, 31, 0.065) 0 1px, transparent 1px 30px),
        linear-gradient(180deg, #54746a, #24483f);
    --play-page-background-color: #24483f;
    --button-primary-bg: linear-gradient(180deg, var(--brand-primary), var(--brand-primary-dark));
    --button-primary-hover-bg: linear-gradient(180deg, var(--brand-primary-dark), #0b3f34);
    --button-primary-color: #fffaf5;
    --button-primary-border: rgba(255, 255, 255, 0.34);
    --button-primary-shadow: 0 14px 24px rgba(21, 75, 64, 0.18);
    --button-primary-shadow-strong: 0 14px 30px rgba(21, 75, 64, 0.2);
    --button-hover-transform: translateY(-1px);
    --button-secondary-bg: #edf7f6;
    --button-secondary-hover-bg: rgba(240, 253, 250, 0.86);
    --button-secondary-border: rgba(29, 98, 83, 0.16);
    --button-secondary-hover-border: rgba(29, 98, 83, 0.28);
    --button-secondary-hover-shadow: inset 0 0 0 1px rgba(29, 98, 83, 0.18);
    --button-secondary-color: var(--brand-primary-dark);
    --button-danger-bg: linear-gradient(180deg, #974c3c, #7c3e32);
    --button-danger-hover-bg: linear-gradient(180deg, #8a4436, #663227);
    --button-danger-color: #fffaf4;
    --button-danger-shadow: 0 12px 24px rgba(124, 62, 50, 0.18);
    --button-danger-shadow-strong: 0 14px 28px rgba(124, 62, 50, 0.22);
    --surface-card-bg: rgba(255, 250, 244, 0.94);
    --surface-card-border: rgba(255, 255, 255, 0.32);
    --surface-card-shadow: 0 16px 32px rgba(43, 31, 17, 0.1);
    --surface-primary-bg:
        linear-gradient(180deg, rgba(255, 252, 247, 0.98), rgba(244, 236, 226, 0.96)),
        var(--surface-card-bg);
    --surface-primary-shadow: 0 28px 54px rgba(43, 31, 17, 0.16);
    --surface-content-bg:
        linear-gradient(180deg, rgba(255, 252, 246, 0.9), rgba(250, 241, 226, 0.78)),
        rgba(255, 252, 246, 0.82);
    --surface-content-border: rgba(105, 82, 50, 0.14);
    --surface-content-shadow: 0 14px 26px rgba(43, 31, 17, 0.07);
    --surface-elevated-bg:
        linear-gradient(180deg, rgba(255, 252, 246, 0.9), rgba(250, 241, 226, 0.82)),
        rgba(255, 252, 246, 0.84);
    --surface-elevated-shadow: 0 18px 34px rgba(43, 31, 17, 0.1);
    --surface-table-heading-bg: rgba(20, 95, 77, 0.08);
    --surface-table-row-alt-bg: rgba(255, 255, 255, 0.42);
    --surface-mobile-row-bg: linear-gradient(180deg, rgba(235, 251, 243, 0.98), rgba(255, 255, 255, 0.92));
    --surface-mobile-row-border: rgba(20, 38, 61, 0.08);
    --surface-mobile-row-shadow: 0 18px 34px rgba(20, 38, 61, 0.08);
    --mobile-menu-overlay-bg: rgba(8, 10, 11, 0.28);
    --mobile-menu-panel-bg: rgba(9, 9, 10, 0.96);
    --mobile-menu-panel-color: #fff8f2;
    --mobile-menu-muted-bg: rgba(255, 255, 255, 0.08);
}