/* ============================================================================
   AgentTrust Design System — Colors & Type
   Source of truth: landing/index.html on Arthention17/agentrust@main
   ============================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
  /* ---- BACKGROUNDS (dark, near-black navy) ---- */
  --at-bg:          #050810;   /* page */
  --at-bg-soft:     #070B15;
  --at-surface:     #0A1020;   /* cards */
  --at-surface-2:   #0F172A;   /* hover / raised cards */
  --at-surface-3:   #111B30;
  --at-code-bg:     #04070E;   /* code blocks */

  /* ---- BORDERS ---- */
  --at-border:          rgba(148,163,184,.08);
  --at-border-strong:   rgba(148,163,184,.16);
  --at-border-accent:   rgba(16,185,129,.28);

  /* ---- TEXT ---- */
  --at-text:    #F1F5F9;   /* fg-1 primary */
  --at-text-2:  #94A3B8;   /* fg-2 secondary */
  --at-text-3:  #64748B;   /* fg-3 muted */
  --at-text-4:  #475569;   /* fg-4 very muted */
  --at-text-on-accent: #042014;  /* inverted text on accent buttons */

  /* ---- BRAND ACCENT (emerald) ---- */
  --at-accent:        #10B981;
  --at-accent-soft:   #34D399;
  --at-accent-deep:   #059669;
  --at-accent-glow:   rgba(16,185,129,.14);
  --at-accent-bg:     rgba(16,185,129,.08);

  /* ---- SUPPORTING HUES (used sparingly for category coding) ---- */
  --at-blue:      #60A5FA;
  --at-blue-deep: #3B82F6;
  --at-purple:    #A78BFA;
  --at-amber:     #FBBF24;
  --at-red:       #F87171;

  /* ---- SEMANTIC STATE COLORS ---- */
  --at-success:  #10B981;
  --at-info:     #60A5FA;
  --at-warn:     #FBBF24;
  --at-danger:   #F87171;

  /* ---- RADII ---- */
  --at-r-sm: 8px;
  --at-r:    12px;
  --at-r-lg: 16px;
  --at-r-xl: 22px;
  --at-r-pill: 9999px;

  /* ---- ELEVATION ---- */
  --at-shadow-sm: 0 2px 6px rgba(0,0,0,.3);
  --at-shadow-md: 0 8px 24px -8px rgba(0,0,0,.4);
  --at-shadow-lg: 0 24px 60px -20px rgba(0,0,0,.6), 0 8px 24px -8px rgba(0,0,0,.4);
  --at-glow-accent: 0 6px 18px -6px rgba(16,185,129,.5);

  /* ---- SPACING (4pt) ---- */
  --at-s-1: 4px;
  --at-s-2: 8px;
  --at-s-3: 12px;
  --at-s-4: 16px;
  --at-s-5: 20px;
  --at-s-6: 24px;
  --at-s-8: 32px;
  --at-s-10: 40px;
  --at-s-12: 48px;
  --at-s-16: 64px;
  --at-s-20: 80px;

  /* ---- MOTION ---- */
  --at-ease: cubic-bezier(.2,.8,.2,1);
  --at-dur-1: 150ms;
  --at-dur-2: 200ms;
  --at-dur-3: 300ms;

  /* ---- TYPE FAMILIES ---- */
  --at-font-display: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  --at-font-body:    'Inter', system-ui, -apple-system, sans-serif;
  --at-font-mono:    'JetBrains Mono', ui-monospace, Consolas, monospace;

  /* ---- SEMANTIC TYPE ---- */
  --at-h1: 700 clamp(36px, 5.6vw, 68px)/1.04 var(--at-font-display);
  --at-h2: 700 clamp(28px, 3.8vw, 42px)/1.1 var(--at-font-display);
  --at-h3: 600 22px/1.2 var(--at-font-display);
  --at-h4: 600 16px/1.3 var(--at-font-display);
  --at-eyebrow: 600 11.5px/1 var(--at-font-display);
  --at-body:  400 15px/1.6 var(--at-font-body);
  --at-body-lg: 400 16.5px/1.65 var(--at-font-body);
  --at-small: 500 13px/1.5 var(--at-font-body);
  --at-caption: 500 11.5px/1.2 var(--at-font-display);
  --at-code:  500 12.5px/1.7 var(--at-font-mono);
  --at-label-mono: 500 11px/1 var(--at-font-mono);

  /* ---- LETTER SPACING ---- */
  --at-track-tight: -0.04em;
  --at-track-semi:  -0.02em;
  --at-track-0:      0;
  --at-track-wide:   0.08em;
  --at-track-wider:  0.16em;
}

/* ---- Element defaults (opt-in; include via class .at-root) ---- */
.at-root { background: var(--at-bg); color: var(--at-text); font: var(--at-body); -webkit-font-smoothing: antialiased; }
.at-root h1 { font: var(--at-h1); letter-spacing: var(--at-track-tight); color: #fff; }
.at-root h2 { font: var(--at-h2); letter-spacing: -0.03em; color: #fff; }
.at-root h3 { font: var(--at-h3); letter-spacing: var(--at-track-semi); color: #fff; }
.at-root h4 { font: var(--at-h4); color: #fff; }
.at-root p  { font: var(--at-body); color: var(--at-text-2); }
.at-root code,.at-root pre,.at-root .mono { font: var(--at-code); }
.at-root .at-eyebrow { font: var(--at-eyebrow); letter-spacing: var(--at-track-wider); text-transform: uppercase; color: var(--at-accent); }

/* ---- Gradient text (used on hero / section titles) ---- */
.at-grad-emerald {
  background: linear-gradient(135deg, var(--at-accent) 0%, var(--at-blue) 60%, var(--at-purple) 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.at-grad-duo {
  background: linear-gradient(135deg, var(--at-accent), var(--at-blue));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* ---- Page background field (radial accent glows) ---- */
.at-page-bg::before{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:-1;
  background:
    radial-gradient(1200px 600px at 50% -10%, rgba(16,185,129,.06), transparent 60%),
    radial-gradient(900px 500px at 90% 40%, rgba(96,165,250,.04), transparent 60%),
    radial-gradient(800px 400px at 10% 80%, rgba(167,139,250,.03), transparent 60%);
}

::selection { background: rgba(16,185,129,.25); color:#fff; }