:root {

    /* surfaces */
    --root-bg: #f8f8f8;
    --root-panel-bg: #ffffff;
    --root-panel-bg-alt: #eef2f4;
    --root-selected-bg: #dbe7ec;
    /* p-table checked rows + soft hover fill (bulk-action buttons, select control) */
    --root-checked-bg: #e2edf6;
    --root-hover-bg: rgba(72, 126, 153, 0.10);
    --root-border: #d5dde1;

    /* text */
    --root-text: #212529;
    --root-text-dim: #5b6b73;

    /* accent - teal */
    --root-accent: #487e99;
    --root-accent-hover: #3a6a83;
    --root-accent-text: #ffffff;
    /* accent for small text on tinted fills (active nav item) - darker where needed for contrast */
    --root-accent-strong: var(--root-accent);

    /* header band (deeper teal, matches front_example) */
    --root-header-bg: #487e99;
    --root-header-text: #ffffff;
    --root-header-border: transparent;
    /* soft drop shadow for floating windows */
    --root-shadow: 0 12px 32px rgba(0, 0, 0, 0.18);

    /* status semantics */
    --root-success: #618763;
    --root-success-bg: rgba(97, 135, 99, 0.14);
    --root-danger: #ff5252;
    --root-danger-hover: #ff7676;
    --root-danger-bg: rgba(255, 82, 82, 0.14);
    --root-warning: #e0a800;
    --root-warning-text: #3a2f00;
    --root-neutral: #8a9aa0;

    /* informational fills: DEMO cards, built-in page rows, notices */
    --root-info-bg: #e8f2fb;
    --root-info-border: #8fb8dc;

    /* p-toast: an inverted surface so it stands out from the page */
    --root-toast-bg: #212529;
    --root-toast-text: #f8f8f8;
    --root-toast-link: #9cc7dc;

    --root-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --root-font-heading: var(--root-font);

}

/* ---- Owner admin theme: LIGHT "Ivory & Ink" (Settings → Admin) ----
   The light counterpart of DARK GREEN and of the shop's WHITE_SPACE theme: warm ivory paper, deep ink
   text, antique-bronze accent, warm hairlines and serif headings - an editorial look rather than a
   stock admin template. Scoped to the owner layout's data-admin-theme so the public docs page and the
   login pages (same styles.css, no attribute) keep the base tokens above. */
:root[data-admin-theme="light"] {

    --root-bg: #f6f3ec;
    --root-panel-bg: #fffdf8;
    --root-panel-bg-alt: #f1ece2;
    --root-selected-bg: #ece3d1;
    --root-checked-bg: #dde6f1;   /* soft ink-blue: never confused with the warm row tones */
    --root-hover-bg: rgba(138, 106, 43, 0.10);
    --root-border: rgba(27, 35, 51, 0.12);

    --root-text: #1b2333;
    --root-text-dim: #6b6658;

    --root-accent: #8a6a2b;
    --root-accent-hover: #74581f;
    --root-accent-text: #ffffff;
    --root-accent-strong: #74581f;

    --root-header-bg: #fffdf8;
    --root-header-text: #1b2333;
    --root-header-border: rgba(138, 106, 43, 0.35);

    --root-success: #4f7a5a;
    --root-success-bg: rgba(79, 122, 90, 0.12);
    --root-danger: #b4473c;
    --root-danger-hover: #9c3b31;
    --root-danger-bg: rgba(180, 71, 60, 0.12);
    --root-warning: #b7862a;
    --root-warning-text: #3a2a00;
    --root-neutral: #8c8576;

    --root-info-bg: #e8eff6;
    --root-info-border: #a9c0d6;

    --root-toast-bg: #1b2333;
    --root-toast-text: #f6f3ec;
    --root-toast-link: #ddc487;

    --root-shadow: 0 18px 44px rgba(60, 45, 20, 0.16);
    --root-font-heading: Georgia, "Playfair Display", "Times New Roman", serif;

}

:root[data-admin-theme="light"] h1,
:root[data-admin-theme="light"] h2 {
    font-family: var(--root-font-heading);
    font-weight: 500;
    letter-spacing: 0.01em;
}

/* ---- Owner admin theme: DARK GREEN (Settings → Admin) ----
   Mirrors the shop's DARK_BLUE design (deep ink surfaces, gold hairlines + accent, ivory text, serif
   headings) in greens. Applied via <html data-admin-theme="dark-green"> in the owner layout; pages
   without that attribute (shop docs, login) are unaffected. */
:root[data-admin-theme="dark-green"] {

    color-scheme: dark;

    --root-bg: #0b1a14;
    --root-panel-bg: #11241c;
    --root-panel-bg-alt: #173127;
    --root-selected-bg: #1f3f31;
    --root-checked-bg: #24432f;
    --root-hover-bg: rgba(201, 162, 75, 0.14);
    --root-border: rgba(201, 162, 75, 0.26);

    --root-text: #f2ede2;
    --root-text-dim: #a7c2b3;

    --root-accent: #c9a24b;
    --root-accent-hover: #ddc487;
    --root-accent-text: #0b1a14;

    --root-header-bg: #0a1610;
    --root-header-text: #e9d9ac;
    --root-header-border: rgba(201, 162, 75, 0.30);
    --root-shadow: 0 18px 44px rgba(0, 0, 0, 0.45);

    --root-success: #86b892;
    --root-success-bg: rgba(134, 184, 146, 0.16);
    --root-danger: #e07a6f;
    --root-danger-hover: #ea948a;
    --root-danger-bg: rgba(224, 122, 111, 0.18);
    --root-warning: #e0b44a;
    --root-warning-text: #2a2100;
    --root-neutral: #8aa598;

    --root-info-bg: rgba(134, 184, 146, 0.10);
    --root-info-border: rgba(201, 162, 75, 0.45);

    --root-toast-bg: #f2ede2;
    --root-toast-text: #0b1a14;
    --root-toast-link: #8a6a2b;

    --root-font-heading: Georgia, "Playfair Display", "Times New Roman", serif;

}

:root[data-admin-theme="dark-green"] h1,
:root[data-admin-theme="dark-green"] h2 {
    font-family: var(--root-font-heading);
    font-weight: 500;
    letter-spacing: 0.01em;
}