/*
 * ADMIN REDESIGN — Step 1 design tokens (PokerEngine admin).
 *
 * Establishes the redesign's two-zone token system:
 *   - A refined dark / navy SIDEBAR (tokens live on :root because the
 *     sidebar is a grid sibling of .main, not a descendant).
 *   - A LIGHT content area: the core --color-* tokens are RE-SCOPED to
 *     .main so every component already built on them (.card, .data-table,
 *     .btn, .input, .chip, .field, .banner) flips to the light surface in
 *     one move, with no per-component rewrite. The sidebar keeps the dark
 *     :root values.
 *
 * Loaded BEFORE admin.css, so any rule that refines an EXISTING admin.css
 * selector is written with a higher-specificity scope (.main … / .app-shell …)
 * in components.css. Token overrides win regardless of file order because
 * .main is more specific than :root for custom-property resolution.
 *
 * Envato: separate file (admin.css is at the 1500-LOC cap). English only.
 */

:root {
    /* ── Dark / navy sidebar palette (the trustworthy-SaaS rail) ───────── */
    --sidebar-bg: #0E1322;
    --sidebar-bg-end: #141B2D;
    --sidebar-fg: #E7EAF2;
    --sidebar-fg-muted: #8B93A7;
    --sidebar-border: rgba(255, 255, 255, 0.07);
    --sidebar-group-label: #5C6680;
    --sidebar-item-hover-bg: rgba(255, 255, 255, 0.05);
    --sidebar-item-active-bg: rgba(245, 200, 66, 0.12);
    --sidebar-item-active-fg: #FFFFFF;
    --sidebar-icon: #7E879D;

    /* Slightly wider rail for the grouped IA + icons. */
    --sidebar-width: 256px;
}

/*
 * LIGHT content area. Re-scoping the brand --color-* tokens here turns the
 * whole content zone into a near-white surface while the sidebar (outside
 * .main) keeps the dark :root palette. Contrast pairs target WCAG AA on
 * white (text 4.5:1+, secondary/muted 3:1+).
 */
.main {
    --color-background: #F4F5F7;   /* canvas behind cards / sunken fields  */
    --color-surface: #FFFFFF;      /* cards, panels, table body            */
    --color-border: #E4E7EC;       /* hairlines, dividers                  */
    --color-text: #101828;         /* primary text                        */
    --color-text-secondary: #475467;
    --color-text-muted: #667085;   /* ids, captions                       */

    --color-accent: #F5C842;
    --color-accent-hover: #E7B62E;
    --color-success: #067647;
    --color-danger: #D92D20;
    --color-warning: #B54708;
    --color-ring: #F5C842;

    /* Soft, low-spread shadows read as "premium" on a light surface; the
       dark-theme shadows (near-black, heavy) look like smudges on white. */
    --shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.05);
    --shadow-md: 0 2px 8px rgba(16, 24, 40, 0.06), 0 1px 2px rgba(16, 24, 40, 0.04);
    --shadow-lg: 0 12px 28px rgba(16, 24, 40, 0.10), 0 2px 6px rgba(16, 24, 40, 0.05);
    --shadow-glow: 0 0 0 3px rgba(245, 200, 66, 0.35);

    /* New named surfaces the redesign kit uses (additive, not overrides). */
    --surface-raised: #FFFFFF;
    --surface-sunken: #F4F5F7;
    --surface-hover: #F9FAFB;
    --hairline: #EAECF0;

    background: var(--color-background);
    color: var(--color-text);
}