/* ============================================================
   SELLERTAP — THEME TOKENS
   To change the color scheme, edit the values below.
   Light theme: :root
   Dark theme:  [data-theme="dark"]
   ============================================================ */

:root {
  /* --- Brand colors --- */
  --color-accent:        #0EA66B;   /* primary green — buttons, highlights */
  --color-accent-hover:  #0C9460;
  --color-accent-soft:   #E6F7F1;   /* light tint of accent */
  --color-accent-text:   #ffffff;   /* text on accent backgrounds */

  /* --- Backgrounds --- */
  --color-bg:            #F5F6F8;
  --color-bg-surface:    #FFFFFF;
  --color-bg-raised:     #FFFFFF;
  --color-bg-overlay:    rgba(0, 0, 0, 0.45);

  /* --- Text --- */
  --color-text-primary:  #0F1923;
  --color-text-secondary:#4B5563;
  --color-text-muted:    #9CA3AF;

  /* --- Borders --- */
  --color-border:        #E5E7EB;
  --color-border-strong: #D1D5DB;

  /* --- Status colors --- */
  --color-success:       #0EA66B;
  --color-warning:       #F59E0B;
  --color-danger:        #EF4444;

  /* --- Shadows --- */
  --shadow-sm:  0 1px 3px rgba(0,0,0,0.07), 0 1px 2px rgba(0,0,0,0.05);
  --shadow-md:  0 4px 12px rgba(0,0,0,0.08), 0 2px 4px rgba(0,0,0,0.04);
  --shadow-lg:  0 12px 32px rgba(0,0,0,0.10), 0 4px 8px rgba(0,0,0,0.06);

  /* --- Radius --- */
  --radius-sm:  6px;
  --radius-md:  10px;
  --radius-lg:  16px;
  --radius-xl:  24px;

  /* --- Typography --- */
  --font-display: 'Syne', sans-serif;
  --font-body:    'DM Sans', sans-serif;
  --font-mono:    'JetBrains Mono', monospace;

  /* --- Transitions --- */
  --transition: 0.2s ease;
}

[data-theme="dark"] {
  /* --- Brand colors (dark mode) --- */
  --color-accent:        #10C97E;
  --color-accent-hover:  #0FB872;
  --color-accent-soft:   #0A2E1F;
  --color-accent-text:   #ffffff;

  /* --- Backgrounds --- */
  --color-bg:            #0C1117;
  --color-bg-surface:    #131A22;
  --color-bg-raised:     #1A2330;
  --color-bg-overlay:    rgba(0, 0, 0, 0.65);

  /* --- Text --- */
  --color-text-primary:  #F0F4F8;
  --color-text-secondary:#9DAFC2;
  --color-text-muted:    #4A5568;

  /* --- Borders --- */
  --color-border:        #1E2D3D;
  --color-border-strong: #2A3A4E;

  /* --- Shadows (dark) --- */
  --shadow-sm:  0 1px 3px rgba(0,0,0,0.3);
  --shadow-md:  0 4px 12px rgba(0,0,0,0.4);
  --shadow-lg:  0 12px 32px rgba(0,0,0,0.5);
}