/*
  Agent Relay Brand Color Guide

  Reuse guidance:
  - Copy the whole file into another project.
  - Use the :root block for the standard Agent Relay look.
  - Keep the semantic token names; that is the main design pattern in the current site.
*/

:root {
  /* Logo */
  --logo-primary: #4a90c2;
  --logo-secondary: rgba(74, 144, 194, 0.5);

  /* Brand accents */
  --accent-warm: #c1674b;
  --accent-warm-deep: #b45542;
  --accent-warm-soft: #cd866a;

  --accent-ink: #111827;
  --accent-stone: #7a7a72;
  --accent-stone-light: #f5f4f0;
  --accent-stone-dark: #5a5a54;

  /* Status */
  --status-red: #ff5f57;
  --status-yellow: #febc2e;
  --status-green: #28c840;

  /* Console / terminal */
  --console-bg: #1a1c22;
  --console-panel: #15171c;
  --console-line: #2a2d35;
  --console-fg: #c9d1d9;
  --console-muted: #555555;
  --console-keyword: #7eb8da;
  --console-string: #ce9178;
  --console-type: #4ec9b0;
  --console-method: #dcdcaa;

  /* Primary (Curious Blue) scale */
  --primary-50: #f3f7fc;
  --primary-100: #e7eff7;
  --primary-200: #c9ddee;
  --primary-300: #99c2e0;
  --primary-400: #62a1ce;
  --primary-500: #4a90c2;
  --primary-600: #2d6a9c;
  --primary-700: #26557e;
  --primary-800: #234969;
  --primary-900: #223e58;
  --primary-950: #16283b;

  /* Secondary (warm) scale */
  --secondary-50: #fbf5f1;
  --secondary-100: #f5e8df;
  --secondary-200: #eacebe;
  --secondary-300: #dcad95;
  --secondary-400: #cd866a;
  --secondary-500: #c1674b;
  --secondary-600: #b45542;
  --secondary-700: #964338;
  --secondary-800: #793833;
  --secondary-900: #62302c;
  --secondary-950: #341716;

  /* Neutral (Pampas) scale */
  --neutral-50: #f5f2ee;
  --neutral-100: #efebe5;
  --neutral-200: #dfd5c9;
  --neutral-300: #cab9a7;
  --neutral-400: #b49a83;
  --neutral-500: #a5836a;
  --neutral-600: #98735e;
  --neutral-700: #7f5e4f;
  --neutral-800: #684e44;
  --neutral-900: #554139;
  --neutral-950: #2d211d;

  /* Semantic tokens */
  --bg: #f9fafb;
  --bg-elevated: rgba(255, 255, 255, 0.8);
  --fg: #111827;
  --fg-muted: #4b5563;
  --fg-faint: #9ca3af;
  --primary: var(--primary-500);
  --primary-hover: var(--primary-600);
  --primary-bg: var(--primary-500);
  --primary-fg: #ffffff;
  --secondary-bg: var(--secondary-100);
  --secondary-fg: var(--secondary-600);
  --line: rgba(74, 144, 194, 0.1);
  --surface: #f3f4f6;
  --surface-strong: #ffffff;
  --section-bg: #ffffff;
  --code-bg: #f3f4f6;
  --code-fg: #1f2937;
  --inline-code-bg: rgba(74, 144, 194, 0.07);
  --inline-code-fg: var(--primary-800);
  --card-bg: rgba(255, 255, 255, 0.9);
  --card-border: rgba(74, 144, 194, 0.1);
  --card-hover-border: rgba(74, 144, 194, 0.28);
  --note-bg: rgba(74, 144, 194, 0.05);
  --link-underline: rgba(74, 144, 194, 0.3);
  --nav-solid-bg: #ffffff;
  --nav-bg: rgba(255, 255, 255, 0.76);
  --nav-fg: #111827;
  --nav-muted: rgba(17, 24, 39, 0.72);
  --nav-subtle: rgba(17, 24, 39, 0.52);
  --nav-surface: rgba(17, 24, 39, 0.04);
  --nav-surface-hover: rgba(17, 24, 39, 0.08);
  --nav-border: rgba(74, 144, 194, 0.16);
  --nav-border-strong: rgba(74, 144, 194, 0.3);
  --nav-link-hover: var(--primary-700);
  --nav-shadow: rgba(35, 73, 105, 0.14);
  --nav-inset: rgba(255, 255, 255, 0.74);
  --nav-logo-wordmark: var(--accent-ink);
  --nav-logo-mark: var(--primary-500);
  --footer-bg: var(--primary-500);
  --footer-fg: #ffffff;
  --footer-muted: rgba(255, 255, 255, 0.7);
  --footer-faint: rgba(255, 255, 255, 0.4);
  --footer-line: rgba(255, 255, 255, 0.12);
  --btn-bg: var(--primary-500);
  --btn-hover: var(--primary-600);
  --hero-gradient: linear-gradient(180deg, var(--bg) 0%, var(--primary-50) 100%);
  --landing-hero-bg: linear-gradient(180deg, #f3f8fc 0%, #e8f1f8 18%, #d4e4f1 54%, #b5cee2 100%);
  --secondary-surface: #ebf3f8;
  --showcase-bg: #f2efe9;
  --overlay: rgba(0, 0, 0, 0.3);
  --shadow-strong: 0 16px 64px rgba(0, 0, 0, 0.2);
  --terminal-bg: var(--console-bg);
  --terminal-panel: var(--console-panel);
  --terminal-line: var(--console-line);
  --terminal-fg: var(--console-fg);
  --terminal-muted: #555555;
  --terminal-keyword: var(--console-keyword);
  --terminal-string: var(--console-string);
  --terminal-type: var(--console-type);
  --terminal-method: var(--console-method);
  --agent-card-bg: rgba(255, 255, 255, 0.88);
  --agent-card-header: rgba(245, 243, 238, 0.95);
  --agent-card-border: rgba(45, 79, 62, 0.1);
  --agent-card-border-active: rgba(45, 79, 62, 0.22);
  --agent-card-title: #2d4f3e;
  --agent-card-muted: #8a907e;
  --agent-card-status: #3a8c62;
  --agent-card-glow: rgba(58, 140, 98, 0.35);
  --syntax-string: #b45309;
  --syntax-method: #6b21a8;
  --syntax-comment: #9ca3af;
}

:root[data-theme='dark'] {
  --bg: #08111a;
  --bg-elevated: rgba(12, 20, 30, 0.82);
  --fg: #edf4fb;
  --fg-muted: #a8b8c8;
  --fg-faint: #77879a;
  --primary: #74b8e2;
  --primary-hover: #94cbef;
  --primary-bg: #3b789f;
  --primary-fg: #ffffff;
  --secondary-bg: rgba(193, 103, 75, 0.14);
  --secondary-fg: #f0b39f;
  --line: rgba(116, 184, 226, 0.18);
  --surface: #0f1b29;
  --surface-strong: #132234;
  --section-bg: #0b141f;
  --code-bg: #0a182c;
  --code-fg: #dbe5f0;
  --inline-code-bg: rgba(116, 184, 226, 0.14);
  --inline-code-fg: #c6e6fa;
  --card-bg: rgba(15, 27, 41, 0.84);
  --card-border: rgba(116, 184, 226, 0.16);
  --card-hover-border: rgba(116, 184, 226, 0.32);
  --note-bg: rgba(116, 184, 226, 0.1);
  --link-underline: rgba(116, 184, 226, 0.35);
  --nav-solid-bg: #0c1c2a;
  --nav-bg: rgba(12, 28, 42, 0.92);
  --nav-fg: #edf4fb;
  --nav-muted: rgba(237, 244, 251, 0.78);
  --nav-subtle: rgba(237, 244, 251, 0.54);
  --nav-surface: rgba(255, 255, 255, 0.06);
  --nav-surface-hover: rgba(255, 255, 255, 0.1);
  --nav-border: rgba(255, 255, 255, 0.14);
  --nav-border-strong: rgba(255, 255, 255, 0.24);
  --nav-link-hover: #9fd4f5;
  --nav-shadow: rgba(0, 0, 0, 0.36);
  --nav-inset: rgba(255, 255, 255, 0.05);
  --nav-logo-wordmark: var(--nav-fg);
  --nav-logo-mark: var(--primary);
  --footer-bg: linear-gradient(180deg, #10263a 0%, #08111a 100%);
  --footer-fg: #edf4fb;
  --footer-muted: rgba(237, 244, 251, 0.72);
  --footer-faint: rgba(237, 244, 251, 0.42);
  --footer-line: rgba(116, 184, 226, 0.18);
  --btn-bg: #3b789f;
  --btn-hover: #366d98;
  --hero-gradient: linear-gradient(180deg, #08111a 0%, #10263a 56%, #0a1724 100%);
  --landing-hero-bg: linear-gradient(180deg, #08111a 0%, #10263a 56%, #0a1724 100%);
  --secondary-surface: #152532;
  --showcase-bg: #101821;
  --overlay: rgba(2, 6, 12, 0.56);
  --shadow-strong: 0 18px 64px rgba(0, 0, 0, 0.42);
  --terminal-bg: #0b1017;
  --terminal-panel: #121a24;
  --terminal-line: #263445;
  --terminal-fg: #d7e0ea;
  --terminal-muted: #7f8b99;
  --terminal-keyword: #7eb8da;
  --terminal-string: #e4a986;
  --terminal-type: #6bd4bc;
  --terminal-method: #e6d78d;
  --agent-card-bg: rgba(9, 17, 27, 0.84);
  --agent-card-header: rgba(15, 28, 40, 0.94);
  --agent-card-border: rgba(116, 184, 226, 0.16);
  --agent-card-border-active: rgba(116, 184, 226, 0.3);
  --agent-card-title: #dbe9f4;
  --agent-card-muted: #93a7b9;
  --agent-card-status: #63d18b;
  --agent-card-glow: rgba(99, 209, 139, 0.28);
  --syntax-string: #f2b17a;
  --syntax-method: #c9a7ff;
  --syntax-comment: #7c8a9b;
}