/* ============================================================================
   TraderAlign — Design Tokens (canonical)
   Single source of truth. Link this in every page's <head>.
   ============================================================================ */

:root {
  --background:            #0A0A0B;
  --background-secondary:  #0F0F10;
  --background-elevated:   #141415;
  --background-surface:    #1A1A1C;
  --background-deep:       #1E1E21;

  --primary:               #60A5FA;
  --primary-hover:         #60A5FA;
  --primary-muted:         #60A5FA;
  --primary-foreground:    #FFFFFF;

  --foreground:            #D1D4DC;
  --foreground-muted:      #B2B5BE;
  --foreground-dim:        #787B86;

  --positive:              #26A69A;
  --negative:              #EF5350;
  --warning:               #E09B3A;

  --card:                  #1E222D;
  --popover:               #2A2E39;
  --secondary:             #2A2E39;
  --muted:                 #2A2E39;
  --muted-foreground:      #787B86;
  --accent:                #60A5FA;
  --accent-foreground:     #FFFFFF;
  --destructive:           #EF5350;
  --border:                #2A2E39;
  --input:                 #2A2E39;
  --ring:                  #60A5FA;

  --chart-1:               #60A5FA;
  --chart-2:               #26A69A;
  --chart-3:               #EF5350;
  --chart-4:               #E09B3A;

  --sidebar:               #181C28;
  --sidebar-primary:       #60A5FA;
  --sidebar-border:        #2A2E39;

  --radius:                0.5rem;
  --radius-sm:             calc(var(--radius) - 4px);
  --radius-md:             calc(var(--radius) - 2px);
  --radius-lg:             var(--radius);
  --radius-xl:             calc(var(--radius) + 4px);
  --radius-full:           9999px;

  --font-sans:  'Inter', system-ui, -apple-system, sans-serif;
  --font-mono:  'JetBrains Mono', ui-monospace, monospace;

  --shadow-md:  0 4px 16px rgba(0,0,0,.35);
  --shadow-lg:  0 12px 40px rgba(0,0,0,.45);

  --container-max: 80rem;
  --t-fast: .15s ease;
  --t:      .22s ease;
}

*{box-sizing:border-box;margin:0;padding:0}
html{background:var(--background)}
body{background:var(--background);color:var(--foreground);font-family:var(--font-sans);font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--ring);outline-offset:2px;border-radius:var(--radius-sm)}
.container{max-width:var(--container-max);margin-inline:auto;padding-inline:1rem}
@media(min-width:640px){.container{padding-inline:1.5rem}}
@media(min-width:1024px){.container{padding-inline:2rem}}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;font-family:inherit;font-weight:600;font-size:.95rem;border:1px solid transparent;border-radius:var(--radius-md);cursor:pointer;transition:background var(--t),border-color var(--t),color var(--t),transform var(--t-fast)}
.btn:active{transform:translateY(1px)}
.btn-lg{height:2.75rem;padding-inline:2rem;font-size:1rem}
.btn-md{height:2.5rem;padding-inline:1.1rem}
.btn-primary{background:var(--primary);color:var(--primary-foreground)}
.btn-primary:hover{background:var(--primary-hover);transform:translateY(-1px)}
.btn-outline{background:transparent;color:var(--foreground);border-color:var(--border)}
.btn-outline:hover{background:var(--background-surface)}