/* ==============================================================
   Vistaarly · base/variables.css
   Design tokens — the single source of truth for colours, spacing,
   radii and shadows. Every component/page stylesheet SHOULD read
   from these variables and never hard-code a hex/px value.

   NOTE: The legacy assets/css/style.css also defines a rich set of
   variables (ink-*, cream-*, accent, marigold, etc). We keep those
   as-is and layer these :root additions on top — new spacing/scale
   tokens plus explicit "semantic" aliases used by the new page
   stylesheets. This keeps 100% back-compat with the existing pages.
   ============================================================== */

:root {
    /* ---- semantic colour aliases (map to existing palette) ---- */
    --color-primary:      var(--ink-950, #0b0f19);
    --color-primary-soft: var(--ink-800, #1f2937);
    --color-accent:       var(--accent,  #f59e0b);
    --color-accent-hover: var(--accent-hover, #d97706);
    --color-marigold:     var(--marigold, #f59e0b);
    --color-text:         var(--ink-900, #111827);
    --color-text-muted:   var(--ink-500, #6b7280);
    --color-text-subtle:  var(--ink-400, #9ca3af);
    --color-border:       var(--ink-200, #e5e7eb);
    --color-border-soft:  var(--ink-100, #f3f4f6);
    --color-bg:           #ffffff;
    --color-bg-subtle:    var(--cream-50,  #fffdf9);
    --color-bg-alt:       var(--cream-100, #fbf6ec);
    --color-danger:       var(--danger,  #dc2626);
    --color-danger-tint:  var(--danger-tint, #fef2f2);
    --color-success:      var(--success, #059669);
    --color-success-tint: var(--success-tint, #ecfdf5);
    --color-warn:         var(--warn,    #d97706);
    --color-warn-tint:    var(--warn-tint, #fffbeb);
    --color-info:         var(--info,    #2563eb);
    --color-info-tint:    var(--info-tint, #eff6ff);

    /* ---- spacing scale (use these — never arbitrary px) ---- */
    --space-0: 0;
    --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;

    /* ---- radii (also expose legacy names) ---- */
    --r-sm: 6px;
    --r-md: 10px;
    --r-lg: 16px;
    --r-xl: 22px;
    --r-full: 999px;

    /* ---- shadows tuned for cards / modals ---- */
    --sh-card:       0 1px 3px rgba(11,15,25,0.08), 0 1px 2px rgba(11,15,25,0.04);
    --sh-card-hover: 0 6px 18px rgba(11,15,25,0.10), 0 2px 4px rgba(11,15,25,0.06);
    --sh-modal:      0 20px 60px rgba(11,15,25,0.28);
    --sh-drawer:     0 12px 40px rgba(11,15,25,0.22);

    /* ---- z-index scale (avoid fighting stacking contexts) ---- */
    --z-header:  40;
    --z-drawer:  60;
    --z-modal:   80;
    --z-toast:  100;

    /* ---- transitions ---- */
    --t-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
    --t-med:  250ms cubic-bezier(0.4, 0, 0.2, 1);
    --t-slow: 400ms cubic-bezier(0.4, 0, 0.2, 1);

    /* Breakpoints (used in @media queries, kept here for reference)
       mobile-sm: <=479px | mobile: <=639px
       tablet:    640-1023px
       laptop:    1024-1279px
       desktop:   >=1280px */

    /* ---- gap-fix aliases (2026-07 audit): these were referenced by
       pages/admin.css, pages/seller-profile.css and pages/review-form.css
       but were never actually declared anywhere, so they silently fell
       back to "unset" (invisible borders/radii, default text colour).
       Defining them here — aliased to the existing palette — fixes those
       pages without duplicating colour values. ---- */
    --radius-md:     var(--r-md, 10px);
    --radius-pill:   var(--r-full, 999px);
    --surface:       var(--cream-50, #fffdf9);
    --line:          var(--ink-200, #e5e7eb);
    --marigold-tint: var(--accent-tint, #fff7ed);
    --marigold-dark: var(--accent-hover, #d97706);
    --teal-tint:     #e0f5f3;
    --teal-deep:     #0f766e;
    --body:          var(--sans, 'IBM Plex Sans', sans-serif);
}