/* ==========================================================================
   Vyapar-Doot — Design System
   Brand family: BharatAISeva. Deep indigo primary + saffron/gold accent.
   Mobile-first, accessible (WCAG 2.1 AA), theme-aware.
   ========================================================================== */

/* ---- Design tokens ---- */
:root {
    /* Brand colours */
    --color-primary:        #1e2a78;   /* deep indigo */
    --color-primary-dark:   #141d59;
    --color-primary-light:  #3a49a8;
    --color-secondary:      #0f766e;   /* teal — trade/verification accent */
    --color-accent:         #f59e0b;   /* saffron / warm gold */
    --color-accent-dark:    #d97706;

    /* Surfaces */
    --bg-page:      #f6f7fb;
    --bg-surface:   #ffffff;
    --bg-elevated:  #ffffff;
    --bg-muted:     #eef1f8;
    --overlay:      rgba(15, 20, 45, 0.55);

    /* Text */
    --text-main:    #1a2035;
    --text-muted:   #5b6478;
    --text-invert:  #ffffff;
    --border:       #e2e6f0;
    --border-strong:#c9d0e0;

    /* Status */
    --success: #15803d;
    --success-bg: #e7f6ec;
    --warning: #b45309;
    --warning-bg: #fdf3e2;
    --error:   #b91c1c;
    --error-bg: #fdeaea;
    --info:    #1d4ed8;
    --info-bg: #e8effd;

    /* Layout */
    --container:      1200px;
    --container-wide: 1440px;
    --sidebar-width:  288px;
    --header-height:  72px;
    --header-height-mobile: 60px;

    /* Radii */
    --radius:      10px;
    --radius-card: 16px;
    --radius-input:10px;
    --radius-btn:  10px;
    --radius-pill: 999px;

    /* Shadows */
    --shadow-sm: 0 1px 2px rgba(20, 29, 89, 0.06), 0 1px 3px rgba(20, 29, 89, 0.05);
    --shadow-md: 0 4px 12px rgba(20, 29, 89, 0.08), 0 2px 4px rgba(20, 29, 89, 0.05);
    --shadow-lg: 0 12px 32px rgba(20, 29, 89, 0.14), 0 4px 8px rgba(20, 29, 89, 0.06);

    /* Typography scale */
    --font-sans: 'Segoe UI', system-ui, -apple-system, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif;
    --fs-xs:   0.78rem;
    --fs-sm:   0.875rem;
    --fs-base: 1rem;
    --fs-md:   1.125rem;
    --fs-lg:   1.375rem;
    --fs-xl:   1.75rem;
    --fs-2xl:  2.25rem;
    --fs-3xl:  3rem;
    --lh-tight: 1.2;
    --lh-base:  1.6;

    /* Spacing scale */
    --sp-1: 0.25rem;
    --sp-2: 0.5rem;
    --sp-3: 0.75rem;
    --sp-4: 1rem;
    --sp-5: 1.5rem;
    --sp-6: 2rem;
    --sp-7: 3rem;
    --sp-8: 4rem;
    --sp-9: 6rem;

    /* Motion */
    --transition: 180ms ease;
    --transition-slow: 300ms ease;

    /* Z-index layers */
    --z-header:   100;
    --z-sidebar:  200;
    --z-dropdown: 300;
    --z-overlay:  400;
    --z-modal:    500;
    --z-toast:    600;
}

/* ---- Dark theme ---- */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --bg-page:     #0e1122;
        --bg-surface:  #171b2e;
        --bg-elevated: #1e2338;
        --bg-muted:    #232842;
        --overlay:     rgba(0, 0, 0, 0.6);
        --text-main:   #eef1f8;
        --text-muted:  #a5adc4;
        --border:      #2b3150;
        --border-strong:#3a4166;
        --color-primary-light: #6b78d6;
        --success-bg: #12321f;
        --warning-bg: #34260f;
        --error-bg:   #3a1717;
        --info-bg:    #16224a;
        --shadow-sm: 0 1px 2px rgba(0,0,0,0.4);
        --shadow-md: 0 4px 12px rgba(0,0,0,0.45);
        --shadow-lg: 0 12px 32px rgba(0,0,0,0.55);
    }
}
:root[data-theme="dark"] {
    --bg-page:     #0e1122;
    --bg-surface:  #171b2e;
    --bg-elevated: #1e2338;
    --bg-muted:    #232842;
    --overlay:     rgba(0, 0, 0, 0.6);
    --text-main:   #eef1f8;
    --text-muted:  #a5adc4;
    --border:      #2b3150;
    --border-strong:#3a4166;
    --color-primary-light: #6b78d6;
    --success-bg: #12321f;
    --warning-bg: #34260f;
    --error-bg:   #3a1717;
    --info-bg:    #16224a;
    --shadow-sm: 0 1px 2px rgba(0,0,0,0.4);
    --shadow-md: 0 4px 12px rgba(0,0,0,0.45);
    --shadow-lg: 0 12px 32px rgba(0,0,0,0.55);
}

/* ---- Reset & base ---- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}
body {
    margin: 0;
    font-family: var(--font-sans);
    font-size: var(--fs-base);
    line-height: var(--lh-base);
    color: var(--text-main);
    background: var(--bg-page);
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}
img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: var(--color-primary-light); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3, h4 { margin: 0 0 var(--sp-3); line-height: var(--lh-tight); font-weight: 700; color: var(--text-main); }
h1 { font-size: var(--fs-2xl); }
h2 { font-size: var(--fs-xl); }
h3 { font-size: var(--fs-lg); }
p  { margin: 0 0 var(--sp-4); }
ul, ol { margin: 0 0 var(--sp-4); padding-left: 1.25rem; }

/* ---- Accessibility utilities ---- */
.skip-link {
    position: absolute; left: -999px; top: 0; z-index: var(--z-toast);
    background: var(--color-primary); color: #fff; padding: var(--sp-3) var(--sp-4);
    border-radius: 0 0 var(--radius) 0;
}
.skip-link:focus { left: 0; }
.visually-hidden {
    position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
:focus-visible { outline: 3px solid var(--color-accent); outline-offset: 2px; border-radius: 4px; }

/* ---- Layout helpers ---- */
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--sp-4); }
.section { padding-block: var(--sp-8); }
.section--tight { padding-block: var(--sp-7); }
.text-center { text-align: center; }
.grid { display: grid; gap: var(--sp-5); }
.eyebrow {
    display: inline-block; font-size: var(--fs-sm); font-weight: 700; letter-spacing: 0.06em;
    text-transform: uppercase; color: var(--color-secondary); margin-bottom: var(--sp-3);
}
.lead { font-size: var(--fs-md); color: var(--text-muted); max-width: 60ch; }
.section-head { max-width: 42rem; margin-inline: auto; text-align: center; margin-bottom: var(--sp-6); }

/* ---- Buttons ---- */
.btn {
    --btn-bg: var(--color-primary);
    --btn-fg: #fff;
    display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
    min-height: 44px; padding: 0.7rem 1.35rem;
    font-size: var(--fs-base); font-weight: 600; font-family: inherit;
    border: 1px solid transparent; border-radius: var(--radius-btn);
    background: var(--btn-bg); color: var(--btn-fg);
    cursor: pointer; text-decoration: none; transition: transform var(--transition), box-shadow var(--transition), background var(--transition);
    white-space: nowrap;
}
.btn:hover { text-decoration: none; box-shadow: var(--shadow-md); transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; transform: none; box-shadow: none; }
.btn--primary { --btn-bg: var(--color-primary); }
.btn--primary:hover { --btn-bg: var(--color-primary-dark); }
.btn--accent { --btn-bg: var(--color-accent); --btn-fg: #201400; }
.btn--accent:hover { --btn-bg: var(--color-accent-dark); }
.btn--secondary { --btn-bg: var(--bg-muted); --btn-fg: var(--text-main); border-color: var(--border); }
.btn--outline { --btn-bg: transparent; --btn-fg: var(--color-primary-light); border-color: var(--border-strong); }
.btn--outline:hover { --btn-bg: var(--bg-muted); }
.btn--danger { --btn-bg: var(--error); --btn-fg: #fff; }
.btn--ghost { --btn-bg: transparent; --btn-fg: var(--text-main); }
.btn--ghost:hover { --btn-bg: var(--bg-muted); box-shadow: none; }
.btn--lg { min-height: 52px; padding: 0.9rem 1.75rem; font-size: var(--fs-md); }
.btn--sm { min-height: 36px; padding: 0.4rem 0.85rem; font-size: var(--fs-sm); }
.btn--block { width: 100%; }
.btn--icon { padding: 0; width: 44px; min-height: 44px; border-radius: var(--radius); }

/* ---- Cards ---- */
.card {
    background: var(--bg-surface); border: 1px solid var(--border);
    border-radius: var(--radius-card); padding: var(--sp-5);
    box-shadow: var(--shadow-sm); transition: box-shadow var(--transition), transform var(--transition), border-color var(--transition);
}
.card--hover:hover { box-shadow: var(--shadow-lg); transform: translateY(-3px); border-color: var(--border-strong); }
.card__icon {
    width: 48px; height: 48px; border-radius: 12px; display: grid; place-items: center;
    background: linear-gradient(135deg, var(--color-primary), var(--color-primary-light));
    color: #fff; margin-bottom: var(--sp-3);
}
.card__title { font-size: var(--fs-md); margin-bottom: var(--sp-2); }
.card__text { color: var(--text-muted); margin: 0; font-size: var(--fs-sm); }

/* ---- Badges ---- */
.badge {
    display: inline-flex; align-items: center; gap: 0.35em;
    font-size: var(--fs-xs); font-weight: 700; padding: 0.25em 0.7em;
    border-radius: var(--radius-pill); background: var(--bg-muted); color: var(--text-muted);
    border: 1px solid var(--border);
}
.badge--success { background: var(--success-bg); color: var(--success); border-color: transparent; }
.badge--warning { background: var(--warning-bg); color: var(--warning); border-color: transparent; }
.badge--error   { background: var(--error-bg);   color: var(--error);   border-color: transparent; }
.badge--info    { background: var(--info-bg);    color: var(--info);    border-color: transparent; }
.badge--verified { background: var(--success-bg); color: var(--success); }
.badge--score { background: linear-gradient(135deg, var(--color-primary), var(--color-secondary)); color: #fff; border: none; }

/* ---- Alerts ---- */
.alert {
    display: flex; gap: var(--sp-3); align-items: flex-start;
    padding: var(--sp-4); border-radius: var(--radius); border: 1px solid var(--border);
    background: var(--bg-muted); font-size: var(--fs-sm); margin-bottom: var(--sp-4);
}
.alert__icon { flex: 0 0 auto; }
.alert--success { background: var(--success-bg); border-color: transparent; color: var(--success); }
.alert--warning { background: var(--warning-bg); border-color: transparent; color: var(--warning); }
.alert--error   { background: var(--error-bg);   border-color: transparent; color: var(--error); }
.alert--info    { background: var(--info-bg);    border-color: transparent; color: var(--info); }

/* ---- Forms ---- */
.field { margin-bottom: var(--sp-4); }
.field__label { display: block; font-size: var(--fs-sm); font-weight: 600; margin-bottom: var(--sp-2); }
.field__hint  { display: block; font-size: var(--fs-xs); color: var(--text-muted); margin-top: var(--sp-1); }
.field__error { display: block; font-size: var(--fs-xs); color: var(--error); margin-top: var(--sp-1); font-weight: 600; }
.req { color: var(--error); }
.input, .textarea, .select {
    width: 100%; font-family: inherit; font-size: var(--fs-base); color: var(--text-main);
    background: var(--bg-surface); border: 1px solid var(--border-strong);
    border-radius: var(--radius-input); padding: 0.7rem 0.9rem; min-height: 44px;
    transition: border-color var(--transition), box-shadow var(--transition);
}
.input:focus, .textarea:focus, .select:focus {
    outline: none; border-color: var(--color-primary-light);
    box-shadow: 0 0 0 3px rgba(58, 73, 168, 0.18);
}
.input::placeholder, .textarea::placeholder { color: var(--text-muted); opacity: 0.8; }
.textarea { min-height: 110px; resize: vertical; line-height: var(--lh-base); }
.input--error, .textarea--error { border-color: var(--error); }

/* ---- Empty / loading states ---- */
.empty-state { text-align: center; padding: var(--sp-7) var(--sp-4); color: var(--text-muted); }
.empty-state__icon { font-size: 2.5rem; margin-bottom: var(--sp-3); opacity: 0.7; }
.skeleton {
    background: linear-gradient(90deg, var(--bg-muted) 25%, var(--border) 37%, var(--bg-muted) 63%);
    background-size: 400% 100%; animation: sk 1.4s ease infinite; border-radius: var(--radius);
}
@keyframes sk { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }
.spinner {
    width: 20px; height: 20px; border: 2.5px solid var(--border-strong);
    border-top-color: var(--color-primary-light); border-radius: 50%; animation: spin 0.7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ---- Toast ---- */
.toast-region { position: fixed; bottom: var(--sp-5); right: var(--sp-5); z-index: var(--z-toast); display: flex; flex-direction: column; gap: var(--sp-3); max-width: min(92vw, 380px); }
.toast {
    background: var(--bg-elevated); border: 1px solid var(--border); border-left: 4px solid var(--color-primary);
    border-radius: var(--radius); padding: var(--sp-3) var(--sp-4); box-shadow: var(--shadow-lg);
    font-size: var(--fs-sm); animation: toastIn var(--transition);
}
.toast--success { border-left-color: var(--success); }
.toast--error { border-left-color: var(--error); }
@keyframes toastIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ---- Chips / pills ---- */
.chip {
    display: inline-flex; align-items: center; gap: 0.4em; padding: 0.4rem 0.85rem;
    border-radius: var(--radius-pill); background: var(--bg-muted); border: 1px solid var(--border);
    font-size: var(--fs-sm); font-weight: 600; color: var(--text-main); cursor: pointer;
    transition: background var(--transition), border-color var(--transition);
    min-height: 40px;
}
.chip:hover { background: var(--bg-surface); border-color: var(--color-primary-light); }
.chip[aria-pressed="true"] { background: var(--color-primary); color: #fff; border-color: var(--color-primary); }

/* ---- Responsive grid columns ---- */
.cols-2, .cols-3, .cols-4 { display: grid; gap: var(--sp-5); }
@media (min-width: 640px) { .cols-2 { grid-template-columns: repeat(2, 1fr); } .cols-3 { grid-template-columns: repeat(2, 1fr); } .cols-4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 992px) { .cols-3 { grid-template-columns: repeat(3, 1fr); } .cols-4 { grid-template-columns: repeat(4, 1fr); } }

/* ---- Utility ---- */
.mt-0 { margin-top: 0; } .mb-0 { margin-bottom: 0; }
.mt-4 { margin-top: var(--sp-4); } .mt-5 { margin-top: var(--sp-5); } .mt-6 { margin-top: var(--sp-6); }
.flex { display: flex; } .items-center { align-items: center; } .justify-between { justify-content: space-between; }
.gap-2 { gap: var(--sp-2); } .gap-3 { gap: var(--sp-3); } .gap-4 { gap: var(--sp-4); }
.wrap { flex-wrap: wrap; }