/* =============================================================
   DESIGN TOKENS - shared by the standalone pages
   =============================================================

   These are copied verbatim from the :root blocks of
   propdefend-ui.css. They exist as their own file because the
   standalone pages (enroll, employee-setup, client-login, ...)
   deliberately do NOT load the 8,000-line dashboard stylesheet -
   they are single-purpose pages served to customers and want a
   small payload.

   WHY THIS FILE EXISTS: those pages had been migrated to
   var(--token) during the CSS unification, but nothing on them
   ever DEFINED a token. Every var() silently resolved to nothing,
   which is not a fallback - the whole declaration is invalid, so
   `background: var(--color-bg-primary)` rendered TRANSPARENT and
   `linear-gradient(135deg, var(--pd-blue), ...)` produced no
   background at all. On the enrollment page that showed up as a
   help panel the same colour as the page behind it, which is what
   sent Tyler looking (2026-08-26).

   Keep in sync with propdefend-ui.css. scripts/check-standalone-tokens.js
   fails the build if a standalone page uses a token this file does
   not define, and if any value here drifts from propdefend-ui.css.
   ============================================================= */

:root {

    color-scheme: light;

    /* ---------------------------------------------------------------
       Brand fills - THEME-CONSTANT. White text sits on these, so they
       must not lighten in dark mode.
       --------------------------------------------------------------- */
    --pd-blue: #008FBE;
    --pd-blue-dark: #006d94;
    --pd-orange: #FF8300;
    --pd-orange-dark: #e67600;

    /* Brand as foreground (link text, icons, borders on the page) */
    --pd-blue-fg: #00779e;
    --pd-orange-fg: #ae5700;

    /* Brand tints */
    --pd-blue-light: #e5f4ff;
    --pd-orange-light: #ffefe6;

    /* ---------------------------------------------------------------
       Text
       --------------------------------------------------------------- */
    /* Slightly lifted off pure-black for less glare at UI sizes. */
    --color-text-primary: #26282c;
    --color-text-secondary: #5f6368;
    --color-text-tertiary: #80868b;
    --color-text-disabled: #9aa0a6;
    /* Text on a filled/brand button. THEME-CONSTANT - this is the single most
       important token in dark mode: white-on-blue must stay white when the
       page goes dark, so it can never be folded into --color-bg-primary. */
    --color-text-inverse: #ffffff;

    /* ---------------------------------------------------------------
       Surfaces. In dark mode this is an elevation ladder: each step up
       is LIGHTER than the page, never darker.
       --------------------------------------------------------------- */
    --color-bg-primary: #ffffff;
    --color-bg-secondary: #f8f9fa;
    --color-bg-tertiary: #f1f3f4;
    --color-bg-hover: #e8eaed;
    /* Cards, modals, popovers - anything floating above the page */
    --color-bg-elevated: #ffffff;
    /* Wells, code blocks, read-only fields - anything recessed into the page */
    --color-bg-inset: #f1f3f4;
    /* Modal backdrop */
    --color-overlay: rgba(0, 0, 0, 0.5);

    /* ---------------------------------------------------------------
       Borders
       --------------------------------------------------------------- */
    --color-border-light: #e8eaed;
    --color-border-medium: #dadce0;
    --color-border-dark: #9aa0a6;

    /* ---------------------------------------------------------------
       Semantic - Success
       --------------------------------------------------------------- */
    --color-success: #029953;
    --color-success-fg: #007f44;
    --color-success-bg: #d8fbe1;
    --color-success-border: #a2e0b4;
    --color-success-text: #007f44;

    /* ---------------------------------------------------------------
       Semantic - Warning
       --------------------------------------------------------------- */
    --color-warning: #ecb100;
    --color-warning-fg: #8d6900;
    --color-warning-bg: #fff0db;
    --color-warning-border: #eecd96;
    /* Nudged from #b06000 (2026-08-22): that scored 4.34 on --color-warning-bg,
       just under AA. This is the only light value changed by the token work. */
    --color-warning-text: #8d6900;

    /* ---------------------------------------------------------------
       Semantic - Error / Danger
       --------------------------------------------------------------- */
    --color-error: #ed4a4a;
    --color-error-fg: #d02d35;
    --color-error-bg: #ffefec;
    --color-error-border: #ffc3bc;
    --color-error-text: #d02d35;

    /* ---------------------------------------------------------------
       Semantic - Info
       MERGED INTO THE BRAND (2026-08-22). There is now exactly ONE blue in
       the product. These names are kept as ALIASES so existing references
       keep working, but they resolve to the PropDefend blue family.

       This retires the old "--color-info is Google blue, never use it as a
       control accent" rule: with a single blue there is no longer a wrong
       blue to reach for. Prefer the --pd-blue-* names in new code.
       --------------------------------------------------------------- */
    --color-info: var(--pd-blue);
    --color-info-fg: var(--pd-blue-fg);
    --color-info-bg: var(--pd-blue-light);
    --color-info-border: var(--pd-blue-border);
    --color-info-text: var(--pd-blue-fg);

    /* ---------------------------------------------------------------
       Semantic - Accent (violet). Used for agreements, AI surfaces and
       "neutral highlight" states that are not success/warning/error.
       --------------------------------------------------------------- */
    --color-accent: #8b71ee;
    --color-accent-fg: #715bd4;
    --color-accent-bg: #f5f0ff;
    --color-accent-border: #dacafe;
    --color-accent-text: #715bd4;

    /* ---------------------------------------------------------------
       Vendor brand colours. These are OTHER COMPANIES' brands - they are
       deliberately NOT part of our palette, are never consolidated onto
       our semantic tokens, and never change with the theme.
       --------------------------------------------------------------- */
    --vendor-microsoft: #0078d4;
    --vendor-quickbooks: #2ca01c;
    --vendor-apple: #007aff;
    --vendor-google: #4285f4;

    /* ---------------------------------------------------------------
       Shadows. Dark mode deepens these - a light-mode shadow is
       invisible on a dark page.
       --------------------------------------------------------------- */
    --shadow-sm: 0 1px 2px rgba(0,0,0,0.1);
    --shadow-md: 0 2px 6px rgba(0,0,0,0.15);
    --shadow-lg: 0 4px 12px rgba(0,0,0,0.15);
    --shadow-xl: 0 8px 24px rgba(0,0,0,0.2);

    /* Spacing */
    --spacing-xs: 4px;
    --spacing-sm: 8px;
    --spacing-md: 16px;
    --spacing-lg: 24px;
    --spacing-xl: 32px;
    --spacing-2xl: 48px;

    /* Border Radius */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-full: 9999px;

    /* Typography */
    /* Inter, matching the client portal. 'Google Sans' was never publicly
       served, so the dashboard silently fell back to Segoe UI - the harsher
       look. Inter is loaded for real and reads softer at UI sizes. */
    --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-size-xs: 0.75rem;    /* 12px */
    --font-size-sm: 0.875rem;   /* 14px */
    --font-size-base: 1rem;     /* 16px */
    --font-size-lg: 1.125rem;   /* 18px */
    --font-size-xl: 1.25rem;    /* 20px */
    --font-size-2xl: 1.5rem;    /* 24px */
    --font-size-3xl: 1.875rem;  /* 30px */

    /* Line Heights */
    --line-height-tight: 1.25;
    --line-height-normal: 1.55;
    --line-height-relaxed: 1.75;

    /* Transitions */
    --transition-fast: 0.15s ease;
    --transition-normal: 0.2s ease;
    --transition-slow: 0.3s ease;

    /* Shared height for the two top bars. The sidebar header and the content
       header sit side by side and each draw a bottom border, so any difference
       in their height shows up as a visible step at the seam between them.
       One value drives both. */
    --topbar-height: 72px;

    /* Sidebar geometry. Three rules set the expanded width and two set the
       collapsed one, plus .main-content has to offset by whichever is in
       play - five places for one number, which is how they drift. Narrowed
       from 260 to 224 (a seventh less) on 2026-08-23. */
    --sidebar-width: 224px;
    --sidebar-width-collapsed: 68px;

    /* Z-index layers */
    --z-dropdown: 100;
    --z-sticky: 200;
    --z-fixed: 300;
    --z-modal-backdrop: 1000;
    --z-modal: 1000;
    --z-popover: 1100;
    --z-tooltip: 1200;
    --z-toast: 1300;
    --pd-blue-border: #9bdafe;
    --pd-orange-border: #ffc69f;
    --color-warning-ink: #604600;
}

/* Dark theme - same override the dashboard uses. */
:root[data-theme="dark"] {

    color-scheme: dark;

    --pd-blue-fg: #4eb6e7;
    --pd-orange-fg: #fb9038;
    --pd-blue-light: #0e2d3c;
    --pd-orange-light: #382619;

    --color-text-primary: #e8eaed;
    --color-text-secondary: #b0b6bd;
    --color-text-tertiary: #8b9299;
    --color-text-disabled: #6b7278;

    --color-bg-primary: #15171a;
    --color-bg-secondary: #1b1e22;
    --color-bg-tertiary: #22262b;
    --color-bg-hover: #2b3037;
    --color-bg-elevated: #1b1e22;
    --color-bg-inset: #101215;
    --color-overlay: rgba(0, 0, 0, 0.7);

    --color-border-light: #2b3037;
    --color-border-medium: #3a4048;
    --color-border-dark: #5a626b;

    --color-success-fg: #46c177;
    --color-success-bg: #1a2e20;
    --color-success-border: #2d4e37;
    --color-success-text: #52cc82;

    --color-warning-fg: #d8a31a;
    --color-warning-bg: #332816;
    --color-warning-border: #544428;
    --color-warning-text: #e4ae28;

    --color-error-fg: #ff897f;
    --color-error-bg: #3d2320;
    --color-error-border: #643c38;
    --color-error-text: #ff9b91;




    --color-accent-fg: #b59cff;
    --color-accent-bg: #2d273b;
    --color-accent-border: #4b4261;
    --color-accent-text: #c0a9ff;

    --shadow-sm: 0 1px 2px rgba(0,0,0,0.5);
    --shadow-md: 0 2px 6px rgba(0,0,0,0.55);
    --shadow-lg: 0 4px 12px rgba(0,0,0,0.6);
    --shadow-xl: 0 8px 24px rgba(0,0,0,0.7);
    --pd-blue-border: #1a4c63;
    --pd-orange-border: #5d402c;
}