/* ============================================================
   FILE: theme.css
   PURPOSE: Brand colors + fonts + radius — edit * QUICK EDIT only
   USED ON: Every page (load first)
   DO NOT: put page layout styles here

   HOW TO CHANGE BRAND
   1. Edit ONLY the "* QUICK EDIT" values below.
   2. If you change a font name, also update the @import URL.
   3. Save and hard-refresh (Ctrl+F5).

   Theme toggle: Light = no data-theme | Dark = html[data-theme="arth"]

   CSS FILE MAP (no new files — use these only):
   - theme.css          → brand tokens, fonts (all pages)
   - site.css           → app layout base (_Layout pages)
   - premium-ui.css     → app shell polish, dashboard, explore funds
   - client-onboarding.css + client-onboarding-light.css → Create wizard only
   - submitted.css / onboarding-pending.css → standalone result pages
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

:root {
    /* ========================================================
       * QUICK EDIT — change brand here only
       ======================================================== */

    /* Fonts */
    --ds-edit-font-sans: "Segoe UI", Arial, sans-serif;
    --ds-edit-font-display: "Segoe UI", Arial, sans-serif;
    --ds-edit-font-size: 14px;
    --ds-edit-font-size-root: 15px;

    /* Border radius */
    --ds-edit-radius-xs: 4px;
    --ds-edit-radius-sm: 6px;
    --ds-edit-radius-md: 8px;
    --ds-edit-radius-lg: 10px;
    --ds-edit-radius-xl: 14px;
    --ds-edit-radius-2xl: 18px;
    --ds-edit-radius-null:0px;

    /* Topbar / login panel gradient */
    --ds-edit-topbar-start: #3a318f;
    --ds-edit-topbar-mid: #5548b8;
    --ds-edit-topbar-end: #6c5dd3;
    --ds-edit-login-start: #000000;

    /* Accents / buttons */
    --ds-edit-accent: #6c5dd3;
    --ds-edit-accent-hover: #4a3fb5;       /* dark purple — button hover */
    --ds-edit-accent-deep: #6556cc;
    --ds-edit-shell: #111b3d;
    --ds-edit-shell-mid: #2a3558;
    --ds-edit-shell-deep: #3d348b;
    --ds-edit-shell-action: #6c5dd3;
    --ds-edit-shell-action-hover: #4a3fb5; /* dark purple — button hover */
    --ds-edit-shell-action-active: #3d348b;

    /* RGB for rgba() — keep in sync with hex above */
    --ds-edit-primary-rgb: 108, 93, 211;   /* #6c5dd3 */
    --ds-edit-mint-rgb: 141, 134, 237;     /* #8d86ed */
    --ds-edit-glow-pink-rgb: 216, 78, 199; /* login glow only (subtle) */

    /* Secondary accent */
    --ds-edit-mint: #8d86ed;
    --ds-edit-mint-dark: #7a73e0;
    --ds-edit-mint-darker: #6c5dd3;

    /* Dark theme surfaces */
    --ds-edit-dark-ink: #191b2a;
    --ds-edit-dark-deep: #202233;
    --ds-edit-dark-mid: #252738;
    --ds-edit-dark-teal: #6c5dd3;          /* accent only (not page backgrounds) */
    --ds-edit-dark-teal-mid: #8d86ed;
    --ds-edit-dark-mint: #8d86ed;
    --ds-edit-dark-mint-bright: #9b8cf4;

    /* Light surfaces — clean PMS (cool grey + soft purple, no pink) */
    --ds-edit-page-bg: #f1f3f9;
    --ds-edit-canvas: #f7f8fb;
    --ds-edit-surface: #FFFFFF;
    --ds-edit-border: #e0e3ec;
    --ds-edit-border-soft: #e8ebf3;
    --ds-edit-text: #8792ad;
    --ds-edit-text-strong: #111b3d;
    --ds-edit-heading: #111b3d;
    --ds-edit-muted: #8792ad;

    /* App chrome (dashboard header / sidebar) — PMS purple */
    --ds-edit-header-bg: #FFFFFF;
    --ds-edit-header-border: #e8ebf3;
    --ds-edit-header-icon: #6e6b7b;
    --ds-edit-header-icon-hover: #6c5dd3;
    --ds-edit-header-icon-bg-hover: rgba(var(--ds-edit-primary-rgb), 0.08);
    --ds-edit-header-search-bg: #f1f3f9;
    --ds-edit-sidebar-bg: linear-gradient(309deg, #FFFFFF 46%, #f0eefc 95%);

    /* Mobile welcome hero only */
    --ds-edit-welcome-mobile-bg: linear-gradient(90deg, #6755cb, #9a91e3);
    --ds-edit-welcome-mobile-shadow: 0 9px 17px rgba(108, 93, 211, 0.25);

    /* Sidebar nav (light) — solid PMS purple active */
    --ds-edit-nav-color: #6e6b7b;
    --ds-edit-nav-hover-bg: rgba(var(--ds-edit-primary-rgb), 0.08);
    --ds-edit-nav-hover-color: var(--ds-edit-heading);
    --ds-edit-nav-hover-icon: var(--ds-edit-shell-action);
    --ds-edit-nav-active-bg: linear-gradient(90deg, #6755cb, #9a91e3);
    --ds-edit-nav-active-color: #ffffff;
    --ds-edit-nav-active-icon: #ffffff;
    --ds-edit-nav-active-shadow: 0 9px 17px rgba(108, 93, 211, 0.25);
    --ds-edit-nav-active-radius: 8px;

    /* Status (used) */
    --ds-edit-warning: #F59E0B;

    /* ========================================================
       Mapped aliases used by other CSS files (do not delete if grepped)
       ======================================================== */

    --ds-brand-blue-400: #9b8cf4;
    --ds-brand-blue-soft: rgba(var(--ds-edit-primary-rgb), 0.1);
    --ds-shell-navy-soft: rgba(var(--ds-edit-primary-rgb), 0.08);
    --ds-mint-soft: rgba(var(--ds-edit-mint-rgb), 0.14);
    --ds-mint-muted: rgba(var(--ds-edit-primary-rgb), 0.18);
    --ds-mint-glow: rgba(var(--ds-edit-primary-rgb), 0.35);
    --ds-color-action-soft: rgba(var(--ds-edit-primary-rgb), 0.12);

    /* Flat PMS page canvas (no pink wash) */
    --ds-gradient-page: var(--ds-edit-page-bg);

    --ds-gradient-login-panel:
        radial-gradient(ellipse 60% 50% at 20% 10%, rgba(255, 255, 255, 0.08), transparent 60%),
        radial-gradient(ellipse 50% 50% at 85% 90%, rgba(var(--ds-edit-glow-pink-rgb), 0.12), transparent 65%),
        linear-gradient(145deg, var(--ds-edit-login-start) 0%, var(--ds-edit-topbar-mid) 52%, var(--ds-edit-topbar-end) 100%);
    --ds-gradient-topbar:
        radial-gradient(circle at 85% 12%, rgba(255, 255, 255, 0.14), transparent 34%),
        radial-gradient(circle at 10% 88%, rgba(var(--ds-edit-primary-rgb), 0.18), transparent 38%),
        linear-gradient(145deg, var(--ds-edit-topbar-start) 0%, var(--ds-edit-topbar-mid) 52%, var(--ds-edit-topbar-end) 100%);
    --ds-gradient-action: linear-gradient(90deg, #6755cb, #9a91e3);
    /* Alias used by Create page — same value, available on every page */
    --cc-action-gradient: var(--ds-gradient-action);
    /* Dark purple hover (login / primary CTAs) */
    --ds-gradient-action-hover: linear-gradient(135deg, var(--ds-edit-shell-action-hover) 0%, var(--ds-edit-shell-deep) 100%);

    --ds-radius-xs: var(--ds-edit-radius-xs);
    --ds-radius-sm: var(--ds-edit-radius-sm);
    --ds-radius-md: var(--ds-edit-radius-md);
    --ds-radius-lg: var(--ds-edit-radius-lg);
    --ds-radius-xl: var(--ds-edit-radius-xl);
    --ds-radius-2xl: var(--ds-edit-radius-2xl);

    --ds-shadow-xs: 0 1px 2px rgba(17, 27, 61, 0.04);

    --font: var(--ds-edit-font-sans);
}

/* Dark — only tokens that other CSS actually reads via theme recipes
   Frest-like dark surfaces for forms / cards / chrome */
html[data-theme="arth"] {
    --ds-color-action-soft: rgba(141, 134, 237, 0.16);
    --ds-gradient-topbar: linear-gradient(135deg, var(--ds-edit-dark-ink) 0%, var(--ds-edit-dark-deep) 50%, var(--ds-edit-dark-mid) 100%);
    --ds-gradient-action: linear-gradient(135deg, var(--ds-edit-dark-mint), var(--ds-edit-accent));
    --cc-action-gradient: var(--ds-gradient-action);
    --ds-gradient-action-hover: linear-gradient(135deg, var(--ds-edit-shell-action-hover) 0%, var(--ds-edit-shell-deep) 100%);
    --ds-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.25);

    /* App chrome dark */
    --ds-edit-header-bg: var(--ds-edit-dark-deep);
    --ds-edit-header-border: rgba(255, 255, 255, 0.08);
    --ds-edit-header-icon: rgba(255, 255, 255, 0.72);
    --ds-edit-header-icon-hover: var(--ds-edit-dark-mint-bright);
    --ds-edit-header-icon-bg-hover: rgba(var(--ds-edit-primary-rgb), 0.16);
    --ds-edit-header-search-bg: var(--ds-edit-dark-mid);

    /* Onboarding / create wizard dark surfaces */
    --ds-edit-onboard-bg: var(--ds-edit-dark-ink);
    --ds-edit-onboard-surface: var(--ds-edit-dark-deep);
    --ds-edit-onboard-surface-2: var(--ds-edit-dark-mid);
    --ds-edit-onboard-border: rgba(255, 255, 255, 0.1);
    --ds-edit-onboard-border-soft: rgba(255, 255, 255, 0.06);
    --ds-edit-onboard-text: #e7e3fc;
    --ds-edit-onboard-muted: #a8aabd;

    /* Sidebar nav (dark) — solid PMS purple active */
    --ds-edit-nav-color: rgba(255, 255, 255, 0.72);
    --ds-edit-nav-hover-bg: rgba(var(--ds-edit-primary-rgb), 0.16);
    --ds-edit-nav-hover-color: #ffffff;
    --ds-edit-nav-hover-icon: var(--ds-edit-mint);
    --ds-edit-nav-active-bg: linear-gradient(90deg, #6755cb, #9a91e3);
    --ds-edit-nav-active-color: #ffffff;
    --ds-edit-nav-active-icon: #ffffff;
    --ds-edit-nav-active-shadow: 0 9px 17px rgba(108, 93, 211, 0.25);

    /* Form controls (Frest dark) — used by form-controls.css */
    --x-field-border: #444564;
    --x-field-bg: #2b2c40;
    --x-field-bg-focus: #32334a;
    --x-field-text: #e7e3fc;
    --x-field-muted: #a8aabd;
    --x-field-focus: var(--ds-edit-shell-action);
    --x-field-focus-ring: rgba(var(--ds-edit-primary-rgb), 0.28);
    --x-field-valid: #3d3e55;
    --x-menu-shadow: 0 8px 28px rgba(0, 0, 0, 0.45);
    --x-select-accent-soft: rgba(var(--ds-edit-primary-rgb), 0.16);
    --x-select-accent-muted: rgba(var(--ds-edit-primary-rgb), 0.12);
}