/* ==========================================================================
   GOLIVO — DESIGN TOKENS
   Source of truth for colors, spacing and radii.
   Portable file: copy as-is into any child theme.
   Do not put component styles or selectors here — variables only.
   ========================================================================== */

:root{

  /* ---- Brand ---- */
  --golivo-espresso:        #3A2C22; /* primary brand — logo, app icon, high-priority accents */
  --golivo-olive:            #6E6A48; /* secondary brand — nav icons, secondary accents, tags */
  --golivo-olive-deep:       #565231; /* rich accent — sidebar logo badge, focal points. Not for text/large areas */
  --golivo-terracotta:       #B0703B; /* light accent/tag (e.g. Pending). NOT for primary CTAs */
  --golivo-terracotta-deep:  #9C4F1E; /* action color — ONLY primary buttons (Create, Bulk Create, Sync) */
  --golivo-terracotta-deep-hover: #7F3F17;

  /* ---- Neutrals: backgrounds / surfaces / borders ---- */
  --golivo-paper:            #FDFBF7; /* main canvas background */
  --golivo-card:             #FFFFFF; /* cards, table rows, modals */
  --golivo-linen:            #F2EBDD; /* sidebar / app-header background */
  --golivo-sidebar-active:   #E4DBC7; /* active sidebar item background */
  --golivo-border:           #E6E1D3; /* default card border, dividers, table borders */
  --golivo-border-strong:    #D9CFC0; /* hover / focus border, section dividers */

  /* ---- Text ---- */
  --golivo-text-primary:     #2B2622; /* body text, headings, table data */
  --golivo-text-secondary:   #6B6558; /* captions, meta info (SKU, date) */
  --golivo-text-muted:       #A29C8C; /* placeholders, disabled, hints */
  --golivo-text-on-brand:    #FBF1E6; /* text on dark/colored fills */

  /* ---- Semantic status ---- */
  --golivo-success-bg:       #E3EBDD;
  --golivo-success-text:     #3F5C36;
  --golivo-pending-bg:       #E8D9C8;
  --golivo-pending-text:     #7A431C;
  --golivo-warning-bg:       #F5E6C8;
  --golivo-warning-text:     #7A5A15;
  --golivo-error-bg:         #F3DDD9;
  --golivo-error-text:       #7C2A1E;

  /* ---- Destructive ---- */
  --golivo-destructive:        #A13D2E;
  --golivo-destructive-hover:  #8A3325;
  --golivo-destructive-bg:     #F8E3E0;

  /* ---- Radii ---- */
  --golivo-radius-sm:  6px;
  --golivo-radius-md:  8px;
  --golivo-radius-lg:  10px;
  --golivo-radius-xl:  12px;

  /* ---- Shadows (use sparingly — see components) ---- */
  --golivo-shadow-cta: 0 2px 6px rgba(156,79,30,0.35);

  /* ---- Fonts (families assigned in golivo-typography.css) ---- */
  --golivo-font-display: 'Fraunces', Georgia, serif;
  --golivo-font-body:    'Hanken Grotesk', -apple-system, Helvetica, Arial, sans-serif;
  --golivo-font-mono:    'SFMono-Regular', ui-monospace, Menlo, Consolas, monospace;

  /* ---- Breakpoints (reference only — CSS custom properties can't be used in media queries,
         kept here as documentation; actual breakpoint is set in overrides + JS) ---- */
  --golivo-bp-mobile-header: 992px; /* matches existing XStore mobile_header_start_from */
}