/*--------------------------------------------------------------
  Design System Tokens — Weco Art (Web App)

  All design decisions live here. Components reference these
  variables exclusively.  To change the palette or spacing
  scale, edit this file only.
--------------------------------------------------------------*/

/* ---- Google Fonts ---- */
@import url('https://fonts.googleapis.com/css2?family=Dancing+Script:wght@400;700&family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap');

:root {
  /* ============================
     Colors – Light mode (default)
     ============================ */

  /* Brand */
  --v-color-primary:        #ff0000;
  --v-color-primary-hover:  #e60000;
  --v-color-primary-hot:    #ff3008;
  --v-color-secondary:      #fdae04;

  /* Semantic status */
  --v-color-success:        #28a745;
  --v-color-success-hover:  #218838;
  --v-color-warning:        #ffc107;
  --v-color-warning-hover:  #e0a800;
  --v-color-error:          #dc3545;
  --v-color-error-hover:    #c82333;
  --v-color-info:           #17a2b8;
  --v-color-info-hover:     #138496;

  /* Status backgrounds */
  --v-color-success-bg:     #d4edda;
  --v-color-warning-bg:     #fff3cd;
  --v-color-error-bg:       #f8d7da;
  --v-color-info-bg:        #d1ecf1;

  /* Status text (for contrast on status backgrounds) */
  --v-color-success-text:   #155724;
  --v-color-warning-text:   #856404;
  --v-color-error-text:     #721c24;
  --v-color-info-text:      #0c5460;

  /* Component accents */
  --v-color-live:           #7aab3c;
  --v-color-rating-star:    #ffa500;
  --v-color-verified:       #00adef;
  --v-color-trustpilot:     #00b67a;
  --v-color-link-blue:      #007bff;

  /* Neutrals */
  --v-color-black:          #181818;
  --v-color-gray-900:       #252525;
  --v-color-gray-800:       #333333;
  --v-color-gray-700:       #404040;
  --v-color-gray-600:       #4c4c4c;
  --v-color-gray-500:       #6c757d;
  --v-color-gray-400:       #a1a1a1;
  --v-color-gray-300:       #aeaeae;
  --v-color-gray-200:       #cccccc;
  --v-color-gray-100:       #eaeaea;
  --v-color-gray-50:        #eeeeee;
  --v-color-white:          #ffffff;

  /* Semantic surfaces */
  --v-bg-body:              #FFF5F5;
  --v-bg-surface:           var(--v-color-white);
  --v-bg-surface-alt:       #f6fafc;
  --v-bg-code:              var(--v-color-gray-50);
  --v-bg-highlight:         #fff9c0;
  --v-bg-sticky:            #f8f9fa;
  --v-bg-hover-subtle:      #eff4f4;
  --v-bg-active-layout:     var(--v-color-gray-50);
  --v-bg-muted:             #f0f0f0;
  --v-bg-input:             var(--v-color-white);

  /* Overlays */
  --v-bg-overlay-light:     rgba(0, 0, 0, 0.3);
  --v-bg-overlay-medium:    rgba(0, 0, 0, 0.5);
  --v-bg-overlay-heavy:     rgba(0, 0, 0, 0.8);

  /* Text */
  --v-text-body:            var(--v-color-gray-700);
  --v-text-heading:         var(--v-color-black);
  --v-text-muted:           var(--v-color-gray-500);
  --v-text-on-primary:      var(--v-color-white);
  --v-text-on-dark:         #e6e6e6;
  --v-text-link:            var(--v-color-black);
  --v-text-link-hover:      var(--v-color-primary);
  --v-text-disabled:        var(--v-color-gray-400);

  /* Borders */
  --v-border-color:         var(--v-color-gray-100);
  --v-border-bold:          var(--v-color-gray-400);
  --v-border-focus:         var(--v-color-primary);
  --v-border-input:         #dee2e6;
  --v-border-subtle:        #e9ecef;

  /* ============================
     Shadows
     ============================ */
  --v-shadow-none:              none;
  --v-shadow-xs:                0 1px 2px rgba(0, 0, 0, 0.05);
  --v-shadow-sm:                0 2px 4px rgba(0, 0, 0, 0.1);
  --v-shadow-md:                0 4px 8px rgba(0, 0, 0, 0.12);
  --v-shadow-lg:                0 8px 16px rgba(0, 0, 0, 0.15);
  --v-shadow-focus:             0 0 0 3px rgba(255, 0, 0, 0.15);
  --v-shadow-inset-hero:        0px -70px 60px -30px rgba(255, 245, 245, 1) inset;
  --v-shadow-inset-hero-webkit: 0px -100px 60px -30px rgba(255, 245, 245, 1) inset;

  /* Scrollbar */
  --v-scrollbar-thumb:      var(--v-color-gray-500);
  --v-scrollbar-track:      var(--v-color-white);

  /* ============================
     Typography
     ============================ */
  --v-font-family:          'Inter', sans-serif;
  --v-font-family-accent:   'Dancing Script', cursive;
  --v-font-family-mono:     'Courier 10 Pitch', courier, monospace;

  /* Font size scale (rem-based for accessibility) */
  --v-fs-xs:                0.75rem;     /* 12px */
  --v-fs-sm:                0.8125rem;   /* 13px */
  --v-fs-base:              0.9375rem;   /* 15px */
  --v-fs-md:                1rem;        /* 16px */
  --v-fs-lg:                1.125rem;    /* 18px */
  --v-fs-xl:                1.25rem;     /* 20px */
  --v-fs-2xl:               1.5rem;      /* 24px */
  --v-fs-3xl:               2rem;        /* 32px */
  --v-fs-4xl:               3rem;        /* 48px */
  --v-fs-5xl:               3.5rem;      /* 56px */

  /* Line heights (unitless) */
  --v-lh-tight:             1.2;
  --v-lh-snug:              1.3;
  --v-lh-base:              1.5;
  --v-lh-relaxed:           1.7;

  /* Font weights */
  --v-fw-normal:            400;
  --v-fw-medium:            500;
  --v-fw-semibold:          600;
  --v-fw-bold:              700;
  --v-fw-extrabold:         800;

  /* ============================
     Spacing (4px base grid)
     ============================ */
  --v-space-0:              0;
  --v-space-1:              4px;
  --v-space-2:              8px;
  --v-space-3:              12px;
  --v-space-4:              16px;
  --v-space-5:              20px;
  --v-space-6:              24px;
  --v-space-8:              32px;
  --v-space-10:             40px;
  --v-space-12:             48px;
  --v-space-16:             64px;
  --v-space-20:             80px;

  /* ============================
     Border radius
     ============================ */
  --v-radius-sm:            4px;
  --v-radius-md:            8px;
  --v-radius-lg:            12px;
  --v-radius-xl:            16px;
  --v-radius-pill:          9999px;
  --v-radius-circle:        50%;

  /* ============================
     Z-index scale
     ============================ */
  --v-z-dropdown:           1000;
  --v-z-sticky:             1020;
  --v-z-fixed:              1030;
  --v-z-modal-backdrop:     1040;
  --v-z-modal:              1050;
  --v-z-popover:            1060;
  --v-z-tooltip:            1070;
  --v-z-toast:              1080;

  /* ============================
     Transitions
     ============================ */
  --v-transition:           all 0.3s ease;
  --v-transition-fast:      all 0.2s ease;
  --v-transition-transform: transform 0.1s ease, opacity 0.1s ease;

  /* ============================
     Layout
     ============================ */
  --v-sidebar-width:        165px;
  --v-sidebar-collapsed:    55px;
  --v-navbar-height:        58px;
  --v-logo-height:          40px;
  --v-logo-height-sm:       35px;
  --v-touch-target:         44px;
  --v-container-narrow:     1200px;
  --v-container-wide:       1400px;
}

/* ============================
   Dark mode overrides
   ============================ */
.vidiom-dark {
  --v-bg-body:              var(--v-color-black);
  --v-bg-surface:           #252525;
  --v-bg-surface-alt:       var(--v-color-black);
  --v-bg-code:              #252525;
  --v-bg-sticky:            #252525;
  --v-bg-hover-subtle:      #333333;
  --v-bg-active-layout:     #333333;
  --v-bg-muted:             #333333;
  --v-bg-input:             #252525;

  --v-text-body:            #e6e6e6;
  --v-text-heading:         #e6e6e6;
  --v-text-link:            #e6e6e6;
  --v-text-on-dark:         #e6e6e6;
  --v-text-muted:           #a0a0a0;
  --v-text-disabled:        #666666;

  --v-border-color:         #333333;
  --v-border-bold:          #4c4c4c;
  --v-border-input:         #4c4c4c;
  --v-border-subtle:        #333333;

  --v-shadow-sm:            0 2px 4px rgba(0, 0, 0, 0.3);
  --v-shadow-md:            0 4px 8px rgba(0, 0, 0, 0.35);
  --v-shadow-lg:            0 8px 16px rgba(0, 0, 0, 0.4);
  --v-shadow-inset-hero:        0px -70px 60px -30px rgba(24, 24, 24, 1) inset;
  --v-shadow-inset-hero-webkit: 0px -100px 60px -30px rgba(24, 24, 24, 1) inset;

  --v-scrollbar-thumb:      #4c4c4c;
  --v-scrollbar-track:      #252525;

  --bs-dropdown-link-color:          #e6e6e6;
  --bs-dropdown-link-hover-color:    var(--v-color-primary);
  --bs-dropdown-link-active-color:   #e6e6e6;
  --bs-dropdown-link-disabled-color: var(--v-color-gray-500);
}