/* =============================================================================
   GetSalesClaw Design Tokens — v2.0
   Matches reply.io APP DASHBOARD aesthetic: white, clean, professional SaaS
   Blue #005AFF / Rose #FF195E palette, Inter typography, moderate radius
   ============================================================================= */

:root {
  /* --- Brand --- */
  --brand-navy:        #061836;
  --brand-navy-light:  #38465E;
  --brand-pink:        #FF195E;
  --brand-pink-light:  #ff3d75;
  --brand-purple:      #005AFF;
  --brand-purple-light:#2571ff;
  --brand-purple-bright:#005AFF;
  --brand-purple-section:#005AFF;

  /* --- Surfaces --- */
  --surface-0:         #FFFFFF;   /* page background — pure white */
  --surface-1:         #FFFFFF;   /* cards, panels */
  --surface-2:         #F6F6F8;   /* light gray panels */
  --surface-3:         #ECEDF0;   /* medium gray */
  --surface-4:         #DADCE1;   /* border-weight gray */
  --surface-nav:       #FFFFFF;   /* sticky nav bg */
  --surface-sidebar:   #FFFFFF;   /* sidebar bg — WHITE (app dashboard style) */
  --surface-purple:    #005AFF;   /* full-width blue sections */

  /* --- Borders --- */
  --border-default:    #DADCE1;   /* standard border */
  --border-subtle:     #ECEDF0;   /* very light border */
  --border-hover:      #C4C6CC;
  --border-focus:      #005AFF;   /* blue on focus */

  /* --- Text --- */
  --text-primary:      #061836;   /* headings, strong text — deep navy */
  --text-secondary:    #38465E;   /* body text */
  --text-tertiary:     #5A6576;   /* nav links, labels */
  --text-muted:        #8E99A4;   /* placeholders, captions */
  --text-on-dark:      #ffffff;   /* text on dark/colored bg */
  --text-on-purple:    #ffffff;
  --text-link:         #005AFF;   /* links */
  --text-link-hover:   #FF195E;   /* link hover → rose */

  /* --- CTA / Buttons --- */
  --cta-primary-bg:    #005AFF;   /* bright blue primary button */
  --cta-primary-text:  #ffffff;
  --cta-primary-hover: #0047cc;
  --cta-accent-bg:     #FF195E;   /* rose accent button */
  --cta-accent-text:   #ffffff;
  --cta-accent-hover:  #e0134d;
  --cta-secondary-bg:  #F6F6F8;   /* light gray secondary */
  --cta-secondary-text:#061836;
  --cta-secondary-hover:#ECEDF0;
  --cta-purple-bg:     #005AFF;
  --cta-purple-text:   #ffffff;
  --cta-purple-hover:  #0047cc;

  /* --- Functional / Status --- */
  --success-600:       #00a854;
  --success-500:       #00C969;
  --success-400:       #2ECC71;
  --success-100:       #D1FAE5;
  --success-50:        #ECFDF5;
  --error-600:         #DC2626;
  --error-500:         #EF4444;
  --error-400:         #F87171;
  --error-100:         #FEE2E2;
  --error-50:          #FEF2F2;
  --warning-600:       #D97706;
  --warning-500:       #F59E0B;
  --warning-400:       #FBBF24;
  --warning-100:       #FEF3C7;
  --warning-50:        #FFFBEB;
  --info-600:          #005AFF;
  --info-500:          #2571ff;
  --info-100:          #ddeaff;
  --info-50:           #EEF4FF;

  /* --- Extended palette (sky → blue, emerald / amber — for charts, tags) --- */
  --sky-600:           #005AFF;
  --sky-500:           #2571ff;
  --sky-400:           #5590ff;
  --sky-300:           #88b0ff;
  --sky-200:           #bbcfff;
  --sky-100:           #ddeaff;
  --sky-50:            #EEF4FF;
  --emerald-600:       #00a854;
  --emerald-500:       #00C969;
  --emerald-400:       #2ECC71;
  --emerald-300:       #6EE7B7;
  --emerald-200:       #A7F3D0;
  --emerald-100:       #D1FAE5;
  --emerald-50:        #ECFDF5;
  --amber-600:         #D97706;
  --amber-500:         #F59E0B;
  --amber-400:         #FBBF24;
  --amber-300:         #FCD34D;
  --amber-200:         #FDE68A;
  --amber-100:         #FEF3C7;
  --amber-50:          #FFFBEB;

  /* --- Rose / Blue extended (for pricing tiers, feature badges) --- */
  --pink-600:          #e0134d;
  --pink-500:          #FF195E;
  --pink-400:          #ff4d7e;
  --pink-300:          #ff85a5;
  --pink-200:          #ffb8cb;
  --pink-100:          #ffe0e8;
  --pink-50:           #fff0f4;
  --purple-600:        #0047cc;
  --purple-500:        #005AFF;
  --purple-400:        #2571ff;
  --purple-300:        #5590ff;
  --purple-200:        #bbcfff;
  --purple-100:        #ddeaff;
  --purple-50:         #EEF4FF;

  /* --- Typography --- */
  --font-display:      'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  --font-heading:      'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  --font-body:         'Inter', system-ui, -apple-system, sans-serif;
  --font-mono:         'JetBrains Mono', 'Fira Code', monospace;

  /* --- Type scale --- */
  --text-xs:           0.75rem;    /* 12px */
  --text-sm:           0.875rem;   /* 14px */
  --text-base:         1rem;       /* 16px */
  --text-lg:           1.125rem;   /* 18px */
  --text-xl:           1.25rem;    /* 20px */
  --text-2xl:          1.5rem;     /* 24px */
  --text-3xl:          1.875rem;   /* 30px */
  --text-4xl:          2.25rem;    /* 36px */
  --text-5xl:          3rem;       /* 48px */
  --text-6xl:          3.75rem;    /* 60px */
  --text-7xl:          4.5rem;     /* 72px */

  /* --- Spacing (8px base grid) --- */
  --space-0:           0;
  --space-1:           0.25rem;    /* 4px */
  --space-2:           0.5rem;     /* 8px */
  --space-3:           0.75rem;    /* 12px */
  --space-4:           1rem;       /* 16px */
  --space-5:           1.25rem;    /* 20px */
  --space-6:           1.5rem;     /* 24px */
  --space-8:           2rem;       /* 32px */
  --space-10:          2.5rem;     /* 40px */
  --space-12:          3rem;       /* 48px */
  --space-16:          4rem;       /* 64px */
  --space-20:          5rem;       /* 80px */
  --space-24:          6rem;       /* 96px */

  /* --- Border radius (moderate, Material UI / reply.io app style) --- */
  --radius-sm:         8px;
  --radius-md:         10px;
  --radius-lg:         12px;
  --radius-xl:         16px;
  --radius-2xl:        20px;
  --radius-full:       9999px;

  /* --- Shadows (subtle MUI-style) --- */
  --shadow-xs:         0 1px 2px rgba(6, 24, 54, 0.04);
  --shadow-sm:         0 1px 4px rgba(6, 24, 54, 0.06), 0 1px 2px rgba(6, 24, 54, 0.04);
  --shadow-md:         0 2px 8px rgba(6, 24, 54, 0.08), 0 1px 3px rgba(6, 24, 54, 0.05);
  --shadow-lg:         0 4px 16px rgba(6, 24, 54, 0.08), 0 2px 6px rgba(6, 24, 54, 0.05);
  --shadow-xl:         0 8px 24px rgba(6, 24, 54, 0.10), 0 4px 8px rgba(6, 24, 54, 0.06);
  --shadow-nav:        0 1px 3px rgba(6, 24, 54, 0.08);
  --shadow-card:       0 1px 4px rgba(6, 24, 54, 0.06);
  --shadow-card-hover: 0 4px 16px rgba(6, 24, 54, 0.10);

  /* --- Transitions --- */
  --transition-fast:   150ms ease;
  --transition-base:   200ms ease;
  --transition-slow:   300ms ease;

  /* --- Z-index scale --- */
  --z-dropdown:        10;
  --z-sticky:          20;
  --z-overlay:         30;
  --z-modal:           40;
  --z-toast:           50;
}