/* ================================================================
   Foodonaut — Design Tokens (для публичного блога)
   Источник: Claude Design tokens.css (бренд-палитра, Pragmatica)
   ================================================================ */
/* Brand fonts — Pragmatica. Шрифты в /blog-assets/fonts/ */
@font-face {
    font-family: 'PragmaticaWebMedium';
    src: url('fonts/Pragmatica.woff2') format('woff2'),
         url('fonts/Pragmatica.woff')  format('woff');
    font-weight: 400 500;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'PragmaticaWebMedium';
    src: url('fonts/Pragmatica-Bold.woff2') format('woff2'),
         url('fonts/Pragmatica-Bold.woff')  format('woff');
    font-weight: 700 900;
    font-style: normal;
    font-display: swap;
}

:root {
    /* Brand */
    --brand-primary: #1851AC;
    --brand-primary-end: #458CFF;
    --brand-gradient: linear-gradient(135deg, #1851AC 0%, #458CFF 100%);
    --brand-primary-hover: #1445A0;
    --brand-primary-light: #EBF2FF;
    --brand-accent-green: #30CD6C;

    /* Surfaces */
    --bg-primary: #f5f7fa;
    --bg-secondary: #ffffff;
    --bg-tertiary: #f8f9fa;

    /* Text */
    --text-primary: #1e293b;
    --text-secondary: #64748b;
    --text-tertiary: #94a3b8;
    --text-inverse: #ffffff;

    /* Borders */
    --border-color: #e2e8f0;
    --border-focus: #458CFF;

    /* Status */
    --success: #15803D; --success-bg: #F6FDF9;
    --warning: #B54708; --warning-bg: #FFF8F1;
    --error: #B42318;   --error-bg: #FEF7F6;
    --info: #175CD3;    --info-bg: #F5F9FF;

    /* Shadows */
    --shadow-sm: 0 1px 2px 0 rgba(0,0,0,0.05);
    --shadow-md: 0 1px 3px 0 rgba(0,0,0,0.10);
    --shadow-lg: 0 2px 8px 0 rgba(0,0,0,0.10);
    --shadow-primary:
        inset 0 1px 0 rgba(255,255,255,0.32),
        inset 0 -1px 0 rgba(0,0,0,0.18),
        0 1px 2px rgba(15,23,42,0.08);
    --shadow-primary-hover:
        inset 0 1px 0 rgba(255,255,255,0.40),
        inset 0 -1px 0 rgba(0,0,0,0.22),
        0 8px 24px -6px rgba(24,81,172,0.45),
        0 2px 4px rgba(15,23,42,0.12);
    --shadow-primary-active:
        inset 0 1px 0 rgba(255,255,255,0.22),
        inset 0 -1px 0 rgba(0,0,0,0.28),
        inset 0 2px 6px rgba(0,0,0,0.18),
        0 4px 12px -4px rgba(24,81,172,0.50);
    --border-primary-glass: 1px solid rgba(255,255,255,0.18);

    /* Radius */
    --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; --radius-full: 9999px;

    /* Spacing */
    --space-xs: 4px; --space-sm: 8px; --space-md: 16px; --space-lg: 24px; --space-xl: 32px;

    /* Type */
    --font-family: 'PragmaticaWebMedium', -apple-system, BlinkMacSystemFont, 'Inter', 'Segoe UI', 'Roboto', sans-serif;
    --font-mono: 'SF Mono', Monaco, Consolas, 'Liberation Mono', monospace;
    --font-size-xs: 12px; --font-size-sm: 13px; --font-size-base: 14px;
    --font-size-lg: 16px; --font-size-xl: 18px; --font-size-2xl: 24px; --font-size-3xl: 32px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
body { font-family: var(--font-family); font-size: var(--font-size-base); line-height: 1.6; color: var(--text-primary); background: var(--bg-primary); }
*, button, input, select, textarea, optgroup { font-family: var(--font-family); }
code, kbd, pre, samp { font-family: var(--font-mono); }
h1,h2,h3,h4,h5,h6 { font-weight: 600; line-height: 1.3; color: var(--text-primary); }
h1 { font-size: var(--font-size-3xl); } h2 { font-size: var(--font-size-2xl); }
h3 { font-size: var(--font-size-xl); } h4 { font-size: var(--font-size-lg); }
p { color: var(--text-secondary); }
a { color: var(--brand-primary); text-decoration: none; }
a:hover { text-decoration: none; }