/*
 * Mockarty Design System — Design Tokens
 * ========================================
 * Single source of truth for all visual properties across 14+ UI applications.
 *
 * Usage:
 *   - External CSS apps: <link rel="stylesheet" href=".../tokens.css">
 *   - Inline CSS apps:   inject via designsystem.TokensCSS() Go helper
 *
 * DO NOT duplicate these values in individual app stylesheets.
 * Apps may override specific tokens for their context (e.g., website uses larger fonts).
 */

/* ────────────────────────────────────────────────
   Inter Font — Local Embed (no Google Fonts CDN)
   ──────────────────────────────────────────────── */

@font-face {
    font-family: 'Inter';
    src: url('fonts/Inter-Variable.woff2') format('woff2');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

/* ────────────────────────────────────────────────
   Color Palette — Semantic Colors
   ──────────────────────────────────────────────── */

:root {
    /* Backgrounds */
    --bg-primary: #ffffff;
    --bg-secondary: #f4f7fb;
    --bg-tertiary: #e3eaf4;

    /* Text */
    --text-primary: #0a1628;
    --text-secondary: #2a3f5c;
    --text-muted: #5d7899;

    /* Borders */
    --border-color: #c8d6e8;

    /* Accent */
    --accent-color: #2d8cf0;
    --accent-hover: #1a73d4;
    --accent-light: #e6f0fd;

    /* Status */
    --success-color: #10b981;
    --danger-color: #ef4444;
    --warning-color: #f59e0b;
    --info-color: #06b6d4;

    /* Warning banner */
    --warning-bg: #fef3c7;
    --warning-fg: #92400e;

    /* Shadows */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.06);
    --shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    --shadow-hover: 0 4px 16px rgba(0, 0, 0, 0.12);
    --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.14);

    /* Typography */
    --font-xs: 0.6875rem;
    --font-sm: 0.75rem;
    --font-base: 0.8125rem;
    --font-md: 0.875rem;
    --font-lg: 1rem;
    --font-xl: 1.25rem;
    --font-2xl: 1.5rem;
    --font-mono: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace;

    /* Spacing */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.5rem;
    --space-6: 2rem;
    --space-8: 3rem;

    /* Border Radius */
    --radius-sm: 6px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;

    /* Protocol colors */
    --protocol-http: #4A90E2;
    --protocol-grpc: #00BCD4;
    --protocol-mcp: #9C27B0;
    --protocol-soap: #FF9800;
    --protocol-graphql: #E10098;
    --protocol-sse: #43A047;
    --protocol-socket: #795548;
    --protocol-kafka: #212121;
    --protocol-rabbitmq: #FF6F00;

    /* Transition */
    --transition-fast: 0.15s ease;
    --transition-base: 0.2s ease;
    --transition-slow: 0.3s ease;
}

/* ────────────────────────────────────────────────
   Light Theme
   ──────────────────────────────────────────────── */

.light {
    --bg-primary: #ffffff;
    --bg-secondary: #f4f7fb;
    --bg-tertiary: #e3eaf4;
    --text-primary: #0a1628;
    --text-secondary: #2a3f5c;
    --text-muted: #5d7899;
    --border-color: #c8d6e8;
    --accent-color: #2d8cf0;
    --accent-hover: #1a73d4;
    --accent-light: #e6f0fd;
    --success-color: #10b981;
    --danger-color: #ef4444;
    --warning-color: #f59e0b;
    --info-color: #06b6d4;
    --warning-bg: #fef3c7;
    --warning-fg: #92400e;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.06);
    --shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    --shadow-hover: 0 4px 16px rgba(0, 0, 0, 0.12);
    --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.14);
    --protocol-kafka: #212121;
}

/* ────────────────────────────────────────────────
   Dark Theme
   ──────────────────────────────────────────────── */

.dark {
    --bg-primary: #080d18;
    --bg-secondary: #0e1524;
    --bg-tertiary: #151e30;
    --text-primary: #d8e4f4;
    --text-secondary: #7e9abb;
    --text-muted: #4d6a8a;
    --border-color: #1a2740;
    --accent-color: #64b5ff;
    --accent-hover: #2d8cf0;
    --accent-light: rgba(45, 140, 240, 0.12);
    --success-color: #34d399;
    --danger-color: #f87171;
    --warning-color: #fbbf24;
    --info-color: #22d3ee;
    --warning-bg: #422006;
    --warning-fg: #fde68a;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.2);
    --shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
    --shadow-hover: 0 4px 16px rgba(0, 0, 0, 0.35);
    --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.4);
    --protocol-kafka: #424242;
}