/* ==========================================================
Project : Compro Doodle
Module  : Core Design System
File    : variables.css
Version : 2.1.0
Author  : Doodle Engineering
========================================================== */

/* ==========================================================
   ROOT
========================================================== */

:root{

/* ==========================================================
   BRAND
========================================================== */

--color-primary:#E64387;
--color-primary-hover:#D63779;
--color-primary-light:#FCE4EE;

/* ==========================================================
   SURFACE
========================================================== */

--color-background:#FFFFFF;

--color-surface:#FFFFFF;

--color-surface-alt:#FAFAFA;

--color-surface-hover:#F5F5F5;

/* ==========================================================
   TEXT
========================================================== */

--color-text:#1F1F1F;

--color-text-secondary:#666666;

--color-text-muted:#999999;

--color-text-white:#FFFFFF;

/* ==========================================================
   BORDER
========================================================== */

--color-border:#E9E9E9;

--color-border-light:#F1F1F1;

--color-divider:#ECECEC;

/* ==========================================================
   STATUS
========================================================== */

--color-success:#16A34A;

--color-warning:#F59E0B;

--color-danger:#DC2626;

--color-danger-light:#FEE2E2;

--color-info:#2563EB;

/* ==========================================================
   SHADOW
========================================================== */

--shadow-xs:
0 1px 2px rgba(0,0,0,.04);

--shadow-sm:
0 4px 10px rgba(0,0,0,.05);

--shadow-md:
0 8px 24px rgba(0,0,0,.06);

--shadow-lg:
0 16px 40px rgba(0,0,0,.08);

--shadow-xl:
0 24px 64px rgba(0,0,0,.10);

/* ==========================================================
   RADIUS
========================================================== */

--radius-xs:4px;

--radius-sm:8px;

--radius-md:12px;

--radius-lg:18px;

--radius-xl:24px;

--radius-2xl:32px;

--radius-pill:999px;

/* ==========================================================
   SPACING
========================================================== */

--space-0:0;

--space-4:4px;

--space-8:8px;

--space-12:12px;

--space-16:16px;

--space-20:20px;

--space-24:24px;

--space-32:32px;

--space-40:40px;

--space-48:48px;

--space-56:56px;

--space-64:64px;

--space-72:72px;

--space-80:80px;

--space-96:96px;

--space-120:120px;

/* ==========================================================
   TYPOGRAPHY
========================================================== */

--font-family-primary:
"Quicksand",
sans-serif;

--font-family-heading:
"Quicksand",
sans-serif;

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

/* ==========================================================
   FONT SIZE
========================================================== */

--font-xs:12px;

--font-sm:14px;

--font-md:16px;

--font-lg:18px;

--font-xl:20px;

--font-2xl:24px;

--font-3xl:32px;

--font-4xl:40px;

--font-5xl:48px;

--font-6xl:56px;

/* ==========================================================
   FONT WEIGHT
========================================================== */

--font-light:300;

--font-regular:400;

--font-medium:500;

--font-semibold:600;

--font-bold:700;

--font-extrabold:800;

/* ==========================================================
   LINE HEIGHT
========================================================== */

--line-tight:1.2;

--line-normal:1.5;

--line-relaxed:1.8;

--line-loose:2;

/* ==========================================================
   LETTER SPACING
========================================================== */

--tracking-tight:-0.02em;

--tracking-normal:0;

--tracking-wide:0.03em;

/* ==========================================================
   CONTAINER
========================================================== */

--container-sm:640px;

--container-md:768px;

--container-lg:1024px;

--container-xl:1200px;

--container-2xl:1280px;

--container-full:1440px;

/* ==========================================================
   HEADER
========================================================== */

--header-height:80px;

--header-mobile-height:64px;

/* ==========================================================
   SIDEBAR
========================================================== */

--sidebar-width:280px;

--sidebar-collapsed-width:84px;

/* ==========================================================
   BUTTON
========================================================== */

--button-height-xs:32px;

--button-height-sm:40px;

--button-height-md:48px;

--button-height-lg:56px;

--button-height-xl:64px;

/* ==========================================================
   INPUT
========================================================== */

--input-height-sm:40px;

--input-height-md:48px;

--input-height-lg:56px;

/* ==========================================================
   ICON SIZE
========================================================== */

--icon-xs:14px;

--icon-sm:18px;

--icon-md:24px;

--icon-lg:32px;

--icon-xl:48px;

/* ==========================================================
   TRANSITION
========================================================== */

--transition-fast:
150ms ease;

--transition-normal:
300ms ease;

--transition-slow:
500ms ease;

/* ==========================================================
   OPACITY
========================================================== */

--opacity-disabled:.5;

--opacity-muted:.7;

--opacity-overlay:.85;

/* ==========================================================
   SECTION SPACING
========================================================== */

--section-space-xs:48px;

--section-space-sm:64px;

--section-space-md:96px;

--section-space-lg:120px;

--section-space-xl:160px;

/* ==========================================================
   GRID
========================================================== */

--grid-gap-xs:8px;

--grid-gap-sm:16px;

--grid-gap-md:24px;

--grid-gap-lg:32px;

--grid-gap-xl:48px;

/* ==========================================================
   BREAKPOINT
========================================================== */

--breakpoint-mobile:480px;

--breakpoint-tablet:768px;

--breakpoint-laptop:1024px;

--breakpoint-desktop:1280px;

--breakpoint-wide:1440px;

/* ==========================================================
   Z INDEX
========================================================== */

--z-base:1;

--z-dropdown:1000;

--z-sticky:1010;

--z-fixed:1020;

--z-overlay:1030;

--z-modal:1040;

--z-popover:1050;

--z-tooltip:1060;

--z-toast:1070;

--z-loader:1080;

/* ==========================================================
   OVERLAY
========================================================== */

--overlay-light:
rgba(255,255,255,.70);

--overlay-dark:
rgba(0,0,0,.55);

--overlay-primary:
rgba(230,67,135,.12);

/* ==========================================================
   BACKDROP
========================================================== */

--backdrop-blur-sm:4px;

--backdrop-blur-md:8px;

--backdrop-blur-lg:16px;

/* ==========================================================
   BORDER
========================================================== */

--border-width-thin:1px;

--border-width-normal:2px;

--border-width-thick:3px;

/* ==========================================================
   SKELETON
========================================================== */

--skeleton-base:#EFEFEF;

--skeleton-highlight:#F7F7F7;

/* ==========================================================
   FOCUS
========================================================== */

--focus-ring:
0 0 0 4px rgba(230,67,135,.18);

/* ==========================================================
   CARD
========================================================== */

--card-padding-sm:16px;

--card-padding-md:24px;

--card-padding-lg:32px;

--card-padding-xl:40px;

/* ==========================================================
   IMAGE
========================================================== */

--image-radius-sm:8px;

--image-radius-md:16px;

--image-radius-lg:24px;

/* ==========================================================
   NAVBAR
========================================================== */

--navbar-height:84px;

--navbar-shadow:var(--shadow-sm);

/* ==========================================================
   FOOTER
========================================================== */

--footer-padding-top:var(--space-80);

--footer-padding-bottom:var(--space-48);

--footer-container-width:1080px;

--footer-mobile-padding-inline:var(--space-40);

--footer-menu-gap:var(--space-4);

--footer-menu-group-gap:var(--space-24);

--footer-menu-font-size:var(--font-lg);

--footer-menu-line-height:var(--line-tight);

--footer-menu-color:var(--color-text-secondary);

--footer-menu-hover-color:var(--color-primary);

--footer-social-gap:var(--space-16);

--footer-social-size:var(--icon-lg);

--footer-social-mobile-size:var(--icon-md);

--footer-divider-width:100%;

--footer-divider-color:var(--color-divider);

--footer-mobile-divider-color:#D5A72A;

--footer-brand-lockup-width:180px;

--footer-brand-lockup-width-mobile:220px;

--footer-brand-lockup-height:auto;

--footer-brand-lockup-height:var(--space-56);

--footer-brand-height:32px;

--footer-brand-doodle-width:82px;

--footer-brand-nuris-width:118px;

--footer-bottom-font-size:var(--font-xs);

--footer-bottom-gap:var(--space-8);

--footer-bottom-mobile-gap:var(--space-16);

--footer-bottom-margin-top:var(--space-8);

--footer-location-margin-top:var(--space-16);

--footer-mobile-divider-margin-top:var(--space-32);

--footer-mobile-divider-margin-bottom:var(--space-16);

/* ==========================================================
   BADGE
========================================================== */

--badge-height:28px;

--badge-radius:999px;

--badge-padding-inline:12px;

/* ==========================================================
   CHIP
========================================================== */

--chip-height:36px;

--chip-radius:999px;

--chip-padding-inline:16px;

/* ==========================================================
   AVATAR
========================================================== */

--avatar-sm:32px;

--avatar-md:40px;

--avatar-lg:56px;

--avatar-xl:72px;

/* ==========================================================
   COMMERCE
========================================================== */

--product-card-radius:var(--radius-xl);

--product-card-padding:var(--space-24);

--product-card-gap:var(--space-24);

--product-image-size:320px;

--cart-image-size:140px;

--checkout-product-image-size:80px;

--checkout-summary-width:380px;

--wishlist-image-size:120px;

/* ==========================================================
   CART
========================================================== */

--cart-container-width:var(--container-2xl);

--cart-container-width-fluid:92%;

--cart-layout-summary-width:var(--checkout-summary-width);

--cart-layout-gap:var(--space-40);

--cart-item-gap:var(--space-24);

--cart-item-right-min-width:170px;

--cart-quantity-size:42px;

--cart-quantity-input-width:70px;

--cart-summary-top:120px;

--cart-summary-padding:var(--space-32);

--cart-empty-max-width:760px;

--cart-empty-padding-block:var(--space-80);

--cart-empty-padding-inline:var(--space-40);

--cart-animation-offset:12px;

--cart-image-overlay-border:
rgba(0,0,0,.04);

--cart-border-subtle:
rgba(0,0,0,.05);

--cart-divider:
rgba(0,0,0,.08);

--cart-focus-ring:
0 0 0 4px rgba(230,67,135,.15);

--cart-discount-background:#FFF3E0;

--cart-discount-text:#E65100;

--cart-discount-amount:#C62828;

--cart-discount-success-background:#E8F5E9;

--cart-discount-success-border:#A5D6A7;

--cart-discount-success-text:#2E7D32;

--cart-price-changed-background:#E3F2FD;

--cart-price-changed-text:#1565C0;

--cart-weight-background:#F0F4FF;

--cart-weight-text:#4A6FA5;

--cart-scrollbar-track:#F3F3F3;

/* ==========================================================
   FORM
========================================================== */

--form-gap:var(--space-24);

--form-label-margin:var(--space-8);

--form-error-color:var(--color-danger);

--form-success-color:var(--color-success);

/* ==========================================================
   SCROLLBAR
========================================================== */

--scrollbar-width:8px;

--scrollbar-radius:999px;

--scrollbar-thumb:var(--color-primary);

--scrollbar-track:var(--color-surface-hover);

/* ==========================================================
   LOADER
========================================================== */

--loader-size-sm:24px;

--loader-size-md:40px;

--loader-size-lg:64px;

/* ==========================================================
   EASING
========================================================== */

--ease-standard:cubic-bezier(.4,0,.2,1);

--ease-decelerate:cubic-bezier(0,0,.2,1);

--ease-accelerate:cubic-bezier(.4,0,1,1);

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

--duration-fast:150ms;

--duration-normal:300ms;

--duration-slow:500ms;

/* ==========================================================
   ACCESSIBILITY TOKENS
========================================================== */

--visually-hidden-size:1px;

--visually-hidden-offset:-1px;

/* ==========================================================
   ADMIN CMS
========================================================== */

/* Text */
--color-admin-heading:#1E293B;
--color-admin-value:#0F172A;
--color-admin-secondary:#64748B;
--color-admin-tertiary:#475569;
--color-admin-label:#334155;
--color-admin-disabled:#94A3B8;

/* Surface & Border */
--color-admin-surface-muted:#F8FAFC;
--color-admin-border:#E2E8F0;
--color-admin-border-light:#CBD5E1;
--color-admin-divider:#F1F5F9;

/* Solid Action States */
--color-admin-danger-solid:#EF4444;
--color-admin-success-solid:#10B981;
--color-admin-success-solid-hover:#059669;

/* Badge / Status Pills */
--color-badge-pending-bg:#FEF3C7;
--color-badge-pending-text:#92400E;
--color-badge-paid-bg:#D1FAE5;
--color-badge-paid-text:#065F46;
--color-badge-processing-bg:#E0E7FF;
--color-badge-processing-text:#3730A3;
--color-badge-shipped-bg:#DBEAFE;
--color-badge-shipped-text:#1E40AF;
--color-badge-delivered-bg:#DCFCE7;
--color-badge-delivered-text:#15803D;
--color-badge-active-text:#166534;
--color-badge-cancelled-bg:#FEE2E2;
--color-badge-cancelled-text:#991B1B;

/* Badge (secondary tint set, used on Product Weight page) */
--color-admin-badge-alt-warning-bg:#FFF3E0;
--color-admin-badge-alt-success-bg:#E8F5E9;

--color-admin-badge-alt-warning-text:#E65100;
--color-admin-badge-alt-success-text:#2E7D32;
--color-admin-input-border-legacy:#DDDDDD;

/* Alerts */
--color-admin-alert-success-border:#A7F3D0;
--color-admin-alert-error-border:#FECACA;

/* Icon Hover Accents */
--color-admin-icon-hover-toggle:#EEF2FF;

/* Tracking */
--color-admin-tracking-bg:#ECFDF5;

/* Spacing (legacy pixel values preserved as-is; not on the core 8px scale) */
--space-admin-2:2px;
--space-admin-3:3px;
--space-admin-5:5px;
--space-admin-6:6px;
--space-admin-7:7px;
--space-admin-9:9px;
--space-admin-10:10px;
--space-admin-11:11px;
--space-admin-14:14px;
--space-admin-15:15px;
--space-admin-18:18px;
--space-admin-28:28px;

/* Typography */
--font-admin-xs:11px;
--font-admin-sm:13px;
--font-admin-icon:15px;
--font-admin-stat:28px;
--font-admin-title:26px;

/* Letter Spacing */
--tracking-admin-label:0.5px;
--tracking-admin-badge:0.3px;
--tracking-admin-wide:1px;
--tracking-admin-tight:-0.5px;

/* Radius */
--radius-admin-sm:6px;
--radius-admin-md:10px;
--radius-admin-lg:16px;

/* Border Width */
--border-width-admin-accent:4px;

/* Shadow */
--shadow-admin-xs: 0 1px 3px rgba(0,0,0,.03);
--shadow-admin-sm: 0 2px 8px rgba(0,0,0,.06);
--shadow-admin-hover: 0 4px 6px -1px rgba(0,0,0,.08);
--shadow-admin-card-hover: 0 4px 12px rgba(0,0,0,.1);
--shadow-admin-dropdown: 0 8px 20px rgba(15,23,42,.12);

/* Transition */
--transition-admin: 0.2s ease;

/* ==========================================================
   DARK MODE READY
========================================================== */

[data-theme="dark"]{

    --color-background:#111111;

    --color-danger-light:#451A24;

    --color-surface:#1B1B1B;

    --color-surface-alt:#232323;

    --color-surface-hover:#2A2A2A;

    --color-text:#F5F5F5;

    --color-text-secondary:#CFCFCF;

    --color-text-muted:#9D9D9D;

    --color-border:#333333;

    --color-border-light:#2A2A2A;

    --color-divider:#2D2D2D;

    --shadow-xs:
        0 1px 2px rgba(0,0,0,.35);

    --shadow-sm:
        0 6px 14px rgba(0,0,0,.35);

    --shadow-md:
        0 12px 28px rgba(0,0,0,.40);

    --shadow-lg:
        0 20px 48px rgba(0,0,0,.45);

    --shadow-xl:
        0 30px 72px rgba(0,0,0,.50);

}

/* ==========================================================
   ACCESSIBILITY
========================================================== */

:focus-visible{

    outline:none;

    box-shadow:var(--focus-ring);

}

/* ==========================================================
   GLOBAL SELECTION
========================================================== */

::selection{

    background:var(--color-primary);

    color:var(--color-text-white);

}

/* ==========================================================
   ROOT END
========================================================== */

}