/* ============================================================
   CONTIT DOCS — Design Tokens
   Brand colors source: Template/css/contit.scss
   ============================================================ */

:root {
  /* Brand */
  --color-primary:          #028cff;
  --color-primary-hover:    #0070d9;
  --color-primary-light:    #e0efff;
  --color-secondary:        #35d8fc;
  --color-dark:             #212449;

  /* Status */
  --color-success:          #59c99f;
  --color-success-bg:       #d9fef0;
  --color-warning:          #f7b032;
  --color-warning-bg:       #fffcf7;
  --color-danger:           #f95254;
  --color-danger-bg:        #fff0f0;

  /* Surface — Light */
  --color-bg:               #f6f9fb;
  --color-surface:          #ffffff;
  --color-surface-raised:   #f2f5f7;
  --color-border:           #e5e9ef;
  --color-border-strong:    #c8d0da;

  /* Text — Light */
  --color-text:             #1a1e2e;
  --color-text-secondary:   #4b5563;
  --color-text-muted:       #8a94a6;
  --color-link:             #028cff;
  --color-link-hover:       #0070d9;

  /* Sidebar — Light */
  --sidebar-bg:             #f0f3f7;
  --sidebar-width:          260px;
  --sidebar-text:           #374151;
  --sidebar-text-active:    #028cff;
  --sidebar-item-active-bg: #e0efff;
  --sidebar-section-color:  #9ca3af;

  /* Header */
  --header-bg:              #ffffff;
  --header-height:          60px;
  --header-border:          #e5e9ef;

  /* TOC */
  --toc-width:              220px;
  --toc-text:               #6b7280;
  --toc-text-active:        #028cff;

  /* Code */
  --code-bg:                #0f172a;
  --code-text:              #e2e8f0;
  --code-border:            #1e293b;
  --inline-code-bg:         #f1f5f9;
  --inline-code-text:       #c7254e;
  --inline-code-border:     #e2e8f0;

  /* Typography */
  --font-sans:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono:    'JetBrains Mono', 'Fira Code', 'Cascadia Code', monospace;

  --text-xs:    0.75rem;    /* 12px */
  --text-sm:    0.875rem;   /* 14px */
  --text-base:  1rem;       /* 16px */
  --text-lg:    1.125rem;   /* 18px */
  --text-xl:    1.25rem;    /* 20px */
  --text-2xl:   1.5rem;     /* 24px */
  --text-3xl:   1.875rem;   /* 30px */
  --text-4xl:   2.25rem;    /* 36px */

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

  /* Radius */
  --radius-sm:  4px;
  --radius-md:  8px;
  --radius-lg:  12px;
  --radius-xl:  16px;

  /* Shadows */
  --shadow-sm:  0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.04);
  --shadow-md:  0 4px 12px rgba(0,0,0,.10), 0 2px 4px rgba(0,0,0,.06);
  --shadow-lg:  0 10px 30px rgba(0,0,0,.12), 0 4px 8px rgba(0,0,0,.06);

  /* Transitions */
  --transition-fast:   150ms ease;
  --transition-normal: 250ms ease;
}

/* ============================================================
   DARK MODE
   ============================================================ */
[data-theme="dark"] {
  --color-bg:               #0d1117;
  --color-surface:          #161b22;
  --color-surface-raised:   #1c2230;
  --color-border:           #21293a;
  --color-border-strong:    #30394a;

  --color-text:             #e6edf3;
  --color-text-secondary:   #8b949e;
  --color-text-muted:       #4d5566;
  --color-link:             #58a6ff;
  --color-link-hover:       #79b8ff;

  --sidebar-bg:             #0d1117;
  --sidebar-text:           #8b949e;
  --sidebar-text-active:    #58a6ff;
  --sidebar-item-active-bg: #1a2433;
  --sidebar-section-color:  #3d444d;

  --header-bg:              #161b22;
  --header-border:          #21293a;

  --toc-text:               #4d5566;
  --toc-text-active:        #58a6ff;

  --inline-code-bg:         #1c2230;
  --inline-code-text:       #ff7b72;
  --inline-code-border:     #21293a;

  --shadow-sm:  0 1px 3px rgba(0,0,0,.3);
  --shadow-md:  0 4px 12px rgba(0,0,0,.4);
  --shadow-lg:  0 10px 30px rgba(0,0,0,.5);
}