/* =========================================================================
   FILENAME: standalone.css
   ROLE: Standalone Theme Palette & Component Skinning
   SCOPE: Pure aesthetic paint. Maps colours, variables, and active states.
          STRICTLY HAS NO STRUCTURAL LAYOUT RESPONSIBILITY.
   ========================================================================= */

:root {
  /* --- App Frame Colors --- */
  --app-frame-bg: #FFFFFF;
  --page-bg: #FFFFFF;

  /* --- Surface Tokens --- */
  --surface-primary: #F8FAFC;
  --surface-secondary: #E2E8F0;
  --surface-tertiary: #CBD5E1;
  --app-surface-bg: #DFE5F4;
  --surface-border: rgba(148, 163, 184, 0.28);
  --radius: 8px;

  /* --- Text Tokens --- */
  --text-primary: #0F172A;
  --text-secondary: #334155;
  --text-muted: #64748B;
  --text-button: #F8FAFC;

  /* --- Action Buttons --- */
  --action-primary: #2563EB;
  --action-primary-hover: #1D4ED8;
  --action-primary-active: #1E40AF;

  /* FLAIRS */
  --box-shadow-subtle: rgba(18, 28, 38, 0.15);
  --placeholder-primary: #CBD5E1;
  --placeholder-secondary: #94A3B8;
  --placeholder-accent: #3B82F6;
  --action-accent: #3B82F6;
}


/* --- Base Presentation --- */
html, body {
  background: var(--page-bg);
  color: var(--text-primary);
}