/* ==========================================================================
   ALUMINIUMGLASS.CO.IN
   Public Marketplace Design System
   File: /home/jqkmqvml/public_html/assets/css/variables.css

   IMPORTANT:
   - No marketplace/business/vendor/product/service/location data here.
   - No fake/demo/sample data.
   - This file contains UI/design tokens only.
   - All real marketplace data must come from API/database.
   ========================================================================== */

:root {
  /* ========================================================================
     1. BRAND
     ======================================================================== */

  --brand-primary: #0f5b78;
  --brand-primary-hover: #0b4a63;
  --brand-primary-active: #083b4f;
  --brand-primary-soft: #eaf5f9;

  --brand-secondary: #f28c28;
  --brand-secondary-hover: #d97706;
  --brand-secondary-active: #b45309;
  --brand-secondary-soft: #fff4e6;

  --brand-accent: #0ea5a8;
  --brand-accent-hover: #0b8588;
  --brand-accent-soft: #e8f8f8;


  /* ========================================================================
     2. SEMANTIC COLORS
     ======================================================================== */

  --color-success: #15803d;
  --color-success-hover: #166534;
  --color-success-soft: #ecfdf3;
  --color-success-border: #bbf7d0;

  --color-warning: #b45309;
  --color-warning-hover: #92400e;
  --color-warning-soft: #fffbeb;
  --color-warning-border: #fde68a;

  --color-danger: #b42318;
  --color-danger-hover: #991b1b;
  --color-danger-soft: #fef2f2;
  --color-danger-border: #fecaca;

  --color-info: #0369a1;
  --color-info-hover: #075985;
  --color-info-soft: #eff6ff;
  --color-info-border: #bfdbfe;


  /* ========================================================================
     3. NEUTRAL / SURFACE COLORS
     ======================================================================== */

  --color-white: #ffffff;
  --color-black: #000000;

  --color-gray-25: #fcfcfd;
  --color-gray-50: #f8fafc;
  --color-gray-100: #f1f5f9;
  --color-gray-150: #eaeef3;
  --color-gray-200: #e2e8f0;
  --color-gray-300: #cbd5e1;
  --color-gray-400: #94a3b8;
  --color-gray-500: #64748b;
  --color-gray-600: #475569;
  --color-gray-700: #334155;
  --color-gray-800: #1e293b;
  --color-gray-900: #0f172a;
  --color-gray-950: #020617;

  --surface-page: #f8fafc;
  --surface-primary: #ffffff;
  --surface-secondary: #f1f5f9;
  --surface-tertiary: #eaf0f5;
  --surface-elevated: #ffffff;
  --surface-muted: #f8fafc;
  --surface-inverse: #0f172a;


  /* ========================================================================
     4. TEXT COLORS
     ======================================================================== */

  --text-primary: #0f172a;
  --text-secondary: #475569;
  --text-tertiary: #64748b;
  --text-muted: #94a3b8;
  --text-disabled: #cbd5e1;

  --text-on-primary: #ffffff;
  --text-on-secondary: #ffffff;
  --text-on-dark: #ffffff;

  --text-link: var(--brand-primary);
  --text-link-hover: var(--brand-primary-hover);


  /* ========================================================================
     5. BORDER COLORS
     ======================================================================== */

  --border-color: #e2e8f0;
  --border-color-light: #edf2f7;
  --border-color-strong: #cbd5e1;

  --border-primary: var(--brand-primary);
  --border-success: var(--color-success);
  --border-warning: var(--color-warning);
  --border-danger: var(--color-danger);
  --border-info: var(--color-info);


  /* ========================================================================
     6. FOCUS / ACCESSIBILITY
     ======================================================================== */

  --focus-color: #2563eb;
  --focus-ring-color: rgba(37, 99, 235, 0.22);
  --focus-ring-width: 3px;
  --focus-ring-offset: 2px;


  /* ========================================================================
     7. TYPOGRAPHY - FONT FAMILY
     ======================================================================== */

  --font-family-sans:
    Inter,
    "Noto Sans",
    "Segoe UI",
    Roboto,
    Helvetica,
    Arial,
    sans-serif;

  --font-family-heading:
    Inter,
    "Noto Sans",
    "Segoe UI",
    Roboto,
    Helvetica,
    Arial,
    sans-serif;

  --font-family-mono:
    "SFMono-Regular",
    Consolas,
    "Liberation Mono",
    Menlo,
    monospace;


  /* ========================================================================
     8. TYPOGRAPHY - FONT SIZE
     ======================================================================== */

  --font-size-2xs: 0.6875rem;   /* 11px */
  --font-size-xs: 0.75rem;      /* 12px */
  --font-size-sm: 0.875rem;     /* 14px */
  --font-size-md: 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 */
  --font-size-4xl: 2.25rem;     /* 36px */
  --font-size-5xl: 3rem;        /* 48px */
  --font-size-6xl: 3.75rem;     /* 60px */


  /* ========================================================================
     9. TYPOGRAPHY - FONT WEIGHT
     ======================================================================== */

  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;


  /* ========================================================================
     10. TYPOGRAPHY - LINE HEIGHT
     ======================================================================== */

  --line-height-none: 1;
  --line-height-tight: 1.2;
  --line-height-snug: 1.35;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.65;
  --line-height-loose: 1.8;


  /* ========================================================================
     11. LETTER SPACING
     ======================================================================== */

  --letter-spacing-tight: -0.025em;
  --letter-spacing-normal: 0;
  --letter-spacing-wide: 0.025em;
  --letter-spacing-wider: 0.05em;


  /* ========================================================================
     12. SPACING SCALE
     ======================================================================== */

  --space-0: 0;
  --space-1: 0.25rem;    /* 4px */
  --space-2: 0.5rem;     /* 8px */
  --space-3: 0.75rem;    /* 12px */
  --space-4: 1rem;       /* 16px */
  --space-5: 1.25rem;    /* 20px */
  --space-6: 1.5rem;     /* 24px */
  --space-7: 1.75rem;    /* 28px */
  --space-8: 2rem;       /* 32px */
  --space-10: 2.5rem;    /* 40px */
  --space-12: 3rem;      /* 48px */
  --space-14: 3.5rem;    /* 56px */
  --space-16: 4rem;      /* 64px */
  --space-20: 5rem;      /* 80px */
  --space-24: 6rem;      /* 96px */
  --space-32: 8rem;      /* 128px */


  /* ========================================================================
     13. PAGE / SECTION SPACING
     ======================================================================== */

  --page-padding-x: 1rem;
  --page-padding-y: 1.5rem;

  --section-padding-y: 3rem;
  --section-padding-y-sm: 2rem;
  --section-padding-y-lg: 4.5rem;

  --section-gap: 2.5rem;
  --content-gap: 1.5rem;


  /* ========================================================================
     14. CONTAINER WIDTHS
     ======================================================================== */

  --container-xs: 30rem;      /* 480px */
  --container-sm: 40rem;      /* 640px */
  --container-md: 48rem;      /* 768px */
  --container-lg: 64rem;      /* 1024px */
  --container-xl: 75rem;      /* 1200px */
  --container-2xl: 87.5rem;  /* 1400px */
  --container-max: 90rem;     /* 1440px */


  /* ========================================================================
     15. BORDER RADIUS
     ======================================================================== */

  --radius-none: 0;
  --radius-xs: 0.25rem;       /* 4px */
  --radius-sm: 0.375rem;      /* 6px */
  --radius-md: 0.5rem;        /* 8px */
  --radius-lg: 0.75rem;       /* 12px */
  --radius-xl: 1rem;          /* 16px */
  --radius-2xl: 1.25rem;      /* 20px */
  --radius-3xl: 1.5rem;       /* 24px */
  --radius-full: 9999px;


  /* ========================================================================
     16. COMPONENT RADIUS
     ======================================================================== */

  --radius-button: var(--radius-md);
  --radius-input: var(--radius-md);
  --radius-card: var(--radius-xl);
  --radius-modal: var(--radius-2xl);
  --radius-badge: var(--radius-full);
  --radius-avatar: var(--radius-full);


  /* ========================================================================
     17. SHADOWS
     ======================================================================== */

  --shadow-none: none;

  --shadow-xs:
    0 1px 2px rgba(15, 23, 42, 0.04);

  --shadow-sm:
    0 1px 3px rgba(15, 23, 42, 0.06),
    0 1px 2px rgba(15, 23, 42, 0.04);

  --shadow-md:
    0 4px 10px rgba(15, 23, 42, 0.08),
    0 2px 4px rgba(15, 23, 42, 0.04);

  --shadow-lg:
    0 10px 24px rgba(15, 23, 42, 0.10),
    0 4px 8px rgba(15, 23, 42, 0.05);

  --shadow-xl:
    0 20px 40px rgba(15, 23, 42, 0.12),
    0 8px 16px rgba(15, 23, 42, 0.06);

  --shadow-2xl:
    0 25px 60px rgba(15, 23, 42, 0.16);


  /* ========================================================================
     18. CARD SHADOWS
     ======================================================================== */

  --card-shadow: var(--shadow-sm);
  --card-shadow-hover: var(--shadow-lg);
  --card-border: var(--border-color);


  /* ========================================================================
     19. HEADER / NAVIGATION
     ======================================================================== */

  --header-height: 4.5rem;
  --topbar-height: 2.25rem;
  --navigation-height: 3.5rem;

  --header-bg: var(--color-white);
  --header-border: var(--border-color);

  --navigation-bg: var(--color-white);
  --navigation-border: var(--border-color);

  --topbar-bg: var(--gray-900);
  --topbar-text: var(--color-white);


  /* ========================================================================
     20. SEARCH
     ======================================================================== */

  --search-height: 3.25rem;
  --search-height-sm: 2.875rem;
  --search-height-lg: 3.75rem;

  --search-bg: var(--color-white);
  --search-border: var(--border-color-strong);
  --search-border-focus: var(--brand-primary);

  --search-radius: var(--radius-lg);

  --search-shadow:
    0 2px 8px rgba(15, 23, 42, 0.06);

  --search-shadow-focus:
    0 8px 24px rgba(15, 23, 42, 0.10);


  /* ========================================================================
     21. BUTTONS
     ======================================================================== */

  --button-height-sm: 2.25rem;
  --button-height-md: 2.75rem;
  --button-height-lg: 3.25rem;

  --button-padding-x-sm: 0.75rem;
  --button-padding-x-md: 1rem;
  --button-padding-x-lg: 1.25rem;

  --button-font-weight: var(--font-weight-semibold);
  --button-radius: var(--radius-md);

  --button-primary-bg: var(--brand-primary);
  --button-primary-hover: var(--brand-primary-hover);
  --button-primary-active: var(--brand-primary-active);
  --button-primary-text: var(--text-on-primary);

  --button-secondary-bg: var(--brand-secondary);
  --button-secondary-hover: var(--brand-secondary-hover);
  --button-secondary-active: var(--brand-secondary-active);
  --button-secondary-text: var(--text-on-secondary);

  --button-outline-bg: transparent;
  --button-outline-border: var(--brand-primary);
  --button-outline-text: var(--brand-primary);

  --button-ghost-bg: transparent;
  --button-ghost-hover: var(--surface-secondary);
  --button-ghost-text: var(--text-primary);


  /* ========================================================================
     22. FORM CONTROLS
     ======================================================================== */

  --input-height: 2.875rem;
  --input-height-sm: 2.5rem;
  --input-height-lg: 3.375rem;

  --input-padding-x: 0.875rem;
  --input-padding-y: 0.625rem;

  --input-bg: var(--color-white);
  --input-border: var(--border-color-strong);
  --input-border-hover: var(--gray-400);
  --input-border-focus: var(--brand-primary);

  --input-text: var(--text-primary);
  --input-placeholder: var(--text-muted);

  --input-radius: var(--radius-md);

  --input-shadow-focus:
    0 0 0 var(--focus-ring-width) var(--focus-ring-color);


  /* ========================================================================
     23. LABELS / BADGES
     ======================================================================== */

  --label-font-size: var(--font-size-sm);
  --label-font-weight: var(--font-weight-semibold);

  --badge-height: 1.625rem;
  --badge-padding-x: 0.625rem;

  --badge-font-size: var(--font-size-xs);
  --badge-font-weight: var(--font-weight-semibold);

  --badge-radius: var(--radius-full);


  /* ========================================================================
     24. CARDS
     ======================================================================== */

  --card-bg: var(--color-white);
  --card-border: var(--border-color);
  --card-radius: var(--radius-card);

  --card-padding: var(--space-5);
  --card-padding-sm: var(--space-4);
  --card-padding-lg: var(--space-6);

  --card-gap: var(--space-4);

  --card-transition:
    transform 180ms ease,
    box-shadow 180ms ease,
    border-color 180ms ease;


  /* ========================================================================
     25. MARKETPLACE GRID
     ======================================================================== */

  --grid-gap-xs: 0.75rem;
  --grid-gap-sm: 1rem;
  --grid-gap-md: 1.25rem;
  --grid-gap-lg: 1.5rem;
  --grid-gap-xl: 2rem;

  --card-min-width: 16rem;


  /* ========================================================================
     26. PRODUCT / BUSINESS IMAGE
     ======================================================================== */

  --media-radius: var(--radius-lg);
  --media-bg: var(--surface-secondary);

  --image-placeholder-bg: var(--surface-secondary);

  --avatar-xs: 1.75rem;
  --avatar-sm: 2.25rem;
  --avatar-md: 3rem;
  --avatar-lg: 4rem;
  --avatar-xl: 5rem;


  /* ========================================================================
     27. MODAL / DIALOG
     ======================================================================== */

  --modal-width-sm: 26rem;
  --modal-width-md: 34rem;
  --modal-width-lg: 48rem;
  --modal-width-xl: 64rem;

  --modal-bg: var(--color-white);
  --modal-radius: var(--radius-modal);
  --modal-shadow: var(--shadow-2xl);

  --modal-overlay:
    rgba(15, 23, 42, 0.58);


  /* ========================================================================
     28. DROPDOWN / AUTOCOMPLETE
     ======================================================================== */

  --dropdown-bg: var(--color-white);
  --dropdown-border: var(--border-color);
  --dropdown-radius: var(--radius-lg);
  --dropdown-shadow: var(--shadow-xl);

  --dropdown-item-padding-x: 0.875rem;
  --dropdown-item-padding-y: 0.75rem;

  --dropdown-item-hover-bg: var(--surface-secondary);
  --dropdown-item-active-bg: var(--brand-primary-soft);


  /* ========================================================================
     29. FILTER / SIDEBAR
     ======================================================================== */

  --filter-width: 17.5rem;
  --filter-bg: var(--color-white);
  --filter-border: var(--border-color);
  --filter-radius: var(--radius-lg);

  --filter-section-gap: var(--space-5);


  /* ========================================================================
     30. PAGINATION
     ======================================================================== */

  --pagination-size: 2.5rem;
  --pagination-radius: var(--radius-md);

  --pagination-bg: var(--color-white);
  --pagination-border: var(--border-color);

  --pagination-active-bg: var(--brand-primary);
  --pagination-active-text: var(--color-white);


  /* ========================================================================
     31. STATUS
     ======================================================================== */

  --status-online: #16a34a;
  --status-offline: #94a3b8;
  --status-pending: #d97706;
  --status-approved: #15803d;
  --status-rejected: #dc2626;
  --status-draft: #64748b;
  --status-published: #15803d;
  --status-suspended: #b91c1c;
  --status-expired: #64748b;


  /* ========================================================================
     32. RATING
     ======================================================================== */

  --rating-color: #f59e0b;
  --rating-empty: #cbd5e1;


  /* ========================================================================
     33. OVERLAY / SCRIM
     ======================================================================== */

  --overlay-light: rgba(15, 23, 42, 0.18);
  --overlay-medium: rgba(15, 23, 42, 0.38);
  --overlay-dark: rgba(15, 23, 42, 0.62);


  /* ========================================================================
     34. Z-INDEX SYSTEM
     ======================================================================== */

  --z-base: 0;

  --z-content: 10;

  --z-dropdown: 1000;
  --z-sticky: 1100;
  --z-header: 1200;
  --z-navigation: 1250;

  --z-mobile-navigation: 1300;

  --z-overlay: 1400;
  --z-modal: 1500;
  --z-popover: 1600;
  --z-tooltip: 1700;

  --z-notification: 1800;
  --z-cookie-banner: 1900;

  --z-chat-widget: 2000;

  --z-max: 9999;


  /* ========================================================================
     35. TRANSITIONS
     ======================================================================== */

  --transition-fast: 120ms ease;
  --transition-normal: 180ms ease;
  --transition-medium: 240ms ease;
  --transition-slow: 320ms ease;

  --transition-colors:
    color 180ms ease,
    background-color 180ms ease,
    border-color 180ms ease;

  --transition-transform:
    transform 180ms ease;

  --transition-shadow:
    box-shadow 180ms ease;


  /* ========================================================================
     36. ANIMATION
     ======================================================================== */

  --animation-duration-fast: 120ms;
  --animation-duration-normal: 200ms;
  --animation-duration-slow: 320ms;

  --animation-ease:
    cubic-bezier(0.2, 0.8, 0.2, 1);


  /* ========================================================================
     37. LOADING / SKELETON
     ======================================================================== */

  --skeleton-bg: #e9eef3;
  --skeleton-highlight: #f5f7fa;

  --loading-opacity: 0.72;


  /* ========================================================================
     38. TABLES
     ======================================================================== */

  --table-bg: var(--color-white);
  --table-border: var(--border-color);

  --table-header-bg: var(--surface-secondary);
  --table-row-hover-bg: #f8fafc;

  --table-cell-padding-x: 0.875rem;
  --table-cell-padding-y: 0.75rem;


  /* ========================================================================
     39. TOOLTIP
     ======================================================================== */

  --tooltip-bg: var(--gray-900);
  --tooltip-text: var(--color-white);
  --tooltip-radius: var(--radius-sm);
  --tooltip-padding-x: 0.625rem;
  --tooltip-padding-y: 0.375rem;


  /* ========================================================================
     40. FOOTER
     ======================================================================== */

  --footer-bg: #0f172a;
  --footer-surface: #172033;
  --footer-text: #cbd5e1;
  --footer-heading: #ffffff;
  --footer-link: #cbd5e1;
  --footer-link-hover: #ffffff;
  --footer-border: rgba(255, 255, 255, 0.10);


  /* ========================================================================
     41. BREAKPOINTS
     ======================================================================== */

  --breakpoint-xs: 30rem;      /* 480px */
  --breakpoint-sm: 40rem;      /* 640px */
  --breakpoint-md: 48rem;      /* 768px */
  --breakpoint-lg: 64rem;      /* 1024px */
  --breakpoint-xl: 75rem;      /* 1200px */
  --breakpoint-2xl: 87.5rem;   /* 1400px */


  /* ========================================================================
     42. RESPONSIVE CONTAINER PADDING
     ======================================================================== */

  --container-padding-mobile: 1rem;
  --container-padding-tablet: 1.5rem;
  --container-padding-desktop: 2rem;
  --container-padding-large: 2.5rem;


  /* ========================================================================
     43. ASPECT RATIOS
     ======================================================================== */

  --aspect-square: 1 / 1;
  --aspect-video: 16 / 9;
  --aspect-wide: 21 / 9;
  --aspect-card: 4 / 3;
  --aspect-product: 1 / 1;


  /* ========================================================================
     44. CONTENT WIDTHS
     ======================================================================== */

  --content-width-narrow: 42rem;
  --content-width-readable: 48rem;
  --content-width-standard: 64rem;
  --content-width-wide: 75rem;


  /* ========================================================================
     45. ACCESSIBILITY
     ======================================================================== */

  --minimum-touch-target: 2.75rem;

  --focus-visible-outline:
    2px solid var(--focus-color);

  --focus-visible-outline-offset: 2px;


  /* ========================================================================
     46. PUBLIC MARKETPLACE SPECIAL TOKENS
     ======================================================================== */

  --marketplace-section-bg: var(--surface-page);

  --marketplace-card-bg: var(--surface-primary);

  --marketplace-highlight-bg:
    var(--brand-primary-soft);

  --marketplace-cta-bg:
    var(--brand-secondary);

  --marketplace-cta-hover:
    var(--brand-secondary-hover);

  --marketplace-trust-bg:
    #f0fdf4;

  --marketplace-location-bg:
    #f8fafc;

  --marketplace-search-bg:
    var(--color-white);


  /* ========================================================================
     47. SAFE MOTION
     ======================================================================== */

  --motion-distance-sm: 4px;
  --motion-distance-md: 8px;
  --motion-distance-lg: 12px;


  /* ========================================================================
     48. BORDER WIDTH
     ======================================================================== */

  --border-width-thin: 1px;
  --border-width-medium: 2px;
  --border-width-thick: 3px;


  /* ========================================================================
     49. OPACITY
     ======================================================================== */

  --opacity-disabled: 0.55;
  --opacity-muted: 0.72;
  --opacity-overlay: 0.58;
  --opacity-hidden: 0;


  /* ========================================================================
     50. PRINT
     ======================================================================== */

  --print-text: #000000;
  --print-border: #666666;
  --print-background: #ffffff;
}


/* ==========================================================================
   REDUCED MOTION
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  :root {
    --transition-fast: 0ms;
    --transition-normal: 0ms;
    --transition-medium: 0ms;
    --transition-slow: 0ms;

    --animation-duration-fast: 0ms;
    --animation-duration-normal: 0ms;
    --animation-duration-slow: 0ms;
  }
}


/* ==========================================================================
   DARK THEME TOKENS
   Actual dark-theme activation should be handled by themes/dark.css.
   ========================================================================== */

[data-theme="dark"] {
  --surface-page: #0b1120;
  --surface-primary: #111827;
  --surface-secondary: #172033;
  --surface-tertiary: #1e293b;
  --surface-elevated: #182235;
  --surface-muted: #111827;
  --surface-inverse: #f8fafc;

  --text-primary: #f8fafc;
  --text-secondary: #cbd5e1;
  --text-tertiary: #94a3b8;
  --text-muted: #64748b;
  --text-disabled: #475569;

  --border-color: #263449;
  --border-color-light: #1e293b;
  --border-color-strong: #3a4a60;

  --card-bg: #111827;
  --card-border: #263449;

  --input-bg: #111827;
  --input-border: #3a4a60;

  --header-bg: #0f172a;
  --navigation-bg: #0f172a;

  --dropdown-bg: #111827;
  --table-bg: #111827;
  --table-header-bg: #172033;
  --table-row-hover-bg: #1a2538;

  --skeleton-bg: #1e293b;
  --skeleton-highlight: #263449;
}


/* ==========================================================================
   HIGH CONTRAST THEME TOKENS
   Actual high-contrast behavior should be handled by themes/accessibility.css.
   ========================================================================== */

[data-theme="high-contrast"] {
  --text-primary: #000000;
  --text-secondary: #111111;
  --text-tertiary: #222222;

  --surface-page: #ffffff;
  --surface-primary: #ffffff;
  --surface-secondary: #f5f5f5;

  --border-color: #000000;
  --border-color-light: #333333;
  --border-color-strong: #000000;

  --focus-color: #0000ee;
  --focus-ring-width: 3px;
}


/* ==========================================================================
   END OF VARIABLES
   ========================================================================== */