/* ============================================================
   SciMynd Design Tokens
   Multi-audience adaptive token system
   Schemes · Density · Typography · Themes
   ============================================================ */

/* ---- Font Imports (loaded via <link> in templates) ---- */

/* ---- Default Accent Colors (fallback before themes.json loads) ---- */
:root {
  --color-accent:        #5B7FFF;
  --color-accent-hover:  #7694FF;
  --color-accent-active: #4A6AE0;
  --color-accent-subtle: rgba(91, 127, 255, 0.12);
  --color-accent-border: rgba(91, 127, 255, 0.30);
  --color-accent-text:   #7694FF;
  --color-accent-glow:   rgba(91, 127, 255, 0.10);

  --color-accent2:        #C7956D;
  --color-accent2-hover:  #D4A67E;
  --color-accent2-subtle: rgba(199, 149, 109, 0.12);
  --color-accent2-border: rgba(199, 149, 109, 0.30);
  --color-accent2-text:   #D4A67E;

  --color-text-on-accent: #fff;
}

/* ---- Dark Theme (default) ---- */
:root,
[data-theme="dark"] {
  color-scheme: dark;

  --color-bg-primary:    #0c0e12;
  --color-bg-secondary:  #13161c;
  --color-bg-surface:    #1a1e27;
  --color-bg-elevated:   #222733;
  --color-bg-hover:      #262c3a;
  --color-bg-active:     #2d3447;
  --color-bg-overlay:    rgba(0,0,0,0.6);
  --color-bg-inset:      #0a0c0f;

  --color-text-primary:  #e8ecf4;
  --color-text-secondary:#8d95a6;
  --color-text-muted:    #5c6478;
  --color-text-inverse:  #0c0e12;
  --color-text-on-accent:#fff;

  --color-border:        rgba(255,255,255,0.07);
  --color-border-strong: rgba(255,255,255,0.14);

  --shadow-sm:  0 1px 2px rgba(0,0,0,0.4);
  --shadow-md:  0 4px 16px rgba(0,0,0,0.35);
  --shadow-lg:  0 12px 40px rgba(0,0,0,0.4);
  --shadow-glow: 0 0 20px var(--color-accent-glow);

  --noise-opacity: 0.018;
  --bg-gradient: radial-gradient(ellipse at 50% 0%, #10131a 0%, #0c0e12 60%);
}

/* ---- Light Theme ---- */
[data-theme="light"] {
  color-scheme: light;

  --color-bg-primary:    #faf8f5;
  --color-bg-secondary:  #f2efe9;
  --color-bg-surface:    #ffffff;
  --color-bg-elevated:   #ffffff;
  --color-bg-hover:      #edeae4;
  --color-bg-active:     #e5e1da;
  --color-bg-overlay:    rgba(0,0,0,0.3);
  --color-bg-inset:      #f0ede8;

  --color-text-primary:  #1a1d26;
  --color-text-secondary:#5a5e6b;
  --color-text-muted:    #8a8e9a;
  --color-text-inverse:  #faf8f5;
  --color-text-on-accent:#fff;

  --color-border:        rgba(0,0,0,0.08);
  --color-border-strong: rgba(0,0,0,0.15);

  --shadow-sm:  0 1px 3px rgba(0,0,0,0.06);
  --shadow-md:  0 4px 16px rgba(0,0,0,0.08);
  --shadow-lg:  0 12px 40px rgba(0,0,0,0.1);
  --shadow-glow: 0 0 20px var(--color-accent-glow);

  --noise-opacity: 0.012;
  --bg-gradient: radial-gradient(ellipse at 50% 0%, #fdfcfa 0%, #faf8f5 60%);
}

/* ---- High Contrast ---- */
[data-theme="high-contrast"] {
  color-scheme: dark;

  --color-bg-primary:    #000;
  --color-bg-secondary:  #0a0a0a;
  --color-bg-surface:    #141414;
  --color-bg-elevated:   #1e1e1e;
  --color-bg-hover:      #282828;
  --color-bg-active:     #333;
  --color-bg-overlay:    rgba(0,0,0,0.8);
  --color-bg-inset:      #050505;

  --color-text-primary:  #fff;
  --color-text-secondary:#ccc;
  --color-text-muted:    #999;
  --color-text-inverse:  #000;
  --color-text-on-accent:#000;

  --color-border:        rgba(255,255,255,0.22);
  --color-border-strong: rgba(255,255,255,0.4);

  --shadow-sm:  0 1px 2px rgba(0,0,0,0.6);
  --shadow-md:  0 4px 16px rgba(0,0,0,0.5);
  --shadow-lg:  0 12px 40px rgba(0,0,0,0.6);
  --shadow-glow: 0 0 20px var(--color-accent-glow);

  --noise-opacity: 0;
  --bg-gradient: none;
}

/* ---- Auto Theme (follows system preference) ---- */
[data-theme="auto"] { color-scheme: light dark; }
@media (prefers-color-scheme: light) {
  [data-theme="auto"] {
    --color-bg-primary:    #faf8f5;
    --color-bg-secondary:  #f2efe9;
    --color-bg-surface:    #ffffff;
    --color-bg-elevated:   #ffffff;
    --color-bg-hover:      #edeae4;
    --color-bg-active:     #e5e1da;
    --color-bg-overlay:    rgba(0,0,0,0.3);
    --color-bg-inset:      #f0ede8;
    --color-text-primary:  #1a1d26;
    --color-text-secondary:#5a5e6b;
    --color-text-muted:    #8a8e9a;
    --color-text-inverse:  #faf8f5;
    --color-text-on-accent:#fff;
    --color-border:        rgba(0,0,0,0.08);
    --color-border-strong: rgba(0,0,0,0.15);
    --shadow-sm:  0 1px 3px rgba(0,0,0,0.06);
    --shadow-md:  0 4px 16px rgba(0,0,0,0.08);
    --shadow-lg:  0 12px 40px rgba(0,0,0,0.1);
    --shadow-glow: 0 0 20px var(--color-accent-glow);
    --noise-opacity: 0.012;
    --bg-gradient: radial-gradient(ellipse at 50% 0%, #fdfcfa 0%, #faf8f5 60%);
  }
}
@media (prefers-color-scheme: dark) {
  [data-theme="auto"] {
    --color-bg-primary:    #0c0e12;
    --color-bg-secondary:  #13161c;
    --color-bg-surface:    #1a1e27;
    --color-bg-elevated:   #222733;
    --color-bg-hover:      #262c3a;
    --color-bg-active:     #2d3447;
    --color-bg-overlay:    rgba(0,0,0,0.6);
    --color-bg-inset:      #0a0c0f;
    --color-text-primary:  #e8ecf4;
    --color-text-secondary:#8d95a6;
    --color-text-muted:    #5c6478;
    --color-text-inverse:  #0c0e12;
    --color-text-on-accent:#fff;
    --color-border:        rgba(255,255,255,0.07);
    --color-border-strong: rgba(255,255,255,0.14);
    --shadow-sm:  0 1px 2px rgba(0,0,0,0.4);
    --shadow-md:  0 4px 16px rgba(0,0,0,0.35);
    --shadow-lg:  0 12px 40px rgba(0,0,0,0.4);
    --shadow-glow: 0 0 20px var(--color-accent-glow);
    --noise-opacity: 0.018;
    --bg-gradient: radial-gradient(ellipse at 50% 0%, #10131a 0%, #0c0e12 60%);
  }
}

/* ---- Clinical Semantic Colors (constant across all themes/schemes) ---- */
:root {
  --color-condition:    #e85d75;
  --color-procedure:    #4a9eff;
  --color-medication:   #42b883;
  --color-allergy:      #f0a030;
  --color-observation:  #9b6dff;
  --color-anatomy:      #2ec4e0;
  --color-genetics:     #e06fff;
  --color-emergency:    #ff4444;
  --color-pathology:    #ff8a65;
  --color-rehabilitation:#7bc67e;

  --color-success: #42b883;
  --color-warning: #f0a030;
  --color-danger:  #e85d75;
  --color-info:    #4a9eff;
}

/* ---- 21 Anatomy System Colors ---- */
:root {
  --sys-nervous:       #e85d75;
  --sys-arteries:      #ff4444;
  --sys-muscles:       #c9935a;
  --sys-veins:         #4a9eff;
  --sys-connective:    #f0a030;
  --sys-skeletal:       #e8ecf4;
  --sys-cartilage:     #42b883;
  --sys-lymphatic:     #9b6dff;
  --sys-fascia:        #8d95a6;
  --sys-synovial:      #6ecfff;
  --sys-fat:           #f5d76e;
  --sys-bursa:         #d4a85c;
  --sys-retinaculum:   #b0bec5;
  --sys-integumentary: #ffab91;
  --sys-reproductive:  #f48fb1;
  --sys-endocrine:     #81c784;
  --sys-digestive:     #a1887f;
  --sys-exocrine:      #aed581;
  --sys-respiratory:   #80deea;
  --sys-heart:         #ef5350;
  --sys-urinary:       #ffd54f;
}

/* ---- Typography ---- */
:root {
  --font-display: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-body:    -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-mono:    'JetBrains Mono', 'Fira Code', 'Cascadia Code', 'SF Mono', Menlo, Consolas, monospace;

  --fw-normal:   400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;

  --lh-tight:   1.2;
  --lh-normal:  1.5;
  --lh-relaxed: 1.7;

  --ls-tight:  -0.02em;
  --ls-normal:  0;
  --ls-wide:    0.04em;
  --ls-caps:    0.08em;
}

/* Typography: font-body and font-display set by theme-engine.js from themes.json */

/* ---- Fluid Type Scale ---- */
:root {
  --font-xs:   clamp(0.625rem, 0.6rem + 0.12vw, 0.6875rem);
  --font-sm:   clamp(0.75rem,  0.7rem + 0.25vw, 0.8125rem);
  --font-base: clamp(0.875rem, 0.82rem + 0.25vw, 0.9375rem);
  --font-lg:   clamp(1rem,     0.95rem + 0.25vw, 1.125rem);
  --font-xl:   clamp(1.25rem,  1.1rem + 0.75vw, 1.5rem);
  --font-2xl:  clamp(1.75rem,  1.5rem + 1.25vw, 2.25rem);
  --font-3xl:  clamp(2.25rem,  1.875rem + 1.875vw, 3rem);
  --font-hero: clamp(2.5rem,   2rem + 2.5vw, 3.5rem);
}

/* ---- Density ---- */
:root,
[data-density="default"] {
  --space-unit: 4px;
  --row-h: 36px;
}
[data-density="compact"] {
  --space-unit: 3px;
  --row-h: 28px;
  --font-base: clamp(0.8125rem, 0.78rem + 0.15vw, 0.875rem);
}
[data-density="spacious"] {
  --space-unit: 6px;
  --row-h: 44px;
  --font-base: clamp(0.9375rem, 0.9rem + 0.2vw, 1.0625rem);
}

/* Spacing scale (derived from space-unit) */
:root {
  --space-0:  0;
  --space-1:  calc(1 * var(--space-unit));
  --space-2:  calc(2 * var(--space-unit));
  --space-3:  calc(3 * var(--space-unit));
  --space-4:  calc(4 * var(--space-unit));
  --space-5:  calc(5 * var(--space-unit));
  --space-6:  calc(6 * var(--space-unit));
  --space-8:  calc(8 * var(--space-unit));
  --space-10: calc(10 * var(--space-unit));
  --space-12: calc(12 * var(--space-unit));
  --space-16: calc(16 * var(--space-unit));
  --space-20: calc(20 * var(--space-unit));
  --space-24: calc(24 * var(--space-unit));
}

/* ---- Border Radius ---- */
:root {
  --radius-xs:   4px;
  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-lg:   14px;
  --radius-xl:   20px;
  --radius-full: 9999px;
}

/* ---- Z-Index ---- */
:root {
  --z-base:     0;
  --z-raised:   10;
  --z-panel:    100;
  --z-dropdown: 200;
  --z-modal:    300;
  --z-toast:    400;
  --z-loading:  500;
}

/* ---- Motion ---- */
:root {
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out:   cubic-bezier(0.4, 0, 0.2, 1);
  --ease-spring:   cubic-bezier(0.34, 1.56, 0.64, 1);

  --duration-fast:   150ms;
  --duration-normal: 250ms;
  --duration-slow:   400ms;
}

/* ---- Layout Constants ---- */
:root {
  --header-h: 52px;
  --nav-w:    56px;
  --nav-w-expanded: 220px;
  --chat-w:   320px;
  --sidebar-w: 240px;
  --max-content: 1200px;
  --max-narrow:  720px;
  --max-wide:    1440px;
}

/* ---- Focus Ring ---- */
:root {
  --focus-ring: 0 0 0 2px var(--color-bg-primary), 0 0 0 4px var(--color-accent);
}