/* Procurex.ai Brand Design Tokens — auto-generated by Code Studio */
:root {
  --primary:        #3a8faf;
  --primary-dark:   #2a6d8a;
  --secondary:      #1cb5aa;
  --accent:         #1cb5aa;
  --background:     #f4fafb;
  --surface:        #ffffff;
  --surface-raised: #f1f5f9;
  --text-primary:   #1a3a4a;
  --text-secondary: #4a7080;
  --text-muted:     #9ca3af;
  --border:         #99d2d7;
  --border-strong:  #d1d5db;
  --success:        #1cb5aa;
  --warning:        #e6a817;
  --error:          #d94452;
  --radius:         8px;
  --radius-sm:      4px;
  --radius-lg:      16px;
  --radius-xl:      24px;
  --shadow-sm:      0 1px 3px rgba(0,0,0,0.08);
  --shadow:         0 4px 16px rgba(0,0,0,0.08);
  --shadow-lg:      0 8px 32px rgba(0,0,0,0.12);
  --font-heading:   'Montserrat', sans-serif;
  --font-body:      'Open Sans', sans-serif;
  --font-mono:      'JetBrains Mono', 'Fira Code', monospace;
  --transition:     0.2s ease;
  --max-width:      1280px;
  --nav-height:     64px;
}

/* Reset & base */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { font-family: var(--font-body); background: var(--background);
       color: var(--text-primary); line-height: 1.6; }
h1,h2,h3,h4,h5,h6 { font-family: var(--font-heading); font-weight: 700;
                     line-height: 1.2; color: var(--text-primary); }
a { color: var(--primary); text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; height: auto; }

/* Utility classes */
.container { max-width: var(--max-width); margin: 0 auto; padding: 0 24px; }
.btn { display: inline-flex; align-items: center; gap: 8px;
       padding: 10px 20px; border-radius: var(--radius); font-weight: 600;
       font-size: 15px; cursor: pointer; border: none;
       transition: var(--transition); text-decoration: none; }
.btn-primary { background: var(--primary); color: #fff; }
.btn-primary:hover { filter: brightness(1.1); transform: translateY(-1px);
                    box-shadow: var(--shadow); text-decoration: none; }
.btn-secondary { background: transparent; color: var(--primary);
                 border: 2px solid var(--primary); }
.btn-secondary:hover { background: var(--primary); color: #fff;
                      text-decoration: none; }
.card { background: #fff; border-radius: var(--radius);
        box-shadow: var(--shadow); padding: 24px; }
.section { padding: 80px 0; }
.section-sm { padding: 48px 0; }
.text-center { text-align: center; }
.sr-only { position: absolute; width: 1px; height: 1px;
           padding: 0; margin: -1px; overflow: hidden;
           clip: rect(0,0,0,0); border: 0; }