/* ============================================================================
 * Upsell App Design Tokens
 * Single source of truth for color across merchant dashboards, marketing pages,
 * and storefront widgets. See upsell-app-color-palette.pdf for the strategy.
 * ============================================================================ */

:root {
  /* --- Primary brand: conversion orange ----------------------------------- */
  --color-brand-50:  #FFF1E6;
  --color-brand-100: #FFE4D1;
  --color-brand-200: #FFCBA8;
  --color-brand-400: #FF8A4C;
  --color-brand-500: #FF5A1F; /* main storefront CTA */
  --color-brand-600: #E0480F; /* deeper for outdoor / mobile contrast */
  --color-brand-700: #D9480F;
  --color-brand-800: #B8410E;

  /* --- Dashboard primary: premium black ----------------------------------- */
  --color-dash-50:  #FAFAFA;
  --color-dash-100: #F5F5F5;
  --color-dash-200: #E5E5E5;
  --color-dash-400: #A8A8A8;
  --color-dash-600: #525252;
  --color-dash-900: #1A1A1A; /* sidebar, primary text, secondary CTA */
  --color-true-black: #000000;

  /* --- Revenue green: money signals only ---------------------------------- */
  --color-revenue:    #059669;
  --color-revenue-50: #ECFDF5;
  --color-revenue-200:#A7F3D0;
  --color-revenue-700:#047857; /* strong-contrast revenue figure */

  /* --- Storefront-specific signals ---------------------------------------- */
  --storefront-cta:         #FF5A1F;
  --storefront-cta-hover:   #E0480F;
  --storefront-discount:    #DC2626;
  --storefront-highlight:   #FACC15; /* "Best Deal" ribbon */
  --storefront-scarcity:    #B91C1C;
  --storefront-scarcity-bg: #FEF2F2;
  --storefront-savings-bg:  #FFF1E6;
  --storefront-savings-bg-2:#FFE4D1;

  /* --- Neutrals: clean stone (host-agnostic) ------------------------------ */
  --color-bg:      #FAFAFA;
  --color-surface: #FFFFFF;
  --color-card:    #F5F5F5;
  --color-border:  #E5E5E5;
  --color-border-strong: #D4D4D4;
  --color-muted:   #6B6B6B;
  --color-text:    #1A1A1A;
  --color-text-soft: #525252;

  /* --- Semantic feedback -------------------------------------------------- */
  --color-success:    #10B981;
  --color-success-bg: #ECFDF5;
  --color-warning:    #F59E0B;
  --color-warning-bg: #FFFBEB;
  --color-error:      #DC2626;
  --color-error-bg:   #FEF2F2;
  --color-info:       #3B82F6;
  --color-info-bg:    #EFF6FF;

  /* --- Form controls ------------------------------------------------------ */
  --control-height: 42px;
  --control-radius: 10px;
  --control-padding-x: 14px;
  --control-border: #D0D5DD;
  --control-border-hover: #B8C0CC;
  --control-disabled-bg: #F5F5F5;
  --control-disabled-text: #8A8A8A;
  --control-shadow: 0 1px 2px rgba(16, 24, 40, 0.05);
  --control-menu-shadow: 0 14px 32px rgba(16, 24, 40, 0.14);
}