/* =============================================================================
   Consultance.online — Design Tokens
   Sourced from /UI_sample/design_system/DESIGN.md. All CSS throughout the app
   should reference these custom properties, never raw hex values.
   ========================================================================== */

:root {
    /* ---- Brand colors ---------------------------------------------------- */
    --color-primary: #0F172A;          /* Deep Navy - authority */
    --color-primary-hover: #1e293b;
    --color-on-primary: #ffffff;
    --color-accent: #2196f3;           /* Professional Blue - CTAs */
    --color-accent-hover: #1095ff;
    --color-success: #059669;          /* Emerald Green - verified/positive */
    --color-warning: #d97706;
    --color-danger:  #ba1a1a;

    /* ---- Surfaces -------------------------------------------------------- */
    --surface:                 #fcf8fa;
    --surface-bright:          #ffffff;
    --surface-alt:             #f8fafc;
    --surface-container:       #f0edef;
    --surface-container-low:   #f6f3f5;
    --surface-container-high:  #eae7e9;
    --surface-container-highest: #e4e2e4;
    --surface-dim:             #dcd9db;

    /* ---- Text ------------------------------------------------------------ */
    --on-surface:          #1b1b1d;
    --on-surface-variant:  #45464d;
    --on-surface-muted:    #76777d;
    --inverse-surface:     #303032;
    --inverse-on-surface:  #f3f0f2;

    /* ---- Lines ----------------------------------------------------------- */
    --outline:           #c6c6cd;
    --outline-variant:   #e2e8f0;

    /* ---- Typography ------------------------------------------------------ */
    --font-sans: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

    --fs-display-xl: 48px;
    --fs-heading-lg: 32px;
    --fs-heading-md: 24px;
    --fs-heading-sm: 20px;
    --fs-body-lg:    18px;
    --fs-body-md:    16px;
    --fs-body-sm:    14px;
    --fs-caption:    12px;

    --lh-tight: 1.2;
    --lh-snug:  1.3;
    --lh-body:  1.6;

    --fw-regular: 400;
    --fw-medium:  500;
    --fw-semibold: 600;
    --fw-bold:    700;
    --fw-extrabold: 800;

    /* ---- Spacing (4px base) --------------------------------------------- */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-8: 32px;
    --space-10: 40px;
    --space-12: 48px;
    --space-16: 64px;
    --space-20: 80px;

    --container-max: 1280px;
    --gutter: 24px;
    --section-padding: 80px;

    /* ---- Radius ---------------------------------------------------------- */
    --radius-sm: 0.125rem;
    --radius:    0.25rem;
    --radius-md: 0.375rem;
    --radius-lg: 0.5rem;
    --radius-xl: 0.75rem;
    --radius-full: 9999px;

    /* ---- Elevation (ambient shadows) ------------------------------------ */
    --shadow-1: 0 1px 2px rgba(15, 23, 42, 0.04), 0 4px 20px rgba(15, 23, 42, 0.05);
    --shadow-2: 0 8px 24px rgba(15, 23, 42, 0.08);
    --shadow-3: 0 16px 40px rgba(15, 23, 42, 0.12);

    /* ---- Motion ---------------------------------------------------------- */
    --ease:  cubic-bezier(0.2, 0.8, 0.2, 1);
    --dur-fast: 120ms;
    --dur-base: 200ms;
    --dur-slow: 320ms;

    /* ---- Z-index -------------------------------------------------------- */
    --z-header: 40;
    --z-bottom-bar: 45;
    --z-bottom-overlay: 46;
    --z-drawer: 50;
    --z-mobile-sheet: 55;
    --z-modal:  60;
    --z-toast:  70;

    /* ---- Mobile app shell (≤900px) ---------------------------------------- */
    --mobile-header-height: 56px;
    --mobile-bottom-bar-height: 56px;
    --mobile-shell-gap: env(safe-area-inset-bottom, 0px);

    /* ---- Brand gradients (Instagram-inspired ring + Upwork accents) ----- */
    --grad-story: linear-gradient(135deg, #f5b133 0%, #e44a72 50%, #6c4ce0 100%);
    --grad-talent: linear-gradient(135deg, #14b8a6 0%, #2563eb 100%);
    --grad-rising: linear-gradient(135deg, #6c4ce0 0%, #2563eb 100%);
    --grad-cta:    linear-gradient(135deg, #2563eb 0%, #6c4ce0 100%);

    /* ---- Status accents -------------------------------------------------- */
    --color-online:   #22c55e;
    --color-offline:  #94a3b8;
    --color-rating:   #f59e0b;
    --color-money:    #16a34a;

    /* ---- Scrollbars ------------------------------------------------------ */
    --scrollbar-size:       8px;
    --scrollbar-size-thin:  6px;
    --scrollbar-track:      transparent;
    --scrollbar-thumb:      rgba(15, 23, 42, 0.16);
    --scrollbar-thumb-hover:  rgba(15, 23, 42, 0.28);
    --scrollbar-thumb-active: rgba(33, 150, 243, 0.42);
    --scrollbar-thumb-dark:       rgba(255, 255, 255, 0.14);
    --scrollbar-thumb-dark-hover: rgba(255, 255, 255, 0.26);
    --scrollbar-thumb-dark-active: rgba(148, 197, 253, 0.55);
}

@media (max-width: 768px) {
    :root {
        --fs-display-xl: 36px;
        --fs-heading-lg: 26px;
        --fs-heading-md: 20px;
        --section-padding: 56px;
        --gutter: 16px;
    }
}