/* =============================================================================
   Porsana design tokens
   -----------------------------------------------------------------------------
   Canonical tokens for the marketing website and the shared admin shell.
   Linked from _Layout.cshtml, _FaLayout.cshtml, and _AdminLayout.cshtml.
   See /DESIGN.md.

   Values are copied from the styles that actually render on https://porsana.ai
   (ChatBotWebApp/wwwroot/css/main.css, home.css, and the <style> blocks in
   Views/Shared/_Layout.cshtml and _FaLayout.cshtml).

   Lines marked PROPOSED are not in the live cascade. They exist so dashboard
   UI can meet WCAG AA where the marketing colour fails as small text.
   ============================================================================= */

:root {
    /* -----------------------------------------------------------------
       Colour roles
       ----------------------------------------------------------------- */
    --color-bg: #ffffff;                 /* page background (body, cards) */
    --color-surface: #f8fafc;            /* --demo-surface; muted panels, inputs */
    --color-surface-muted: #f1f5f9;      /* login icon, social tile start */
    --color-primary: #667eea;            /* brand indigo. Icons, borders, active nav */
    --color-primary-dark: #5a67d8;       /* --primary-dark */
    --color-primary-deep: #4f46e5;       /* --demo-primary-deep. AA text on white (6.29:1) */
    --color-accent: #764ba2;             /* brand purple, gradient partner of indigo */
    --color-accent-violet: #a855f7;      /* hero gradient-text mid stop */
    --color-accent-magenta: #ec4899;     /* hero gradient-text end stop. Not a fill */
    --color-text: #1e293b;               /* body copy set by the layouts */
    --color-text-strong: #0f172a;        /* --nova-dark. Footer headings */
    --color-heading: #2d2d2d;            /* main.css h1–h6, where no class overrides */
    --color-muted: #64748b;              /* --demo-muted, --nova-light-gray */
    --color-nav: #475569;                /* navbar links */
    --color-placeholder: #94a3b8;        /* search placeholder. Fails AA; not a label */
    --color-border: #e2e8f0;             /* --demo-border, --nova-border */
    --color-border-strong: #e5e7eb;      /* dropdown menus in the layout */

    /* Hero (marketing only — do not paint dashboard pages with this) */
    --color-hero-bg: #0f0f23;
    --color-hero-bg-mid: #1a1a3e;
    --color-hero-title: #ffffff;
    --color-hero-subtitle: #cbd5e1;
    --color-hero-badge: #a5b4fc;

    /* Semantic status. Use only for real status, never as decoration. */
    --color-success: #48bb78;            /* --success-color */
    --color-success-strong: #15803d;     /* end stop of --gradient-success. AA on white (5.02:1) */
    --color-success-mid: #10b981;        /* start stop of --gradient-success. Fails AA as text */
    --color-warning: #ed8936;            /* --warning-color. Fails AA as text or white-on-fill */
    --color-warning-strong: #9a3412;     /* Demo virtual-card title. AA on white and on #fff7ed */
    --color-warning-wash: #fff7ed;       /* Demo virtual-card panel */
    --color-error: #f56565;              /* --danger-color. Fails AA as small text (3.03:1) */
    /* PROPOSED error text. Not a marketing token. #b91c1c is already used on
       the delete control in Views/Admin/Products.cshtml and is 6.47:1 on white. */
    --color-error-strong: #b91c1c;

    /* Feature accents that appear on the Demo page only. Do not use them as
       dashboard chrome, KPI fills, or chart series. */
    --color-feature-orange: #f97316;
    --color-feature-orange-dark: #ea580c;
    --color-feature-sky: #0ea5e9;

    /* -----------------------------------------------------------------
       Gradients (exact stops from main.css)
       ----------------------------------------------------------------- */
    --gradient-primary: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    --gradient-secondary: linear-gradient(135deg, #a855f7 0%, #ec4899 100%);
    --gradient-success: linear-gradient(135deg, #10b981 0%, #15803d 100%);
    --gradient-hero: linear-gradient(135deg, #0f0f23 0%, #1a1a3e 50%, #0f0f23 100%);
    --gradient-hero-text: linear-gradient(135deg, #667eea 0%, #a855f7 50%, #ec4899 100%);
    --gradient-cta: linear-gradient(135deg, #667eea 0%, #764ba2 100%);

    /* -----------------------------------------------------------------
       Typography
       ----------------------------------------------------------------- */
    --font-latin: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --font-persian: "Vazirmatn", Tahoma, "Segoe UI", sans-serif;
    --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

    --font-size-xs: 0.75rem;       /* 12px — admin meta; also used in marketing captions */
    --font-size-sm: 0.875rem;      /* 14px */
    --font-size-base: 1rem;        /* 16px */
    --font-size-md: 0.95rem;       /* nav links */
    --font-size-lg: 1.125rem;      /* 18px */
    --font-size-xl: 1.25rem;       /* 20px */
    --font-size-2xl: 1.5rem;       /* 24px */
    --font-size-3xl: 1.875rem;     /* 30px */
    --font-size-4xl: 2.25rem;      /* 36px */
    --font-size-hero: 3.5rem;      /* home hero title */
    --font-size-display: 4rem;     /* feature-hero h1 */

    --line-height-body: 1.6;
    --line-height-heading: 1.2;
    --line-height-tight: 1.1;      /* hero titles */
    --line-height-relaxed: 1.7;    /* footer, section descriptions */

    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --font-weight-extrabold: 800;
    --font-weight-black: 900;      /* feature-hero h1, Vazirmatn loaded to 900 */

    --letter-spacing-brand: -0.02em;
    --letter-spacing-hero: -0.03em;

    /* -----------------------------------------------------------------
       Spacing (main.css). At the 16px root, before the marketing zoom.
       ----------------------------------------------------------------- */
    --spacing-xs: 0.25rem;   /* 4px */
    --spacing-sm: 0.5rem;    /* 8px */
    --spacing-md: 1rem;      /* 16px */
    --spacing-lg: 1.5rem;    /* 24px */
    --spacing-xl: 2rem;      /* 32px */
    --spacing-2xl: 3rem;     /* 48px */
    --spacing-3xl: 4rem;     /* 64px — used as section padding in page CSS, not a :root token today */

    /* -----------------------------------------------------------------
       Radius
       ----------------------------------------------------------------- */
    --radius-sm: 0.375rem;   /* 6px  — inputs, default buttons */
    --radius-md: 0.5rem;     /* 8px  — nav links, signup buttons */
    --radius-lg: 0.75rem;    /* 12px — cards in main.css, admin cards */
    --radius-xl: 1rem;       /* 16px — value cards, step cards */
    --radius-2xl: 1.25rem;   /* 20px — chatbot window, footer nav on small screens */
    --radius-control: 10px;  /* layout buttons and search */
    --radius-hero: 14px;     /* hero and plan CTAs */
    --radius-pill: 999px;

    /* -----------------------------------------------------------------
       Shadows (main.css tokens, plus the ones the layout actually uses)
       ----------------------------------------------------------------- */
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    --shadow-nav: 0 1px 3px rgba(0, 0, 0, 0.05);
    --shadow-card-hover: 0 12px 28px rgba(102, 126, 234, 0.12);
    --shadow-primary: 0 4px 12px rgba(102, 126, 234, 0.3);
    --shadow-dropdown: 0 10px 40px rgba(0, 0, 0, 0.15);
    --shadow-focus: 0 0 0 3px rgba(102, 126, 234, 0.1);

    /* -----------------------------------------------------------------
       Layout
       ----------------------------------------------------------------- */
    --container-max: 1200px;          /* main.css .container */
    --container-padding: 1rem;
    --breakpoint-sm: 576px;
    --breakpoint-md: 768px;
    --breakpoint-lg: 992px;
    --breakpoint-xl: 1200px;
    --breakpoint-xxl: 1400px;         /* Bootstrap 5.3 default; not restated in our CSS */

    /* Dashboard shell sizes, from _AdminLayout. Colour changes; these stay. */
    --sidebar-width: 260px;
    --sidebar-collapsed-width: 70px;
    --header-height: 70px;

    /* -----------------------------------------------------------------
       Z-index — values already in the cascade, named so new UI stops at 9999
       ----------------------------------------------------------------- */
    --z-base: 1;
    --z-sticky: 1000;          /* navbar, back-to-top */
    --z-dropdown: 1000;
    --z-header: 1040;          /* admin top bar */
    --z-overlay: 1045;         /* admin mobile overlay */
    --z-sidebar: 1050;         /* admin sidebar; marketing chatbot widget */
    --z-tooltip: 1060;
    --z-toast: 1100;           /* admin showAlert */
    --z-modal: 1055;           /* Bootstrap 5 modal */

    /* -----------------------------------------------------------------
       Motion
       ----------------------------------------------------------------- */
    --transition-fast: 0.15s ease-in-out;
    --transition-normal: 0.3s ease-in-out;
    --transition-slow: 0.5s ease-in-out;
    --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);

    /* -----------------------------------------------------------------
       PROPOSED dashboard aliases
       Solid primary is #4F46E5 because white on #667eea is 3.66:1 (fails AA
       for normal text). The marketing site still paints primary buttons with
       --gradient-primary. Dashboard buttons should use the solid fill.
       ----------------------------------------------------------------- */
    --color-primary-solid: var(--color-primary-deep);
    --color-focus-ring: var(--color-primary-deep);

    /* PROPOSED status chips: dark text on a pale wash. */
    --color-success-wash: rgba(72, 187, 120, 0.16);
    --color-warning-chip-bg: var(--color-warning-wash);
    --color-error-wash: #fef2f2;       /* already in Admin/Products.cshtml */
    /* Indigo chip. #4338ca on #eef2ff is the documented demo pair (7.07:1).
       Super Admin and the Pro plan use the wash with --color-primary-deep. */
    --color-info-text: #4338ca;
    --color-info-wash: #eef2ff;

    /* Status chips already rendered on provider pages. Same pixels, named
       so those badges can drop the raw hex. Active stays green. */
    --color-success-chip-bg: #dcfce7;
    --color-success-chip-text: #166534;
    --color-success-chip-bg-soft: #d1fae5;
    --color-success-chip-mid: #a7f3d0;
    --color-success-chip-text-deep: #065f46;
    --color-warning-amber-wash: #fef3c7;
    --color-warning-amber-text: #92400e;
    --color-error-chip-bg: #fee2e2;
    --color-error-chip-text: #991b1b;

    /* User-table chips that are not the indigo pair and not a status.
       Super Admin and Pro do not use these. */
    --color-chip-sky: #60a5fa;
    --color-chip-blue: #3b82f6;
    --color-chip-blue-wash: #dbeafe;
    --color-chip-blue-text: #2563eb;
    --color-chip-indigo: #6366f1;
    --color-chip-indigo-wash: #e0e7ff;
    --color-chip-amber: #f59e0b;
    --color-chip-amber-dark: #d97706;
    --color-chip-violet: #a78bfa;
    --color-chip-violet-deep: #8b5cf6;
    --color-chip-violet-dark: #7c3aed;
    --color-chip-violet-wash: #fae8ff;

    /* Third-party brands. Logo and connection tile only. */
    --color-brand-whatsapp: #25d366;
    --color-brand-whatsapp-dark: #128c7e;
    --color-brand-facebook: #1877f2;
    --color-brand-facebook-bright: #0866ff;
    --color-brand-facebook-hover: #166fe5;
    --color-brand-facebook-dark: #0a4fb5;
    --color-brand-facebook-wash: #eef4fe;
    --color-brand-facebook-wash-end: #dbe9fc;
    --color-brand-telegram: #0088cc;
    --color-brand-telegram-light: #229ed9;
    --color-brand-telegram-bright: #00aaff;
    --color-brand-telegram-mid: #0077b5;
    --color-brand-telegram-dark: #006699;
    --color-brand-instagram: #e1306c;
    --color-brand-instagram-1: #f09433;
    --color-brand-instagram-2: #e6683c;
    --color-brand-instagram-3: #dc2743;
    --color-brand-instagram-4: #cc2366;
    --color-brand-instagram-5: #bc1888;
    --color-brand-instagram-wash: #fdf2f8;
    --color-brand-instagram-wash-end: #fce7f3;
    --color-brand-google-blue: #4285f4;
    --color-brand-google-blue-dark: #1967d2;
    --color-brand-google-green: #34a853;
    --color-brand-google-green-dark: #0d652d;
    --color-brand-google-yellow: #fbbc05;
    --color-brand-google-yellow-dark: #f9ab00;
    --color-brand-google-red: #ea4335;
    --color-brand-google-red-dark: #c5221f;
    --color-brand-wordpress: #21759b;
    --color-brand-wordpress-dark: #0073aa;
    --color-brand-woocommerce: #96588a;
    --color-brand-woocommerce-dark: #7f4a76;
    --color-brand-woocommerce-wash: #faf5f9;
    --color-brand-ebay: #e53238;
    --color-brand-ebay-dark: #c72027;
    --color-brand-ebay-blue: #0064d2;
    --color-brand-ebay-blue-dark: #0053ba;
    --color-brand-ebay-yellow: #f5af02;
    --color-brand-ebay-yellow-dark: #e49307;
    --color-brand-ebay-green: #86b817;
    --color-brand-ebay-green-dark: #5ba829;
    --color-brand-sendgrid: #1a82e2;
    --color-brand-sendgrid-dark: #0066d9;
    --color-brand-sendgrid-deep: #004f9e;
    --color-brand-twilio: #f22f46;
    --color-brand-twilio-dark: #d91e36;

    /* Bootstrap overrides to set when this file is eventually linked.
       The marketing layouts already set --bs-primary inline. The admin
       layout does not, so Bootstrap alerts and .text-primary stay #0d6efd. */
    --bs-primary: #667eea;
    --bs-primary-rgb: 102, 126, 234;
    --bs-secondary: #764ba2;
    --bs-secondary-rgb: 118, 75, 162;
    --bs-link-color: #4f46e5;
    --bs-body-color: #1e293b;
    --bs-body-bg: #ffffff;
    --bs-border-color: #e2e8f0;
    --bs-font-sans-serif: var(--font-latin);
}