/**
 * VectorSticker Design System — canonical CSS tokens.
 * Source of truth for vectorsticker.com (Laravel/Blade) and reports.vectorsticker.com (React).
 * Generated from tokens.json — do not edit values here without updating tokens.json too.
 */

:root {
  /* ---- Color: Brand ---- */
  --vs-color-brand-primary: #4CAF50;
  --vs-color-brand-accent: #BCFD1D;
  --vs-color-brand-secondary: #222222;

  /* ---- Color: Neutral ---- */
  --vs-color-background: #F8F8F8;
  --vs-color-surface: #FFFFFF;
  --vs-color-border: #ECECEC;
  --vs-color-text-heading: #010D4C;
  --vs-color-text-body: #2B2B2B;
  --vs-color-text-muted: #8E9CBA;
  --vs-color-disabled-bg: #EEEEEE;
  /* Text/icons placed ON the brand green (active tab, active page, primary button). White is only 2.78:1;
     #111111 is 6.79:1 (WCAG AA needs 4.5:1). */
  --vs-color-text-on-primary: #111111;

  /* ---- Color: Status ---- */
  --vs-color-success-bg: #E0F9E0;
  --vs-color-success-border: #55B355;
  --vs-color-danger-bg: #FFDCDC;
  --vs-color-danger-border: #C13B3B;
  --vs-color-warning-bg: #FFF7DC;
  --vs-color-warning-border: #FFD854;
  --vs-color-info-bg: #E0E1F9;
  --vs-color-info-border: #5558B3;

  /* ---- Color: Product Badges ---- */
  --vs-color-badge-trending: #0074E4;
  --vs-color-badge-sale: #0BBE9A;
  --vs-color-badge-free: #743CEE;
  --vs-color-badge-premium: var(--vs-color-brand-primary);

  /* ---- Color: Item Status (admin moderation states) ---- */
  --vs-color-item-status-pending: #FF7A14;
  --vs-color-item-status-soft-rejected: #5506E8;
  --vs-color-item-status-resubmitted: #0A89FF;
  --vs-color-item-status-approved: #00BA10;
  --vs-color-item-status-hard-rejected: #D60C0C;
  --vs-color-item-status-deleted: #F44336;

  /* ---- Typography ---- */
  --vs-font-family: 'Poppins', sans-serif;
  --vs-font-size-body-sm: 13px;
  --vs-font-size-body-md: 16px;
  --vs-font-size-heading-sm: 15px;
  --vs-font-size-heading-md: 28px;
  --vs-font-size-display: 45px;
  --vs-line-height-body: 1.7;

  /* ---- Typography: full type scale (spec v2, 25 Sep 2026) ----
     font shorthand: weight size/line-height family */
  --vs-type-display-01: 600 45px/52px var(--vs-font-family);
  --vs-type-heading-01: 700 36px/44px var(--vs-font-family);
  --vs-type-heading-02: 600 30px/38px var(--vs-font-family);
  --vs-type-heading-03: 600 24px/32px var(--vs-font-family);
  --vs-type-heading-04: 600 20px/28px var(--vs-font-family);
  --vs-type-body-02: 500 16px/24px var(--vs-font-family);
  --vs-type-paragraph: 400 15px/24px var(--vs-font-family);
  --vs-type-body-01: 400 13px/20px var(--vs-font-family);
  --vs-type-label: 600 12px/16px var(--vs-font-family); /* + text-transform: uppercase */
  --vs-type-caption: 400 11px/15px var(--vs-font-family);
  --vs-font-weight-title: 600;
  --vs-font-weight-card-title: 500;
  --vs-font-weight-body: 400;

  /* ---- Radius ---- */
  --vs-radius-xs: 5px;
  --vs-radius-sm: 8px;
  --vs-radius-lg: 12px;
  --vs-radius-xl: 20px;
  --vs-radius-full: 9999px;

  /* ---- Button (spec v2, 25 Sep 2026) ---- */
  --vs-button-primary: var(--vs-color-brand-primary);
  /* Text on the primary button = text on the brand green (6.79:1 default, 5.72:1 hover, 4.59:1 pressed). */
  --vs-button-primary-text: var(--vs-color-text-on-primary);
  /* Hover/pressed shades and the tertiary tints below are derived from the brand green but kept as
     literal defaults. A product that overrides --vs-color-brand-primary must override these too. */
  --vs-button-primary-hover: #43A047;
  --vs-button-primary-pressed: #388E3C;
  --vs-button-secondary: #222222;
  --vs-button-secondary-hover: #333333;
  --vs-button-secondary-pressed: #151515;
  --vs-button-tertiary-border: #D1D5DB;
  --vs-button-tertiary-text: #18181B;
  --vs-button-tertiary-hover-bg: rgba(76, 175, 80, 0.10);
  --vs-button-tertiary-pressed-bg: rgba(76, 175, 80, 0.20);
  --vs-button-tertiary-active-border: var(--vs-color-brand-primary);
  --vs-button-cta-support: #F59E0B;
  --vs-button-cta-support-hover: #F5A623;
  --vs-button-cta-support-pressed: #D97706;
  --vs-button-cta-support-text: #18181B;
  --vs-button-height-sm: 32px;
  --vs-button-height-md: 40px;
  --vs-button-height-lg: 48px;
  --vs-button-pad-x-sm: 16px;
  --vs-button-pad-x-md: 28px;
  --vs-button-pad-x-lg: 32px;
  --vs-button-font-size-sm: 13px;
  --vs-button-font-size-md: 14px;
  --vs-button-font-size-lg: 16px;
  --vs-button-font-weight: 500;
  --vs-button-icon-only-sm: 32px;
  --vs-button-icon-only-md: 38px;
  --vs-button-icon-only-lg: 44px;
  --vs-button-social-size: 40px;
  --vs-button-radius: 4px;
  --vs-button-radius-soft: 6px;
  --vs-button-radius-icon: 8px;
  --vs-button-radius-social: 5px;
  --vs-button-radius-cta: 12px;
  --vs-button-disabled-opacity: 0.5;
  --vs-button-pressed-scale: 0.98;

  /* ---- Card (spec v2, 25 Sep 2026) ---- */
  --vs-card-radius: 3px;
  --vs-card-width: 344.5px; /* real vectorsticker.com item card at >=1600px */
  --vs-card-media-ratio: 1 / 1;
  --vs-card-border: #E5E7EB;
  --vs-card-divider: #F3F4F6;
  --vs-card-media-bg: #F9FAFB;
  --vs-card-padding-item: 14px;
  --vs-card-padding-content: 45px;
  --vs-card-badge-inset: 10px;
  --vs-card-title-size: 16px;
  --vs-card-price-size: 18px;
  --vs-card-price-color: #111827;
  --vs-card-price-old-size: 14px;
  --vs-card-price-old-color: #9CA3AF;
  --vs-card-price-sale-color: var(--vs-color-brand-primary);
  --vs-card-hover-border: var(--vs-color-brand-primary);
  --vs-card-hover-lift: -4px;

  /* ---- Icon size scale (library differs by platform: lucide-react on
     React, Font Awesome on Blade — see tokens.json "icon.principle") ---- */
  --vs-icon-size-sm: 16px;
  --vs-icon-size-md: 20px;
  --vs-icon-size-lg: 24px;
  --vs-icon-stroke-width: 2;

  /* ---- Focus ring (keyboard focus). Contrast must be >= 3:1 against the adjacent colours
     (WCAG 1.4.11): dark ring on light surfaces, white ring on dark surfaces. ---- */
  --vs-focus-ring-color: var(--vs-color-brand-secondary);
  --vs-focus-ring-color-on-dark: #FFFFFF;
  --vs-focus-ring-width: 2px;
  --vs-focus-ring-offset: 2px;

  /* ---- Avatar (sizes match the live site's .user-avatar: 50 / 72 / 95px; sm is for compact bars) ---- */
  --vs-avatar-size-sm: 32px;
  --vs-avatar-size-md: 50px;
  --vs-avatar-size-lg: 72px;
  --vs-avatar-size-xl: 95px;
  --vs-avatar-radius: var(--vs-radius-sm);

  /* ---- Empty state (padding-lg = the live site's .dashboard-card-empty.pd, 8rem) ---- */
  --vs-empty-state-icon-size: 48px;
  --vs-empty-state-padding-sm: 24px;
  --vs-empty-state-padding-md: 48px;
  --vs-empty-state-padding-lg: 8rem;

  /* ---- Shadow (flat design — always none) ---- */
  --vs-shadow-none: none;

  /* ---- Spacing ---- */
  --vs-spacing-xs: 4px;
  --vs-spacing-sm: 8px;
  --vs-spacing-md: 16px;
  --vs-spacing-lg: 24px;
  --vs-spacing-xl: 32px;
  --vs-spacing-section-compact: 30px;
  --vs-spacing-section-default: 60px;
}