:root {
    /* ============================================
       Brand palette — Smart-Pi  (#00A297)
       Flat colors only — no gradients anywhere.
       ============================================ */
    --mk-brand: #00A297;
    --mk-brand-dark: #007A72;
    --mk-brand-deep: #0D3B38;
    --mk-brand-light: #E6F7F5;
    --mk-brand-muted: #B8E8E3;
    --mk-accent-warm: #F4A100;
    --mk-accent-coral: #FF6B4A;

    /* Ink — solid dark surfaces (hero, CTA, footer) */
    --mk-ink: #0D3B38;
    --mk-ink-soft: #11514C;
    --mk-ink-border: rgba(255, 255, 255, 0.1);
    --mk-on-ink: #FFFFFF;
    --mk-on-ink-muted: #A9D6D1;

    /* Text & surfaces */
    --mk-text: #16302D;
    --mk-text-muted: #54706C;
    --mk-surface: #F4FAF9;
    --mk-body-bg: #FFFFFF;
    --mk-card-bg: #FFFFFF;
    --mk-card-bg-elevated: #FFFFFF;
    --mk-header-bg: rgba(255, 255, 255, 0.86);
    --mk-sticky-bg: rgba(255, 255, 255, 0.95);
    --mk-scrollbar: rgba(0, 0, 0, 0.2);

    /* Legacy aliases (templates/CSS compatibility) */
    --mk-primary: var(--mk-brand);
    --mk-secondary: var(--mk-brand-dark);
    --mk-hero-bg: var(--mk-ink);
    --mk-page-hero-bg: var(--mk-brand-light);
    --mk-heading: var(--mk-text);
    --mk-footer-text: var(--mk-on-ink-muted);
    --mk-muted: var(--mk-text-muted);
    --mk-border: #DCEBE9;
    --mk-border-strong: #C2DDDA;
    --mk-badge: var(--mk-accent-warm);
    --mk-admin-teal: var(--mk-brand);
    --mk-primary-rgb: 0, 162, 151;
    --mk-secondary-rgb: 0, 122, 114;

    /* Typography scale (fluid) */
    --mk-fs-display: clamp(2.25rem, 4.5vw, 3.5rem);
    --mk-fs-h1: clamp(2rem, 4vw, 3rem);
    --mk-fs-h2: clamp(1.6rem, 2.8vw, 2.25rem);
    --mk-fs-h3: clamp(1.25rem, 1.8vw, 1.45rem);
    --mk-fs-h4: 1.125rem;
    --mk-fs-lead: clamp(1.05rem, 1.4vw, 1.2rem);
    --mk-fs-body: 1rem;
    --mk-fs-sm: 0.875rem;
    --mk-fs-xs: 0.8rem;

    /* Spacing (8pt scale) */
    --mk-space-1: 0.5rem;
    --mk-space-2: 1rem;
    --mk-space-3: 1.5rem;
    --mk-space-4: 2rem;
    --mk-space-5: 3rem;
    --mk-space-6: 4rem;
    --mk-space-7: 6rem;
    --mk-section-y: clamp(56px, 9vw, 96px);

    /* Layout */
    --mk-radius-sm: 6px;
    --mk-radius: 10px;
    --mk-radius-lg: 14px;
    --mk-radius-xl: 20px;
    --mk-container: 1200px;
    --mk-gutter: 16px;
    --mk-header-height: 76px;

    /* Elevation — soft layered shadows */
    --mk-shadow-xs: 0 1px 2px rgba(13, 59, 56, 0.05);
    --mk-shadow-sm: 0 1px 2px rgba(13, 59, 56, 0.05), 0 4px 12px rgba(13, 59, 56, 0.06);
    --mk-shadow: 0 2px 4px rgba(13, 59, 56, 0.05), 0 10px 28px rgba(13, 59, 56, 0.09);
    --mk-shadow-lg: 0 4px 8px rgba(13, 59, 56, 0.06), 0 20px 48px rgba(13, 59, 56, 0.14);
    --mk-shadow-brand: 0 6px 20px rgba(0, 162, 151, 0.25);

    /* Focus ring */
    --mk-focus-ring: 0 0 0 3px rgba(0, 162, 151, 0.35);

    /* Motion */
    --mk-transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --mk-transition-fast: 0.18s ease;

    /* Fonts */
    --mk-font: 'body-font', 'Vazirmatn', Tahoma, sans-serif;

    /* Dot-grid pattern for dark sections (flat, no gradient) */
    --mk-ink-dots: radial-gradient(rgba(255, 255, 255, 0.07) 1px, transparent 1.5px);
    --mk-ink-dots-size: 26px 26px;

    /* Controlled brand gradients — same color family, subtle depth.
       Used only on dark hero/CTA/AI surfaces; body stays flat. */
    --mk-grad-ink: linear-gradient(155deg, #0D3B38 0%, #11514C 55%, #0A5F58 100%);
    --mk-grad-brand: linear-gradient(135deg, #00A297 0%, #007A72 100%);
    --mk-grad-glow: radial-gradient(ellipse at 20% 0%, rgba(0, 162, 151, 0.28) 0%, transparent 55%);
}

/* ============================================
   Dark theme — standard Smart-Pi dark palette
   Applied via html[data-theme="dark"]
   ============================================ */
html[data-theme="dark"] {
    color-scheme: dark;

    /* Brand */
    --mk-brand: #00a882;
    --mk-brand-dark: #2dd4a8;
    --mk-brand-deep: #12332e;
    --mk-brand-light: rgba(0, 131, 104, 0.15);
    --mk-brand-muted: rgba(0, 168, 130, 0.35);

    /* Ink — dark sections stay slightly distinct from body */
    --mk-ink: #0d2a26;
    --mk-ink-soft: #11413b;
    --mk-ink-border: rgba(255, 255, 255, 0.08);
    --mk-on-ink: #f5f8f6;
    --mk-on-ink-muted: #9dbdb6;

    /* Text & surfaces */
    --mk-text: #e8ecea;
    --mk-text-muted: #84948e;
    --mk-surface: #0e1614;
    --mk-body-bg: #080f0d;
    --mk-card-bg: #121a18;
    --mk-card-bg-elevated: #1a2421;
    --mk-header-bg: rgba(18, 26, 24, 0.88);
    --mk-sticky-bg: rgba(18, 26, 24, 0.95);
    --mk-scrollbar: rgba(255, 255, 255, 0.25);

    /* Aliases & borders */
    --mk-page-hero-bg: #0c1a17;
    --mk-border: #1a2421;
    --mk-border-strong: #283530;
    --mk-primary-rgb: 0, 168, 130;
    --mk-secondary-rgb: 45, 212, 168;

    /* Elevation — deeper black shadows */
    --mk-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.3);
    --mk-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3), 0 4px 12px rgba(0, 0, 0, 0.3);
    --mk-shadow: 0 2px 4px rgba(0, 0, 0, 0.3), 0 10px 28px rgba(0, 0, 0, 0.35);
    --mk-shadow-lg: 0 4px 8px rgba(0, 0, 0, 0.35), 0 20px 48px rgba(0, 0, 0, 0.45);
    --mk-shadow-brand: 0 6px 20px rgba(0, 168, 130, 0.3);

    /* Focus ring */
    --mk-focus-ring: 0 0 0 3px rgba(0, 168, 130, 0.45);

    /* Gradients tuned for dark */
    --mk-grad-ink: linear-gradient(155deg, #0d2a26 0%, #10352f 55%, #0d403a 100%);
    --mk-grad-brand: linear-gradient(135deg, #00a882 0%, #007a63 100%);
    --mk-grad-glow: radial-gradient(ellipse at 20% 0%, rgba(0, 168, 130, 0.22) 0%, transparent 55%);
}