/* TRK-394 Phase 2 — wrap structural tokens in @layer platform.
 * Layer order declared in 00-reset.css. Tokens here are the lowest
 * level of the platform layer; theme files override per-theme via
 * higher-layer rules. */
@layer platform {
  :root {
    /* ── Z-index layering system ─────────────────────────────────
       Tier 1: Base content (1-10)
       Tier 2: Dropdowns & panels (100-150)
       Tier 3: Modal overlays (200-400)
       Tier 4: Floating tools (500-600)
       Tier 5: System feedback (9999-10001)
       Tier 6: Dev/emergency (999999)
    ──────────────────────────────────────────────────────────── */
    --z-content: 1;
    --z-sticky-header: 2;
    --z-splitter: 10;
    --z-sidebar-shell: 50;        /* desktop aside — above main-area so overlay paints on top */
    --z-sidebar-rail: 100;         /* collapsed rail inside aside */
    --z-dropdown: 100;
    --z-sidebar-backdrop: 149;
    --z-sidebar: 150;
    --z-import: 200;
    --z-ios-panel: 201;
    --z-training: 250;
    --z-mobile-backdrop: 299;
    --z-paywall: 300;
    --z-folder-mgr: 340;
    --z-settings: 350;
    --z-log-viewer: 360;
    --z-onboarding: 400;
    --z-picker: 500;
    --z-context-menu: 600;
    --z-rail-expanded: 9998;       /* hover-expanded collapsed rail — just below tooltip */
    --z-tooltip: 9999;
    --z-toast: 10000;              /* toasts share tier with critical menu (never coexist) */
    --z-critical-menu: 10000;
    --z-rule-modal: 10001;
    --z-dev-banner: 999999;

    /* Icon scale — TRK-299 (see docs/plan/ui-reusability-index.md §1) */
    --icon-xs:         12px;  /* filter glyphs inside inputs */
    --icon-sm:         14px;  /* tree rows, buttons with text */
    --icon-md:         16px;  /* delete/close affordances */
    --icon-lg:         24px;  /* list-item fallback avatars */
    --icon-xl:         32px;  /* modal header glyphs */
    --stroke-thin:     1;    /* big muted empty-state / decorative glyphs */
    --stroke-default:  1.5;  /* body icons, tree rows, onboarding big glyphs */
    --stroke-bold:     2;    /* sidebar/toolbar strong, tag-strike, ALL affordances */

    /* Sidebar width — TRK-315. Single source of truth. Media queries override
       on tablet/mobile; the splitter drag handler writes this variable inline
       on :root so the user's choice wins over breakpoint defaults. */
    --sidebar-width: 212px;  /* 6 pad + 200 rail + 6 pad */

    --bg:        #F7F7F2;
    --surface:   #FDFBF7;
    --card:      #FDFBF7;
    --sidebar:   #F4F3EE;
    --border:    #E0D8CC;
    --border2:   #D4CCC0;
    --text:      #2C2418;
    --muted:     #8C7E6A;
    --accent:    #D4A574;
    --accent-bg: #F5EDE4;
    --accent-hover: #C4955E;
    --debit:     #9B2335;
    --credit:    #1B6B3A;
    --debit-bg:  #F5E4E6;
    --credit-bg: #E4F2EA;
    --hover:     #EDE7DD;
    --sidebar-label: #6B5E4D;
    --overlay:   rgba(44,36,24,.35);
    --overlay-light: rgba(44,36,24,.25);
    --grad-start: #fff;
    --grad-end:   #F7F2EC;
    --notif-warn-bg:  #FEF3C7;
    --notif-warn-fg:  #B45309;
    --notif-error-bg: #FEE2E2;
    --notif-error-fg: #991B1B;
    --tooltip-bg:  #1e1e2e;
    --tooltip-fg:  #e2e2f0;
    --tooltip-dim: #c4c4d8;
  }
}