/* ==========================================================================
   Exolynk Design System — Color Tokens
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Primary — Brand Teal
   -------------------------------------------------------------------------- */
:root {
    --primary-50: #eef5f6;
    --primary-100: #d5e6e8;
    --primary-200: #aaccd0;
    --primary-300: #7fb3b8;
    --primary-400: #5499a0;
    --primary-500: #3a7a80;
    --primary-600: #2e6569;
    --primary-700: #255459;
    --primary-800: #1d4347;
    --primary-900: #153235;
    --primary-950: #0d2123;

    /* --------------------------------------------------------------------------
   2. Secondary — Twilight Stroll
   -------------------------------------------------------------------------- */
    --secondary-50: #f3f6f6;
    --secondary-100: #e2e8e9;
    --secondary-200: #c5d1d2;
    --secondary-300: #a3b4b6;
    --secondary-400: #8a9fa1;
    --secondary-500: #728a8c;
    --secondary-600: #5e7274;
    --secondary-700: #4d5d5f;
    --secondary-800: #3f4c4d;
    --secondary-900: #333e3f;
    --secondary-950: #242c2d;

    /* --------------------------------------------------------------------------
   3. Accent — Handmade Red
   -------------------------------------------------------------------------- */
    --accent-50: #faf5f5;
    --accent-100: #f2e4e4;
    --accent-200: #e5c9c9;
    --accent-300: #d4a8a8;
    --accent-400: #c08888;
    --accent-500: #a67676;
    --accent-600: #8e5f5f;
    --accent-700: #744d4d;
    --accent-800: #5c3e3e;
    --accent-900: #463030;
    --accent-950: #2e1f1f;

    /* --------------------------------------------------------------------------
   4. Neutral — Teal-tinted Grays
   -------------------------------------------------------------------------- */
    --neutral-50: #f5f7f7;
    --neutral-100: #e8ecec;
    --neutral-200: #d1d9da;
    --neutral-300: #b8c4c5;
    --neutral-400: #96a7a9;
    --neutral-500: #728a8c;
    --neutral-600: #5c7173;
    --neutral-700: #4a5b5d;
    --neutral-800: #3a4849;
    --neutral-900: #2c3637;
    --neutral-950: #1f2a2b;

    /* --------------------------------------------------------------------------
   5. Semantic — Success (Green)
   -------------------------------------------------------------------------- */
    --success-50: #f0f7f4;
    --success-100: #d9ede4;
    --success-200: #b3dbc9;
    --success-300: #86c5aa;
    --success-400: #5faa8a;
    --success-500: #438f70;
    --success-600: #35735a;
    --success-700: #2c5d49;
    --success-800: #244a3b;
    --success-900: #1d3a2f;
    --success-950: #122620;

    /* --------------------------------------------------------------------------
   6. Semantic — Warning (Amber)
   -------------------------------------------------------------------------- */
    --warning-50: #fdf8f0;
    --warning-100: #f9edd8;
    --warning-200: #f2d9b0;
    --warning-300: #e9c083;
    --warning-400: #dea55a;
    --warning-500: #d18d3a;
    --warning-600: #b4742e;
    --warning-700: #935d27;
    --warning-800: #764a21;
    --warning-900: #5c3a1b;
    --warning-950: #3d2612;

    /* --------------------------------------------------------------------------
   7. Semantic — Error / Danger (distinct from Accent)
   -------------------------------------------------------------------------- */
    --error-50: #fdf2f2;
    --error-100: #fbe1e1;
    --error-200: #f5c4c4;
    --error-300: #eda0a0;
    --error-400: #e17a7a;
    --error-500: #c45c5c;
    --error-600: #a94a4a;
    --error-700: #8b3c3c;
    --error-800: #6e3030;
    --error-900: #562727;
    --error-950: #381919;

    /* --------------------------------------------------------------------------
   8. Semantic — Info (Blue)
   -------------------------------------------------------------------------- */
    --info-50: #f0f4f8;
    --info-100: #d9e3ee;
    --info-200: #b3c7dd;
    --info-300: #86a7c8;
    --info-400: #6089b0;
    --info-500: #476f96;
    --info-600: #385a7a;
    --info-700: #2e4963;
    --info-800: #253b4f;
    --info-900: #1d2e3d;
    --info-950: #131f29;

    /* ==========================================================================
   Chart-Ready Extension Palettes
   12 additional hue families curated to fit the brand's coastal, muted
   tonality. Each family is a full 50–950 scale so charts can pick the
   weight that best fits their context. The "chart-recommended" weight
   per family is marked in the Full Palette section of the brand guide.
   ========================================================================== */

    /* 9.1. Lagoon — vibrant coastal teal-cyan */
    --lagoon-50: #ecf5f6;
    --lagoon-100: #cfe8ea;
    --lagoon-200: #a3d2d5;
    --lagoon-300: #75b8bd;
    --lagoon-400: #4f9ea4;
    --lagoon-500: #3a8388;
    --lagoon-600: #2e6c70;
    --lagoon-700: #275659;
    --lagoon-800: #204447;
    --lagoon-900: #193436;
    --lagoon-950: #0e2425;

    /* 9.2. Algae — deep marine green */
    --algae-50: #ecf6f0;
    --algae-100: #cfeadc;
    --algae-200: #a3d3b8;
    --algae-300: #74b793;
    --algae-400: #519c75;
    --algae-500: #3e845e;
    --algae-600: #316c4c;
    --algae-700: #29583e;
    --algae-800: #224532;
    --algae-900: #1c3726;
    --algae-950: #102418;

    /* 9.3. Lichen — yellow-green sage */
    --lichen-50: #f4f7e7;
    --lichen-100: #e8edcd;
    --lichen-200: #d2d8a0;
    --lichen-300: #babf72;
    --lichen-400: #a3a951;
    --lichen-500: #8c9343;
    --lichen-600: #717636;
    --lichen-700: #5b612e;
    --lichen-800: #484d24;
    --lichen-900: #3a401e;
    --lichen-950: #262b14;

    /* 9.4. Olive — earthy olive-brown green */
    --olive-50: #f6f4e2;
    --olive-100: #ece6c0;
    --olive-200: #d8cf8d;
    --olive-300: #beb45b;
    --olive-400: #a59c41;
    --olive-500: #8b822f;
    --olive-600: #716826;
    --olive-700: #5a541f;
    --olive-800: #47431a;
    --olive-900: #393614;
    --olive-950: #26230c;

    /* 9.5. Honey — warm amber gold */
    --honey-50: #fcf3e0;
    --honey-100: #f6e3b2;
    --honey-200: #ecca74;
    --honey-300: #ddae3d;
    --honey-400: #c89522;
    --honey-500: #a87c1a;
    --honey-600: #8a651b;
    --honey-700: #6f5217;
    --honey-800: #594113;
    --honey-900: #463310;
    --honey-950: #2e1f08;

    /* 9.6. Copper — rust orange-brown */
    --copper-50: #fceadf;
    --copper-100: #f5d2b8;
    --copper-200: #ebab7d;
    --copper-300: #df8351;
    --copper-400: #cf662c;
    --copper-500: #b3501e;
    --copper-600: #92421b;
    --copper-700: #783817;
    --copper-800: #5e2c14;
    --copper-900: #4b2410;
    --copper-950: #311708;

    /* 9.7. Coral — muted pink-coral */
    --coral-50: #fbede8;
    --coral-100: #f4d3ca;
    --coral-200: #e8a796;
    --coral-300: #d97e6b;
    --coral-400: #c95f4a;
    --coral-500: #ae4937;
    --coral-600: #8e3c2d;
    --coral-700: #743225;
    --coral-800: #5a271d;
    --coral-900: #481f17;
    --coral-950: #30130d;

    /* 9.8. Plum — dusty wine purple */
    --plum-50: #f5ebee;
    --plum-100: #e8cdd5;
    --plum-200: #d3a3b0;
    --plum-300: #ba7a8e;
    --plum-400: #9e556f;
    --plum-500: #844158;
    --plum-600: #6b3548;
    --plum-700: #582d3b;
    --plum-800: #45232f;
    --plum-900: #381d25;
    --plum-950: #251218;

    /* 9.9. Mauve — dusty mauve-pink */
    --mauve-50: #f3edf1;
    --mauve-100: #e2d2dc;
    --mauve-200: #c7a8b8;
    --mauve-300: #ac8497;
    --mauve-400: #91637c;
    --mauve-500: #794d65;
    --mauve-600: #634051;
    --mauve-700: #503343;
    --mauve-800: #402a35;
    --mauve-900: #34212b;
    --mauve-950: #22161d;

    /* 9.10. Indigo — deep blue-violet */
    --indigo-50: #ecedf5;
    --indigo-100: #d0d3e8;
    --indigo-200: #a4a9d0;
    --indigo-300: #767db8;
    --indigo-400: #5760a0;
    --indigo-500: #454c87;
    --indigo-600: #393f6f;
    --indigo-700: #30355a;
    --indigo-800: #262b47;
    --indigo-900: #1e213a;
    --indigo-950: #131625;

    /* 9.11. Slate — cool blue-gray */
    --slate-50: #eef1f4;
    --slate-100: #d6dde2;
    --slate-200: #aab8c1;
    --slate-300: #82929e;
    --slate-400: #61727e;
    --slate-500: #4c5b65;
    --slate-600: #3e4a53;
    --slate-700: #343d44;
    --slate-800: #2a3036;
    --slate-900: #21262b;
    --slate-950: #14181c;

    /* 9.12. Anchor — deep cool charcoal */
    --anchor-50: #ecedf0;
    --anchor-100: #d4d6dc;
    --anchor-200: #a8acb6;
    --anchor-300: #7c8390;
    --anchor-400: #585e6c;
    --anchor-500: #444a55;
    --anchor-600: #373c46;
    --anchor-700: #2c3138;
    --anchor-800: #21252a;
    --anchor-900: #1c1f23;
    --anchor-950: #0f1114;

    /* --------------------------------------------------------------------------
   9. Surface & Background Tokens
   -------------------------------------------------------------------------- */
    --surface-primary: #ffffff;
    --surface-secondary: #f5f7f7;
    --surface-tertiary: #e8ecec;
    --surface-elevated: #ffffff;
    --surface-overlay: rgba(31, 42, 43, 0.5);
    --surface-inverse: #1f2a2b;

    /* --------------------------------------------------------------------------
   10. App / Semantic Aliases
   -------------------------------------------------------------------------- */
    --app-bg: var(--neutral-50);
    --app-text: var(--neutral-950);
    --app-text-secondary: var(--secondary-500);
    --app-text-muted: var(--neutral-400);
    --app-border: var(--neutral-200);
    --app-border-strong: var(--neutral-300);
    --app-divider: var(--neutral-100);

    --app-link: var(--primary-600);
    --app-link-hover: var(--primary-700);
    --app-focus-ring: var(--primary-300);

    --app-btn-primary-bg: var(--primary-700);
    --app-btn-primary-hover: var(--primary-600);
    --app-btn-primary-text: #ffffff;

    --app-btn-secondary-bg: var(--neutral-100);
    --app-btn-secondary-hover: var(--neutral-200);
    --app-btn-secondary-text: var(--neutral-900);

    --app-btn-danger-bg: var(--error-500);
    --app-btn-danger-hover: var(--error-600);
    --app-btn-danger-text: #ffffff;

    --app-input-bg: #ffffff;
    --app-input-border: var(--neutral-300);
    --app-input-focus: var(--primary-500);
    --app-input-placeholder: var(--neutral-400);

    --app-card-bg: #ffffff;
    --app-card-border: var(--neutral-200);
    --app-card-shadow: 0 4px 12px rgba(31, 42, 43, 0.08);

    --app-sidebar-bg: var(--primary-900);
    --app-sidebar-text: var(--primary-100);
    --app-sidebar-active: var(--primary-700);

    --app-topbar-bg: #ffffff;
    --app-topbar-border: var(--neutral-200);

    --app-badge-default-bg: var(--neutral-100);
    --app-badge-default-text: var(--neutral-700);
    --app-badge-primary-bg: var(--primary-100);
    --app-badge-primary-text: var(--primary-800);
    --app-badge-accent-bg: var(--accent-100);
    --app-badge-accent-text: var(--accent-800);
    --app-badge-success-bg: var(--success-100);
    --app-badge-success-text: var(--success-800);
    --app-badge-warning-bg: var(--warning-100);
    --app-badge-warning-text: var(--warning-800);
    --app-badge-error-bg: var(--error-100);
    --app-badge-error-text: var(--error-800);
    --app-badge-info-bg: var(--info-100);
    --app-badge-info-text: var(--info-800);

    /* --------------------------------------------------------------------------
   11. Data Visualization — Chart Palette (12 colors)
   -------------------------------------------------------------------------- */

    /* Chart series — each color references the chart-recommended (◆)
       weight of its dedicated extension family. Reorder or shift weights
       here without touching the family scales. */
    --chart-1: var(--lagoon-500); /* Lagoon  */
    --chart-2: var(--algae-500); /* Algae   */
    --chart-3: var(--lichen-500); /* Lichen  */
    --chart-4: var(--olive-500); /* Olive   */
    --chart-5: var(--honey-400); /* Honey   */
    --chart-6: var(--copper-400); /* Copper  */
    --chart-7: var(--coral-400); /* Coral   */
    --chart-8: var(--plum-500); /* Plum    */
    --chart-9: var(--mauve-500); /* Mauve   */
    --chart-10: var(--indigo-500); /* Indigo  */
    --chart-11: var(--slate-500); /* Slate   */
    --chart-12: var(--anchor-700); /* Anchor  */

    /* Area-fill light variants — pale tints from each family */
    --chart-1-light: var(--lagoon-100);
    --chart-2-light: var(--algae-100);
    --chart-3-light: var(--lichen-100);
    --chart-4-light: var(--olive-100);
    --chart-5-light: var(--honey-100);
    --chart-6-light: var(--copper-100);
    --chart-7-light: var(--coral-100);
    --chart-8-light: var(--plum-100);
    --chart-9-light: var(--mauve-100);
    --chart-10-light: var(--indigo-100);
    --chart-11-light: var(--slate-100);
    --chart-12-light: var(--anchor-100);
    /* --------------------------------------------------------------------------
   12. Typography
   -------------------------------------------------------------------------- */
    font-family: "Instrument Sans", "Helvetica Neue", Arial, sans-serif;
    color: var(--app-text);
    background-color: var(--app-bg);
}

/* ==========================================================================
   Dark Mode Overrides
   ========================================================================== */
[data-theme="dark"] {
    /* Surfaces */
    --surface-primary: var(--neutral-900);
    --surface-secondary: var(--neutral-950);
    --surface-tertiary: var(--neutral-800);
    --surface-elevated: var(--neutral-800);
    --surface-overlay: rgba(0, 0, 0, 0.6);
    --surface-inverse: var(--neutral-50);

    /* App aliases */
    --app-bg: var(--neutral-950);
    --app-text: var(--neutral-50);
    --app-text-secondary: var(--neutral-400);
    --app-text-muted: var(--neutral-600);
    --app-border: var(--neutral-700);
    --app-border-strong: var(--neutral-600);
    --app-divider: var(--neutral-800);

    --app-link: var(--primary-300);
    --app-link-hover: var(--primary-200);
    --app-focus-ring: var(--primary-500);

    --app-btn-primary-bg: var(--primary-500);
    --app-btn-primary-hover: var(--primary-400);
    --app-btn-primary-text: #ffffff;

    --app-btn-secondary-bg: var(--neutral-800);
    --app-btn-secondary-hover: var(--neutral-700);
    --app-btn-secondary-text: var(--neutral-100);

    --app-btn-danger-bg: var(--error-500);
    --app-btn-danger-hover: var(--error-400);
    --app-btn-danger-text: #ffffff;

    --app-input-bg: var(--neutral-800);
    --app-input-border: var(--neutral-600);
    --app-input-focus: var(--primary-400);
    --app-input-placeholder: var(--neutral-500);

    --app-card-bg: var(--neutral-900);
    --app-card-border: var(--neutral-700);
    --app-card-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);

    --app-sidebar-bg: var(--neutral-950);
    --app-sidebar-text: var(--neutral-300);
    --app-sidebar-active: var(--primary-600);

    --app-topbar-bg: var(--neutral-900);
    --app-topbar-border: var(--neutral-700);

    --app-badge-default-bg: var(--neutral-800);
    --app-badge-default-text: var(--neutral-200);
    --app-badge-primary-bg: var(--primary-900);
    --app-badge-primary-text: var(--primary-200);
    --app-badge-accent-bg: var(--accent-900);
    --app-badge-accent-text: var(--accent-200);
    --app-badge-success-bg: var(--success-900);
    --app-badge-success-text: var(--success-200);
    --app-badge-warning-bg: var(--warning-900);
    --app-badge-warning-text: var(--warning-200);
    --app-badge-error-bg: var(--error-900);
    --app-badge-error-text: var(--error-200);
    --app-badge-info-bg: var(--info-900);
    --app-badge-info-text: var(--info-200);

    /* Chart light variants — darker for dark mode */
    /* Dark-mode area-fill tints — deep family-900 weights so fills stay
       perceptible against the dark surface without overpowering the chart. */
    --chart-1-light: var(--lagoon-900);
    --chart-2-light: var(--algae-900);
    --chart-3-light: var(--lichen-900);
    --chart-4-light: var(--olive-900);
    --chart-5-light: var(--honey-900);
    --chart-6-light: var(--copper-900);
    --chart-7-light: var(--coral-900);
    --chart-8-light: var(--plum-900);
    --chart-9-light: var(--mauve-900);
    --chart-10-light: var(--indigo-900);
    --chart-11-light: var(--slate-900);
    --chart-12-light: var(--anchor-900);
}

/* ==========================================================================
   Birei Component Library — Token Bridge
   Maps birei component vars to Exolynk design tokens so
   the component library automatically inherits the brand palette.
   ========================================================================== */
:root {
    --birei-font-family-base: "Instrument Sans", sans-serif;

    --birei-color-neutral-0: var(--surface-primary);
    --birei-color-neutral-50: var(--neutral-50);
    --birei-color-neutral-100: var(--neutral-100);
    --birei-color-neutral-300: var(--neutral-200);
    --birei-color-neutral-800: var(--secondary-500);
    --birei-color-neutral-900: var(--primary-700);
    --birei-color-text-base: var(--app-text);

    --birei-color-brand-primary: var(--primary-700);
    --birei-color-brand-secondary: var(--secondary-500);
    --birei-color-brand-muted: var(--neutral-300);
    --birei-color-brand-accent: var(--accent-500);

    --birei-color-focus-ring: rgba(37, 84, 89, 0.3);
    --birei-shadow-strong: 0 0.75rem 1.5rem rgba(37, 84, 89, 0.18);
    --birei-shadow-soft: 0 0.75rem 1.5rem rgba(37, 84, 89, 0.1);

    --birei-radius-sm: 0.2rem;
    --birei-radius-md: 0.25rem;
    --birei-radius-lg: 0.25rem;
    --birei-radius-xl: 0.3rem;
    --birei-radius-pill: 999px;

    /* Aliases used by the Birei input component (mirrors dist/birei.css) */
    --birei-radius-small: 0.125rem;
    --birei-radius-base: 0.25rem;
    --birei-radius-large: 0.3rem;

    /* Input / form-control tokens */
    --birei-color-canvas-light: #ffffff;
    --birei-color-disabled-surface: var(--primary-50);
    --birei-color-disabled-text: var(--secondary-500);
    --birei-color-font-base: var(--neutral-950);
    --birei-color-font-placeholder: color-mix(in srgb, var(--birei-color-font-base) 48%, transparent);
    --birei-color-primary-base: var(--primary-700);
    --birei-color-secondary-base: var(--secondary-500);
    --birei-color-error-base: var(--error-500);
    --birei-color-border-subtle: color-mix(in srgb, var(--birei-color-primary-base) 12%, transparent);
    --birei-color-border-default: color-mix(in srgb, var(--birei-color-primary-base) 18%, transparent);
    --birei-color-border-strong: color-mix(in srgb, var(--birei-color-primary-base) 28%, transparent);

    /* Button — Primary */
    --birei-button-primary-bg: var(--primary-700);
    --birei-button-primary-bg-hover: var(--primary-600);
    --birei-button-primary-bg-active: var(--primary-800);
    --birei-button-primary-border: var(--primary-700);
    --birei-button-primary-color: #ffffff;
    --birei-button-primary-ripple: rgba(255, 255, 255, 0.28);

    /* Button — Secondary */
    --birei-button-secondary-bg: var(--surface-primary);
    --birei-button-secondary-bg-hover: var(--neutral-100);
    --birei-button-secondary-bg-active: var(--neutral-200);
    --birei-button-secondary-border: var(--secondary-500);
    --birei-button-secondary-color: var(--primary-700);
    --birei-button-secondary-ripple: rgba(37, 84, 89, 0.24);

    /* Button — Transparent */
    --birei-button-transparent-bg: transparent;
    --birei-button-transparent-bg-hover: transparent;
    --birei-button-transparent-bg-active: transparent;
    --birei-button-transparent-border: transparent;
    --birei-button-transparent-color: var(--app-text);
    --birei-button-transparent-color-hover: var(--primary-700);
    --birei-button-transparent-color-active: var(--primary-700);
    --birei-button-transparent-color-flash: var(--secondary-500);
    --birei-button-transparent-text-shadow-idle: none;
    --birei-button-transparent-text-shadow-hover: 0 0 0.65rem
        rgba(37, 84, 89, 0.28);

    /* Button — Danger */
    --birei-button-danger-bg: var(--error-500);
    --birei-button-danger-bg-hover: var(--error-400);
    --birei-button-danger-bg-active: var(--error-600);
    --birei-button-danger-border: var(--error-500);
    --birei-button-danger-color: #ffffff;
    --birei-button-danger-ripple: rgba(255, 255, 255, 0.28);
}

[data-theme="dark"] {
    --birei-color-neutral-0: var(--neutral-900);
    --birei-color-neutral-50: var(--neutral-900);
    --birei-color-neutral-100: var(--neutral-800);
    --birei-color-neutral-300: var(--neutral-700);
    --birei-color-neutral-800: var(--neutral-400);
    --birei-color-neutral-900: var(--primary-300);
    --birei-color-text-base: var(--neutral-50);

    --birei-color-focus-ring: rgba(122, 179, 184, 0.4);
    --birei-shadow-strong: 0 0.75rem 1.5rem rgba(0, 0, 0, 0.4);

    --birei-button-primary-bg: var(--primary-500);
    --birei-button-primary-bg-hover: var(--primary-400);
    --birei-button-primary-bg-active: var(--primary-600);
    --birei-button-primary-border: var(--primary-500);

    --birei-button-secondary-bg: var(--neutral-800);
    --birei-button-secondary-bg-hover: var(--neutral-700);
    --birei-button-secondary-bg-active: var(--neutral-600);
    --birei-button-secondary-border: var(--neutral-500);
    --birei-button-secondary-color: var(--primary-200);

    --birei-button-transparent-color: var(--neutral-200);
    --birei-button-transparent-color-hover: var(--primary-300);
    --birei-button-transparent-color-active: var(--primary-300);
    --birei-button-transparent-color-flash: var(--neutral-400);
    --birei-button-transparent-text-shadow-hover: 0 0 0.65rem
        rgba(122, 179, 184, 0.3);

    --birei-button-danger-bg: var(--error-500);
    --birei-button-danger-bg-hover: var(--error-400);
    --birei-button-danger-bg-active: var(--error-600);
}

/* ==========================================================================
   Utility Classes — Text Colors
   ========================================================================== */
.color-primary {
    color: var(--primary-700);
}
.color-secondary {
    color: var(--secondary-500);
}
.color-accent {
    color: var(--accent-500);
}
.color-success {
    color: var(--success-500);
}
.color-warning {
    color: var(--warning-500);
}
.color-error {
    color: var(--error-500);
}
.color-info {
    color: var(--info-500);
}

/* ==========================================================================
   Utility Classes — Background Colors
   ========================================================================== */
.bg-primary {
    background-color: var(--primary-700);
}
.bg-secondary {
    background-color: var(--secondary-500);
}
.bg-accent {
    background-color: var(--accent-500);
}
.bg-success {
    background-color: var(--success-500);
}
.bg-warning {
    background-color: var(--warning-500);
}
.bg-error {
    background-color: var(--error-500);
}
.bg-info {
    background-color: var(--info-500);
}

/* ==========================================================================
   Website-specific colors
   --------------------------------------------------------------------------
   Overrides for the marketing website (not the app). The app's default page
   canvas is the tinted --neutral-50; the marketing site uses pure white so
   that hero gradients (e.g. `from-primary-100 ... to-white`) blend
   seamlessly into the rest of the page.
   ========================================================================== */
:root {
    --website-page-bg: #ffffff;
    --app-bg: var(--website-page-bg);
}