/* ============================================================================
   tokens.css — Conviva docs-site design tokens
   ============================================================================
   Colors derived from public_landing_page/conviva_public_landing.css.
   Light theme is canonical; dark theme overrides via [data-theme="dark"].
   ============================================================================ */

:root {
  /* ── Conviva brand ──────────────────────────────────────────────────────── */
  --conviva-purple:        #583160;
  --conviva-purple-dark:   #472850;
  --conviva-purple-light:  #6d3e75;
  --conviva-purple-200:    #e9d5ff;
  --conviva-green-accent:  #5a9b00;
  --conviva-green-dark:    #4a8200;
  --conviva-green-light:   #6bb000;
  --conviva-green-primary: #9cdc00;

  /* ── Gray scale ─────────────────────────────────────────────────────────── */
  --gray-50:  #fafafa;
  --gray-100: #f5f5f5;
  --gray-200: #e5e5e5;
  --gray-300: #d4d4d4;
  --gray-400: #a3a3a3;
  --gray-500: #737373;
  --gray-600: #525252;
  --gray-700: #404040;
  --gray-800: #262626;
  --gray-900: #171717;

  /* ── Semantic colors (light theme) ──────────────────────────────────────── */
  --color-bg:              #ffffff;
  --color-bg-subtle:       var(--gray-50);
  --color-bg-emphasis:     var(--gray-100);
  --color-fg:              var(--gray-900);
  --color-fg-muted:        var(--gray-600);
  --color-fg-subtle:       var(--gray-500);
  --color-border:          var(--gray-200);
  --color-border-strong:   var(--gray-300);

  --color-accent:          var(--conviva-purple);
  --color-accent-hover:    var(--conviva-purple-dark);
  --color-accent-soft:     rgba(88, 49, 96, 0.08);

  --color-link:            var(--conviva-green-dark);
  --color-link-hover:      var(--conviva-green-accent);

  /* ── Sidebar / topbar tokens ────────────────────────────────────────────── */
  --color-topbar-bg:       #ffffff;
  --color-topbar-border:   var(--gray-200);
  --color-sidebar-bg:      var(--color-bg);
  --color-sidebar-fg:      var(--gray-700);
  --color-sidebar-fg-active: var(--conviva-green-accent);
  --color-sidebar-bg-active: rgba(90, 155, 0, 0.08);

  /* ── Code / kbd / callout ───────────────────────────────────────────────── */
  --color-code-bg:         var(--gray-100);
  --color-code-fg:         var(--gray-800);
  --color-kbd-bg:          var(--gray-100);
  --color-kbd-border:      var(--gray-300);

  --color-callout-note-bg: rgba(88, 49, 96, 0.05);
  --color-callout-note-border: var(--conviva-purple);
  --color-callout-warn-bg: #fffbeb;
  --color-callout-warn-border: #f59e0b;

  /* ── Typography ─────────────────────────────────────────────────────────── */
  --font-sans: 'Inter', 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', 'SF Mono', Menlo, Consolas, monospace;

  --fs-xs:   0.75rem;   /* 12 */
  --fs-sm:   0.875rem;  /* 14 */
  --fs-base: 1rem;      /* 16 */
  --fs-lg:   1.125rem;  /* 18 */
  --fs-xl:   1.25rem;   /* 20 */
  --fs-2xl:  1.5rem;    /* 24 */
  --fs-3xl:  2rem;      /* 32 */
  --fs-4xl:  2.5rem;    /* 40 */

  --lh-tight:   1.25;
  --lh-snug:    1.4;
  --lh-normal:  1.6;
  --lh-relaxed: 1.75;

  /* ── Spacing ────────────────────────────────────────────────────────────── */
  --sp-1:  0.25rem;
  --sp-2:  0.5rem;
  --sp-3:  0.75rem;
  --sp-4:  1rem;
  --sp-5:  1.25rem;
  --sp-6:  1.5rem;
  --sp-8:  2rem;
  --sp-10: 2.5rem;
  --sp-12: 3rem;
  --sp-16: 4rem;

  /* ── Radii / shadows / motion ───────────────────────────────────────────── */
  --radius-sm: 0.375rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;
  --radius-xl: 1rem;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);

  --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-base: 250ms cubic-bezier(0.4, 0, 0.2, 1);

  /* ── Layout dimensions (Lucide-style) ───────────────────────────────────── */
  --topbar-h:        56px;
  --sidebar-w:       290px;
  --rightrail-w:     220px;
  --content-max-w:   760px;
}

[data-theme='dark'] {
  --color-bg:              #0c0c0d;
  --color-bg-subtle:       #161618;
  --color-bg-emphasis:     #1f1f23;
  --color-fg:              #f5f5f7;
  --color-fg-muted:        #a1a1aa;
  --color-fg-subtle:       #71717a;
  --color-border:          #27272a;
  --color-border-strong:   #3f3f46;

  --color-accent:          #b794c9;
  --color-accent-hover:    #d4b3e6;
  --color-accent-soft:     rgba(183, 148, 201, 0.12);

  --color-link:            var(--conviva-green-primary);
  --color-link-hover:      var(--conviva-green-light);

  --color-topbar-bg:       #0c0c0d;
  --color-topbar-border:   #27272a;
  --color-sidebar-bg:      #0c0c0d;
  --color-sidebar-fg:      #d4d4d8;
  --color-sidebar-fg-active: var(--conviva-green-primary);
  --color-sidebar-bg-active: rgba(156, 220, 0, 0.12);

  --color-code-bg:         #1f1f23;
  --color-code-fg:         #f5f5f7;
  --color-kbd-bg:          #1f1f23;
  --color-kbd-border:      #3f3f46;

  --color-callout-note-bg: rgba(183, 148, 201, 0.08);
  --color-callout-note-border: #b794c9;
  --color-callout-warn-bg: rgba(245, 158, 11, 0.1);
  --color-callout-warn-border: #f59e0b;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.6);
}