/*
 * 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;
}

/* ────────────────────────────────────────────────
   Responsive Breakpoints (standard reference)
   ──────────────────────────────────────────────────
   CSS custom properties cannot be used inside @media queries,
   so these values are documented here as the canonical reference.
   All component stylesheets MUST use these exact pixel values.

   sm:  480px  — mobile phones (portrait)
   md:  768px  — tablets (portrait)
   lg:  1024px — small desktops / tablets (landscape)
   xl:  1280px — desktops
   2xl: 1440px — large desktops / wide monitors
   ──────────────────────────────────────────────── */

/* ────────────────────────────────────────────────
   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 — disabled by design (keep tokens for compatibility) */
    --shadow-sm: none;
    --shadow: none;
    --shadow-hover: none;
    --shadow-lg: none;

    /* Hover — single standard hover style */
    --hover-overlay: rgba(0, 0, 0, 0.04);
    --hover-overlay-strong: rgba(0, 0, 0, 0.07);

    /* Typography — base 15px, step 2px (11-13-15-17-19-21-25) */
    --font-xs: 0.6875rem;   /* 11px — captions, micro-labels */
    --font-sm: 0.8125rem;   /* 13px — secondary text, labels */
    --font-base: 0.9375rem; /* 15px — body, main content */
    --font-md: 1.0625rem;   /* 17px — emphasized body, subheads */
    --font-lg: 1.1875rem;   /* 19px — section titles */
    --font-xl: 1.3125rem;   /* 21px — page headings */
    --font-2xl: 1.5625rem;  /* 25px — large headings */
    --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;
    --radius-modal: 12px;

    /* Button heights (canonical sizes — use .btn .btn-xs/.btn-sm/.btn-md/.btn-lg).
       Align with height tokens: xs=26px, sm=32px, md=36px, lg=44px. */
    --btn-h-xs: 26px;
    --btn-h-sm: 32px;
    --btn-h-md: 36px;
    --btn-h-lg: 44px;
    --btn-pad-x-xs: var(--space-2);
    --btn-pad-x-sm: var(--space-3);
    --btn-pad-x-md: var(--space-4);
    --btn-pad-x-lg: var(--space-5);

    /* 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;
    --protocol-smtp: #1565C0;

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

    /* Aliases (used by desktop/settings/stores templates) */
    --accent-primary: var(--accent-color);
    --accent-primary-subtle: rgba(45, 140, 240, 0.08);
    --surface-primary: var(--bg-primary);
    --border-primary: var(--border-color);
    --text-tertiary: var(--text-muted);
}

/* ────────────────────────────────────────────────
   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: none;
    --shadow: none;
    --shadow-hover: none;
    --shadow-lg: none;
    --hover-overlay: rgba(0, 0, 0, 0.04);
    --hover-overlay-strong: rgba(0, 0, 0, 0.07);
    --protocol-kafka: #212121;
    --protocol-smtp: #1565C0;
    --accent-primary: var(--accent-color);
    --accent-primary-subtle: rgba(45, 140, 240, 0.08);
    --surface-primary: var(--bg-primary);
    --border-primary: var(--border-color);
    --text-tertiary: var(--text-muted);
}

/* ────────────────────────────────────────────────
   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: none;
    --shadow: none;
    --shadow-hover: none;
    --shadow-lg: none;
    --hover-overlay: rgba(255, 255, 255, 0.04);
    --hover-overlay-strong: rgba(255, 255, 255, 0.07);
    --protocol-kafka: #424242;
    --protocol-smtp: #1E88E5;
    --accent-primary: var(--accent-color);
    --accent-primary-subtle: rgba(100, 181, 255, 0.12);
    --surface-primary: var(--bg-primary);
    --border-primary: var(--border-color);
    --text-tertiary: var(--text-muted);
}