/*
 * Design Tokens — BioHacking Theme
 * 
 * Все визуальные переменные в одном месте.
 * Меняешь тут — меняется везде на сайте.
 * 
 * Структура:
 * - Light theme (по умолчанию)
 * - Dark theme (через data-theme="dark")
 */

/* ============================================================
   LIGHT THEME (default)
   ============================================================ */
:root {
    /* --- Backgrounds --- */
    --bg-base:         #F8FAFC;
    --bg-surface:      #FFFFFF;
    --bg-surface-alt:  #F1F5F9;
    --bg-elevated:     #FFFFFF;

    /* --- Text --- */
    --text-header:     #070a13;
    --text-main:       #0F172A;
    --text-muted:      #475569;
    --text-hint:       #94A3B8;

    /* --- Primary (Health/Organic Green) --- */
    --primary:         #12803a;
    --primary-hover:   #095e2a;
    --primary-soft:    #F0FDF4;
    --primary-mid:     #DCFCE7;
    --primary-text:    #14532D;

    /* --- Accent (Tech/Science Blue) --- */
    --accent:          #1D4ED8;
    --accent-soft:     #EFF6FF;
    --accent-mid:      #DBEAFE;
    --accent-text:     #1E3A8A;

    /* --- Bio-Accent (CTA Orange) --- */
    --bio-accent:      #EA580C;
    --bio-accent-soft: #FFF7ED;
    --bio-accent-hover:#C2410C;

    /* --- Neutral --- */
    --neutral:         #334155;
    --neutral-soft:    #F8FAFC;

    /* --- Score Colors --- */
    --score-high:      #15803D;
    --score-mid:       #B45309;
    --score-low:       #B91C1C;

    /* --- Borders --- */
    --border:          #E2E8F0;
    --border-strong:   #CBD5E1;

    /* --- Shadows --- */
    --shadow-sm:       0 1px 2px 0 rgb(0 0 0 / 0.05);
    --shadow-md:       0 4px 6px -1px rgb(0 0 0 / 0.08), 0 2px 4px -2px rgb(0 0 0 / 0.05);
    --shadow-lg:       0 10px 15px -3px rgb(0 0 0 / 0.08), 0 4px 6px -4px rgb(0 0 0 / 0.05);

    /* --- Radii --- */
    --r-sm:   6px;
    --r-md:   10px;
    --r-lg:   16px;
    --r-xl:   24px;
    --r-pill: 999px;

    /* --- Typography --- */
    --font-sans:  'DM Sans', system-ui, -apple-system, sans-serif;
    --font-serif: 'Fraunces', Georgia, 'Times New Roman', serif;
    --font-mono:  'DM Mono', 'Fira Code', monospace;

    /* --- Transitions --- */
    --transition-fast:   0.15s ease;
    --transition-normal: 0.3s ease;

    /* --- Layout --- */
    --content-width:  768px;
    --wide-width:     1200px;
    --header-height:  64px;
}


/* ============================================================
   DARK THEME
   ============================================================ */
[data-theme="dark"] {
    --bg-base:         #0D1117;
    --bg-surface:      #161B22;
    --bg-surface-alt:  #1C2330;
    --bg-elevated:     #21262D;

    --text-header:     #feffff;
    --text-main:       #E6EDF3;
    --text-muted:      #9fa7b1;
    --text-hint:       #484F58;

    --primary:         #16A34A;
    --primary-hover:   #047e31;
    --primary-soft:    rgba(22, 163, 74, 0.08);
    --primary-mid:     rgba(22, 163, 74, 0.16);
    --primary-text:    #4ADE80;

    --accent:          #60A5FA;
    --accent-soft:     rgba(96, 165, 250, 0.08);
    --accent-mid:      rgba(96, 165, 250, 0.15);
    --accent-text:     #93C5FD;

    --bio-accent:      #F97316;
    --bio-accent-soft: rgba(249, 115, 22, 0.08);
    --bio-accent-hover:#EA580C;

    --neutral:         #8B949E;
    --neutral-soft:    #21262D;

    --score-high:      #4ADE80;
    --score-mid:       #FCD34D;
    --score-low:       #F87171;

    --border:          #30363D;
    --border-strong:   #484F58;

    --shadow-sm:       0 1px 3px 0 rgb(0 0 0 / 0.4);
    --shadow-md:       0 4px 12px rgb(0 0 0 / 0.4);
    --shadow-lg:       0 10px 30px rgb(0 0 0 / 0.5);
}