/**
 * CITED Health — Design Tokens
 *
 * CSS custom properties for the CITED design system.
 * Zero Django dependency — usable in any HTML/CSS context.
 *
 * All tokens are prefixed with --cited- to avoid collisions.
 * Evidence grade colors are fixed and must never change per-site.
 */

/* === Typography === */

:root {
  --cited-font-sans: "Inter", system-ui, -apple-system, sans-serif;
  --cited-font-serif: "Source Serif 4", Georgia, "Times New Roman", serif;
  --cited-font-mono: "Geist Mono", "Fira Code", ui-monospace, monospace;

  --cited-text-xs:   12px;
  --cited-text-sm:   14px;
  --cited-text-base: 16px;
  --cited-text-lg:   18px;
  --cited-text-xl:   20px;
  --cited-text-2xl:  24px;
  --cited-text-3xl:  30px;
  --cited-text-4xl:  36px;

  --cited-leading-tight:   1.25;
  --cited-leading-normal:  1.5;
  --cited-leading-relaxed: 1.75;

  --cited-font-light:     300;
  --cited-font-normal:    400;
  --cited-font-medium:    500;
  --cited-font-semibold:  600;
  --cited-font-bold:      700;
  --cited-font-extrabold: 800;
}

/* === Evidence Grade Colors (CRITICAL — fixed, never change per-site) === */

:root {
  /* Grade A — Strong Evidence */
  --cited-grade-a:           #10B981;
  --cited-grade-a-bg:        #D1FAE5;
  --cited-grade-a-text:      #065F46;
  --cited-grade-a-dark-bg:   rgba(16, 185, 129, 0.2);
  --cited-grade-a-dark-text: #6EE7B7;

  /* Grade B — Good Evidence */
  --cited-grade-b:           #3B82F6;
  --cited-grade-b-bg:        #DBEAFE;
  --cited-grade-b-text:      #1E40AF;
  --cited-grade-b-dark-bg:   rgba(59, 130, 246, 0.2);
  --cited-grade-b-dark-text: #93C5FD;

  /* Grade C — Some Evidence */
  --cited-grade-c:           #F59E0B;
  --cited-grade-c-bg:        #FEF3C7;
  --cited-grade-c-text:      #92400E;
  --cited-grade-c-dark-bg:   rgba(245, 158, 11, 0.2);
  --cited-grade-c-dark-text: #FCD34D;

  /* Grade D — Early Evidence */
  --cited-grade-d:           #6B7280;
  --cited-grade-d-bg:        #F3F4F6;
  --cited-grade-d-text:      #374151;
  --cited-grade-d-dark-bg:   rgba(107, 114, 128, 0.3);
  --cited-grade-d-dark-text: #D1D5DB;

  /* Grade F — Evidence Against */
  --cited-grade-f:           #EF4444;
  --cited-grade-f-bg:        #FEE2E2;
  --cited-grade-f-text:      #991B1B;
  --cited-grade-f-dark-bg:   rgba(239, 68, 68, 0.2);
  --cited-grade-f-dark-text: #FCA5A5;
}

/* === Semantic Colors === */

:root {
  --cited-color-positive: #10B981;
  --cited-color-negative: #EF4444;
  --cited-color-neutral:  #9CA3AF;
  --cited-color-warning:  #F59E0B;
  --cited-color-info:     #3B82F6;
}

/* === Surface Colors — Light Mode === */

:root {
  --cited-bg-body:    #FFFFFF;
  --cited-bg-card:    #FFFFFF;
  --cited-bg-muted:   #F8FAFC;
  --cited-bg-code:    #0F172A;

  --cited-text-primary:   #111827;
  --cited-text-secondary: #4B5563;
  --cited-text-muted:     #9CA3AF;

  --cited-border:       #E5E7EB;
  --cited-border-light: #F3F4F6;
}

/* === Surface Colors — Dark Mode === */

.dark {
  --cited-bg-body:  #0F0F0F;
  --cited-bg-card:  #1A1A1A;
  --cited-bg-muted: #1E1E1E;

  --cited-text-primary:   #F3F4F6;
  --cited-text-secondary: #9CA3AF;
  --cited-text-muted:     #6B7280;

  --cited-border:       #374151;
  --cited-border-light: #1F2937;

  /* Grade colors — dark variants */
  --cited-grade-a-bg:   var(--cited-grade-a-dark-bg);
  --cited-grade-a-text: var(--cited-grade-a-dark-text);
  --cited-grade-b-bg:   var(--cited-grade-b-dark-bg);
  --cited-grade-b-text: var(--cited-grade-b-dark-text);
  --cited-grade-c-bg:   var(--cited-grade-c-dark-bg);
  --cited-grade-c-text: var(--cited-grade-c-dark-text);
  --cited-grade-d-bg:   var(--cited-grade-d-dark-bg);
  --cited-grade-d-text: var(--cited-grade-d-dark-text);
  --cited-grade-f-bg:   var(--cited-grade-f-dark-bg);
  --cited-grade-f-text: var(--cited-grade-f-dark-text);
}

/* === Spacing Scale === */

:root {
  --cited-space-xs:  4px;
  --cited-space-sm:  8px;
  --cited-space-md:  16px;
  --cited-space-lg:  24px;
  --cited-space-xl:  32px;
  --cited-space-2xl: 48px;
  --cited-space-3xl: 64px;
}

/* === Border Radius === */

:root {
  --cited-radius-sm:   6px;
  --cited-radius-md:   8px;
  --cited-radius-lg:   12px;
  --cited-radius-xl:   16px;
  --cited-radius-full: 9999px;
}

/* === Shadows === */

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

/* === Motion / Animation === */

:root {
  --cited-duration-micro:   150ms;
  --cited-duration-default: 200ms;
  --cited-duration-expand:  300ms;
  --cited-duration-enter:   200ms;

  --cited-easing-default: ease-out;
  --cited-easing-expand:  ease-in-out;
}

/* === Affiliate Brand Colors === */

:root {
  --cited-color-iherb:  #16A34A;
  --cited-color-amazon: #F59E0B;
}

/* === Code Block Syntax Colors === */

:root {
  --cited-syntax-keyword:  #A5B4FC;
  --cited-syntax-string:   #6EE7B7;
  --cited-syntax-number:   #FBBF24;
  --cited-syntax-function: #F472B6;
  --cited-syntax-comment:  #64748B;
}

/* === Reduced Motion === */

@media (prefers-reduced-motion: reduce) {
  :root {
    --cited-duration-micro:   0ms;
    --cited-duration-default: 0ms;
    --cited-duration-expand:  0ms;
    --cited-duration-enter:   0ms;
  }
}