/* ============================================
   Rame Design System - Core Design Tokens
   ============================================
   Single source of truth for colors, typography,
   spacing, and other design constants.
   ============================================ */

:root {
    /* ========================================
       COLOR PALETTE - Primary
       ======================================== */
    --rame-primary: #0084ff;
    --rame-primary-hover: #0073ea;
    --rame-primary-dark: #0073ea;
    --rame-primary-light: #e7f3ff;
    --rame-primary-lighter: #f0f8ff;

    /* ========================================
       COLOR PALETTE - Success (WhatsApp inspired)
       ======================================== */
    --rame-success: #25d366;
    --rame-success-hover: #20ba5a;
    --rame-success-dark: #1ea952;
    --rame-success-light: #d9fdd3;
    --rame-success-lighter: #e8f5e9;

    /* ========================================
       COLOR PALETTE - Accent (Teal/Green)
       ======================================== */
    --rame-accent: #00a884;
    --rame-accent-hover: #008f72;
    --rame-accent-dark: #007a60;

    /* ========================================
       COLOR PALETTE - Semantic
       ======================================== */
    --rame-error: #ef5350;
    --rame-error-light: #ffebee;
    --rame-error-border: #ffcdd2;
    --rame-error-text: #842029;

    --rame-warning: #ff9800;
    --rame-warning-light: #fff3e0;
    --rame-warning-lighter: #fff8e1;
    --rame-warning-border: #ffe082;
    --rame-warning-text: #e65100;
    --rame-warning-dark: #ffc107;

    --rame-info: #38bdf8;
    --rame-info-light: #f0f9ff;
    --rame-info-lighter: #e0f2fe;
    --rame-info-border: #bae6fd;
    --rame-info-text: #0c4a6e;

    /* ========================================
       COLOR PALETTE - Neutrals (Text)
       ======================================== */
    --rame-text-primary: #1c1e21;
    --rame-text-secondary: #65676b;
    --rame-text-tertiary: #8a8d91;
    --rame-text-muted: #8696a0;
    --rame-text-chat: #111b21;
    --rame-text-meta: #667781;

    /* ========================================
       COLOR PALETTE - Backgrounds
       ======================================== */
    --rame-bg-primary: #ffffff;
    --rame-bg-secondary: #f7f8fa;
    --rame-bg-tertiary: #f0f2f5;
    --rame-bg-chat: #f7f9fa;
    --rame-bg-hover: #f0f2f5;
    --rame-bg-input: #f0f2f5;

    /* ========================================
       COLOR PALETTE - Borders
       ======================================== */
    --rame-border-light: #e4e6eb;
    --rame-border-medium: #e9edef;
    --rame-border-dark: #d0d3d9;
    --rame-border-focus: var(--rame-primary);

    /* ========================================
       COLOR PALETTE - Scrollbar
       ======================================== */
    --rame-scrollbar-thumb: #d0d3d9;
    --rame-scrollbar-thumb-hover: #b8bcc4;
    --rame-scrollbar-track: transparent;

    /* ========================================
       COLOR PALETTE - Status Indicators
       ======================================== */
    --rame-status-online: #42b72a;
    --rame-status-sent: #53bdeb;
    --rame-status-pending: var(--rame-text-meta);
    --rame-status-failed: var(--rame-error);

    /* ========================================
       COLOR PALETTE - Message Bubbles
       ======================================== */
    --rame-message-sent-bg: #d9fdd3;
    --rame-message-received-bg: var(--rame-bg-primary);
    --rame-message-status-sent: #53bdeb;

    /* ========================================
       COLOR PALETTE - Channel Colors
       ======================================== */
    --rame-channel-whatsapp: #25d366;
    --rame-channel-instagram: #e91e63;
    --rame-channel-email: #1976d2;
    --rame-channel-facebook: #0084ff;

    /* ========================================
       COLOR PALETTE - Attachment Types
       ======================================== */
    --rame-attachment-image: #00897b;
    --rame-attachment-video: #5e35b1;
    --rame-attachment-audio: #e91e63;
    --rame-attachment-document: #1976d2;

    /* ========================================
       COLOR PALETTE - Avatar Gradient
       ======================================== */
    --rame-avatar-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);

    /* ========================================
       TYPOGRAPHY
       ======================================== */
    --rame-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

    --rame-text-xs: 10px;
    --rame-text-sm: 11px;
    --rame-text-base: 13px;
    --rame-text-md: 14px;
    --rame-text-lg: 15px;
    --rame-text-xl: 16px;
    --rame-text-2xl: 18px;

    --rame-font-normal: 400;
    --rame-font-medium: 500;
    --rame-font-semibold: 600;
    --rame-font-bold: 700;

    --rame-line-height-tight: 1.3;
    --rame-line-height-base: 1.4;
    --rame-line-height-relaxed: 1.5;

    /* ========================================
       SPACING (4px scale)
       ======================================== */
    --rame-space-0: 0;
    --rame-space-1: 4px;
    --rame-space-2: 8px;
    --rame-space-3: 12px;
    --rame-space-4: 16px;
    --rame-space-5: 20px;
    --rame-space-6: 24px;
    --rame-space-8: 32px;
    --rame-space-10: 40px;

    /* ========================================
       BORDER RADIUS
       ======================================== */
    --rame-radius-xs: 3px;
    --rame-radius-sm: 4px;
    --rame-radius-md: 6px;
    --rame-radius-lg: 8px;
    --rame-radius-xl: 10px;
    --rame-radius-2xl: 12px;
    --rame-radius-3xl: 16px;
    --rame-radius-pill: 24px;
    --rame-radius-full: 50%;
    --rame-radius-bubble: 7.5px;

    /* ========================================
       SHADOWS
       ======================================== */
    --rame-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05);
    --rame-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
    --rame-shadow-md: 0 2px 8px rgba(0, 0, 0, 0.08);
    --rame-shadow-lg: 0 4px 12px rgba(0, 0, 0, 0.12);
    --rame-shadow-xl: 0 8px 24px rgba(0, 0, 0, 0.15);
    --rame-shadow-message: 0 1px 0.5px rgba(0, 0, 0, 0.13);

    /* Focus shadows */
    --rame-shadow-focus-primary: 0 0 0 3px rgba(0, 132, 255, 0.1);
    --rame-shadow-focus-success: 0 0 0 2px rgba(37, 211, 102, 0.25);

    /* Colored shadows */
    --rame-shadow-primary: 0 2px 8px rgba(0, 132, 255, 0.35);
    --rame-shadow-success: 0 2px 8px rgba(37, 211, 102, 0.35);
    --rame-shadow-error: 0 2px 8px rgba(239, 83, 80, 0.35);

    /* ========================================
       TRANSITIONS
       ======================================== */
    --rame-transition-fast: 0.15s ease;
    --rame-transition-base: 0.2s ease;
    --rame-transition-slow: 0.3s ease;
    --rame-transition-spring: 0.3s cubic-bezier(0.22, 0.61, 0.36, 1);
    --rame-transition-bounce: 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);

    /* ========================================
       Z-INDEX SCALE
       ======================================== */
    --rame-z-dropdown: 100;
    --rame-z-sticky: 200;
    --rame-z-fixed: 300;
    --rame-z-modal-backdrop: 400;
    --rame-z-modal: 500;
    --rame-z-popover: 600;
    --rame-z-tooltip: 700;

    /* ========================================
       COMPONENT SIZES
       ======================================== */
    --rame-button-sm: 32px;
    --rame-button-md: 40px;
    --rame-button-lg: 44px;

    --rame-avatar-sm: 32px;
    --rame-avatar-md: 40px;
    --rame-avatar-lg: 48px;

    --rame-icon-sm: 16px;
    --rame-icon-md: 20px;
    --rame-icon-lg: 24px;

    /* Sidebar */
    --rame-sidebar-width: 360px;

    /* Chat */
    --rame-chat-max-width: 450px;
    --rame-media-max-width: 330px;

    /* ========================================
       BREAKPOINTS (reference only — CSS @media does not support var())
       Use the literal values 640px and 1024px in @media queries.
       ======================================== */
    --rame-bp-mobile-max: 640px;
    --rame-bp-tablet-max: 1024px;
}