/* ═══ DESIGN TOKENS — InkSide Theme ═══════════════════
 * Source of truth for all visual properties.
 * Overridable via Customizer (see customizer-output.php).
 * ══════════════════════════════════════════════════════ */

body.inkside-theme {
    /* ── Fonts ── */
    --ink-font: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
    --ink-font-mono: 'JetBrains Mono', 'SF Mono', 'Consolas', monospace;

    --ink-font-size-xs: 11px;
    --ink-font-size-sm: 13px;
    --ink-font-size-base: 14px;
    --ink-font-size-md: 16px;
    --ink-font-size-lg: 20px;
    --ink-font-size-xl: 28px;
    --ink-font-size-2xl: 36px;
    --ink-font-size-3xl: 48px;

    /* ── Colors ── */
    --ink-primary: #304961;
    --ink-primary-hover: #243a4e;
    --ink-primary-bg: rgba(48,73,97,0.04);
    --ink-primary-ring: rgba(48,73,97,0.15);
    --ink-primary-glow: rgba(48,73,97,0.08);

    --ink-accent: #61CE70;
    --ink-accent-hover: #56b963;
    --ink-accent-bg: rgba(97,206,112,0.06);
    --ink-accent-glow: rgba(97,206,112,0.15);

    --ink-text: #1a2535;
    --ink-text-muted: #5b6b7d;
    --ink-text-faint: #94a3b8;

    --ink-bg: #ffffff;
    --ink-bg-card: #ffffff;
    --ink-bg-muted: #f7f8fa;
    --ink-bg-subtle: #eef0f4;
    --ink-bg-glass: #ffffff;

    --ink-border: #e2e5ea;
    --ink-border-hover: #c5cad2;
    --ink-border-active: #a0a8b4;

    --ink-green: #61CE70;
    --ink-green-bg: rgba(97,206,112,0.08);
    --ink-red: #ef4444;
    --ink-red-bg: rgba(239,68,68,0.06);
    --ink-orange: #f59e0b;
    --ink-orange-bg: rgba(245,158,11,0.06);
    --ink-blue: #3b82f6;
    --ink-blue-bg: rgba(59,130,246,0.06);
    --ink-price: #61CE70;

    --ink-dark: #304961;
    --ink-dark-lighter: #3d5a75;

    /* ── Spacing (4px base) ── */
    --ink-space-unit: 4px;
    --ink-space-xs: 4px;
    --ink-space-sm: 8px;
    --ink-space-md: 16px;
    --ink-space-lg: 24px;
    --ink-space-xl: 32px;
    --ink-space-2xl: 48px;
    --ink-space-3xl: 64px;
    --ink-space-4xl: 96px;

    /* ── Radius ── */
    --ink-radius-xs: 4px;
    --ink-radius-sm: 6px;
    --ink-radius-md: 8px;
    --ink-radius-lg: 12px;
    --ink-radius-xl: 16px;
    --ink-radius-2xl: 20px;
    --ink-radius-full: 9999px;

    /* ── Shadows ── */
    --ink-shadow-xs: 0 1px 2px rgba(0,0,0,0.04);
    --ink-shadow-sm: 0 1px 3px rgba(0,0,0,0.05);
    --ink-shadow-md: 0 4px 12px rgba(0,0,0,0.06);
    --ink-shadow-lg: 0 8px 24px rgba(0,0,0,0.08);
    --ink-shadow-xl: 0 16px 48px rgba(0,0,0,0.12);
    --ink-shadow-glow: none;

    /* ── Transitions ── */
    --ink-transition-fast: 150ms ease;
    --ink-transition: 200ms ease;
    --ink-transition-slow: 300ms ease;
    --ink-spring: 250ms cubic-bezier(0.34, 1.56, 0.64, 1);

    /* ── Buttons ── */
    --ink-btn-height: 46px;
    --ink-btn-height-sm: 36px;
    --ink-btn-height-lg: 54px;
    --ink-btn-radius: var(--ink-radius-md);
    --ink-btn-font-weight: 600;

    /* ── Z-index scale ── */
    --ink-z-dropdown: 100;
    --ink-z-sticky: 200;
    --ink-z-overlay: 300;
    --ink-z-modal: 400;
    --ink-z-toast: 500;

    /* ── Layout ── */
    --ink-container-max: 1320px;
    --ink-container-padding: var(--ink-space-md);
    --ink-grid-gap: var(--ink-space-md);

    /* ── Breakpoints (reference values, used in @media — keep in sync) ──
     * Mobile  : ≤ 600px  → single-column, compact UI, scrollable rows
     * Tablet  : ≤ 768px  → reduced typography, medium spacing
     * Desktop : > 768px  → full layout
     * NOTE: CSS @media cannot consume custom properties; use the literal
     * pixel values below in @media queries to keep breakpoints unified. */
    --ink-bp-mobile: 600px;
    --ink-bp-tablet: 768px;
}