/*
 * remitza v4 theme: design tokens (pg_system_admin_portal_v4 palette with the remitza orange accent).
 * Loaded only when ADMIN_THEME=v4 adds `rz-theme` to <body>. Values: spec section 6.
 */

body.rz-theme {
    /* surfaces and text */
    --background: #f6f7f9;
    --foreground: #15181d;
    --card: #ffffff;
    --popover: #ffffff;
    --paper-2: #fbfbfc;
    --hover: #f5f6f8;
    --secondary: #f2f4f7;
    --text-2: #5b6573;
    --text-3: #98a1af;
    --border: #ebedf1;
    --border-2: #f1f2f5; /* table row and detail dividers: prototype :18 (Part 2 spec 5.5) */
    --input: #e6e8ee;
    --line: #e5e7ec;
    --scrim: rgba(15, 19, 23, .55);
    --scrim-strong: rgba(15, 19, 23, .65);

    /* graphite sidebar, the same in both themes */
    --sidebar: #0f1317;
    --sidebar-foreground: #9098a6;
    --sidebar-muted: #5a626f;
    --sidebar-accent: #1a2029;
    --sidebar-accent-foreground: #ffffff;
    --sidebar-border: #1b2027;
    --glyph-glint: rgba(255, 255, 255, .5);

    /* remitza orange, used sparingly */
    --brand: #f7aa44;
    --brand-ink: #15181d;
    --brand-hover: #ec9a2e;
    --brand-text: #a3560a;
    --brand-soft: rgba(247, 170, 68, .12);
    --brand-soft-2: rgba(247, 170, 68, .20);
    --ring: #f7aa44;
    --ring-halo: rgba(247, 170, 68, .40); /* the 3px focus halo, the same in both themes (Part 2 spec 5.5) */

    /* status: text, background, non-text mark */
    --ok: #0a7d4a;
    --ok-bg: #e7f7ef;
    --ok-mark: #0e9f5e;
    --warn: #8a5807;
    --warn-bg: #fbf1dc;
    --warn-mark: #b9760a;
    --act: #a8460a;
    --act-bg: #fdeedd;
    --act-mark: #d45806;
    --err: #b8281b;
    --err-bg: #fceae7;
    --err-mark: #d32d1f;
    --err-halo: rgba(211, 45, 31, .20);
    --info: #185fb3;
    --info-bg: #e7f0fc;
    --info-mark: #1e73d6;
    --neutral: #5b6573;
    --neutral-bg: #f2f4f7;

    /* shape, depth, motion. --radius-2xl and --shadow-sm stay as tokens; cards and dialogs use the card pair (Part 2 spec 5.5) */
    --radius: 12px;
    --radius-sm: 8px;
    --radius-md: 10px;
    --radius-card: 14px; /* every card, table card and dialog shell: prototype --r-lg :13 */
    --radius-xl: 16px;
    --radius-2xl: 20px;
    --shadow-xs: 0 1px 2px #0000000d;
    --shadow-sm: 0 1px 3px #0000001a, 0 1px 2px -1px #0000001a;
    --shadow-md: 0 4px 6px -1px #0000001a, 0 2px 4px -2px #0000001a;
    --shadow-lg: 0 10px 15px -3px #0000001a, 0 4px 6px -4px #0000001a;
    --shadow-xl: 0 20px 25px -5px #0000001a, 0 8px 10px -6px #0000001a;
    --shadow-2xl: 0 25px 50px -12px #00000040;
    --shadow-pop: 0 12px 30px -8px rgba(18, 22, 31, .16), 0 4px 10px rgba(18, 22, 31, .06); /* toasts (prototype :21) */
    --shadow-card: 0 1px 2px rgba(18, 22, 31, .04), 0 1px 3px rgba(18, 22, 31, .03); /* prototype card shadow :20 */
    --ease-spay: cubic-bezier(.22, .61, .36, 1);
    --ease-spay-out: cubic-bezier(.16, 1, .3, 1);

    /* type; Geist and Clash Display have no Chinese glyphs, so every stack ends with Chinese fallbacks. Each metric-matched
       fallback face (base.css) sits right after its web font, so text keeps its place when the font swaps in (Part 2 spec 5.4). */
    --font-sans: "Geist", "Geist Fallback", "PingFang SC", "Microsoft YaHei", "Noto Sans SC", system-ui, -apple-system, "Segoe UI", sans-serif;
    --font-mono: "Geist Mono", "Geist Mono Fallback", ui-monospace, "PingFang SC", "Microsoft YaHei", "Noto Sans SC", monospace;
    --font-heading: "Clash Display", "Clash Display Fallback", "Geist", "Geist Fallback", "PingFang SC", "Microsoft YaHei", "Noto Sans SC", sans-serif;

    /* content-area type (Part 2 spec 5.4): px, because Dcat's rem sizes follow its unchanged 14px root */
    --rz-fs-content: 13px;
    --rz-fs-control: 14px;
    --rz-fs-label: 11px;
    --rz-fs-label-cn: 12px; /* the small-text floor on Chinese pages */
    --rz-lh-content: 1.5; /* unitless: one line box whether Geist, its fallback or a Chinese system font draws the text */

    /* shell sizes */
    --rz-sidebar-w: 216px;
    --rz-sidebar-w-collapsed: 88px;
    --rz-topbar-h: 62px;

    /* form sizes (Part 2 spec 5.5, 7.1) */
    --rz-field-h: 36px;
    --rz-form-label-w: 180px;
    --rz-form-field-max: 720px;
    --rz-z-float: 1030; /* the customer site's WhatsApp button: under Bootstrap's 1040 scrim (Part 2 spec 5.7) */
}

/* html.rz-dark comes from the head script before the first paint; body.dark-mode is Dcat's own class */
html.rz-dark body.rz-theme,
body.rz-theme.dark-mode {
    --background: #0a0c10;
    --foreground: #eceef2;
    --card: #13171e;
    --popover: #13171e;
    --paper-2: #171c24;
    --hover: #1a2029;
    --secondary: #1c222c;
    --text-2: #98a2b0;
    --text-3: #69727f;
    --border: #232a34;
    --border-2: #1c222b; /* prototype :28 */
    --input: #2a323d;
    --line: #222932;
    --scrim: rgba(2, 4, 8, .78);
    --scrim-strong: rgba(2, 4, 8, .88);
    --shadow-pop: 0 16px 40px rgba(0, 0, 0, .5);
    --shadow-card: 0 1px 0 rgba(255, 255, 255, .02), 0 1px 2px rgba(0, 0, 0, .3); /* prototype dark card shadow :30 */

    --brand-text: #f7aa44;
    --brand-soft: rgba(247, 170, 68, .14);
    --brand-soft-2: rgba(247, 170, 68, .22);

    --ok: #34d399;
    --ok-bg: #0c2a20;
    --ok-mark: #34d399;
    --warn: #f2b53c;
    --warn-bg: #2a2210;
    --warn-mark: #f2b53c;
    --act: #f5924a;
    --act-bg: #33200f;
    --act-mark: #f5924a;
    --err: #fb6b5b;
    --err-bg: #2e1714;
    --err-mark: #fb6b5b;
    --err-halo: rgba(251, 107, 91, .20);
    --info: #5ba2f2;
    --info-bg: #10243c;
    --info-mark: #5ba2f2;
    --neutral: #98a2b0;
    --neutral-bg: #1c222c;
}