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

   Brand hues are NOT written here — they live in
   _brand-gyro.css, which must load first. This file
   only assigns brand values to semantic roles.
   The --rame-* prefix is kept on purpose: it is the
   contract ~400 components already consume, and
   renaming it buys nothing but churn.
   ============================================ */

:root {
    /* ========================================
       COLOR PALETTE - Primary (Gyro Blue)
       ======================================== */
    --rame-primary: var(--gyro-blue-ink, #2B6FC4);
    --rame-primary-hover: var(--gyro-blue-ink-hover, #215BA6);
    --rame-primary-dark: var(--gyro-blue-ink-pressed, #1A4A88);
    --rame-primary-light: var(--gyro-blue-tint, #E8F1FE);
    --rame-primary-lighter: var(--gyro-blue-tint-soft, #F3F8FF);

    /* Pure brand hue — decorative use only (gradients, glows, dark surfaces).
       Never as a text color or a filled surface on white: 2.9:1. */
    --rame-brand-blue: var(--gyro-blue, #4E9BF5);
    --rame-brand-teal: var(--gyro-teal, #2CE0B4);
    --rame-brand-gradient: var(--gyro-grad-brand, linear-gradient(135deg, #2CE0B4, #4E9BF5));
    --rame-brand-gradient-soft: var(--gyro-grad-brand-soft, linear-gradient(135deg, rgba(44, 224, 180, .16), rgba(78, 155, 245, .16)));

    /* ========================================
       COLOR PALETTE - Success (Set Teal)
       ======================================== */
    --rame-success: var(--gyro-teal-ink, #0A8368);
    --rame-success-hover: var(--gyro-teal-ink-hover, #086B55);
    --rame-success-dark: #065846;
    --rame-success-light: var(--gyro-teal-tint, #E3FAF3);
    --rame-success-lighter: #F0FCF8;

    /* ========================================
       COLOR PALETTE - Accent (Set Teal)
       ======================================== */
    --rame-accent: var(--gyro-teal-ink, #0A8368);
    --rame-accent-hover: var(--gyro-teal-ink-hover, #086B55);
    --rame-accent-dark: #065846;

    /* ========================================
       COLOR PALETTE - Semantic
       ======================================== */
    --rame-error: var(--gyro-danger-ink, #C0304A);
    --rame-error-light: var(--gyro-danger-tint, #FDEBEF);
    --rame-error-border: #F6C2CC;
    --rame-error-text: #9C2439;

    --rame-warning: var(--gyro-amber, #F5A623);
    --rame-warning-light: var(--gyro-amber-tint, #FEF3E0);
    --rame-warning-lighter: #FFF9EF;
    --rame-warning-border: #F8D9A0;
    --rame-warning-text: var(--gyro-amber-ink, #9A6206);
    --rame-warning-dark: #D18C10;

    --rame-info: var(--gyro-blue, #4E9BF5);
    --rame-info-light: var(--gyro-blue-tint-soft, #F3F8FF);
    --rame-info-lighter: var(--gyro-blue-tint, #E8F1FE);
    --rame-info-border: #BCD9FB;
    --rame-info-text: var(--gyro-blue-ink-pressed, #1A4A88);

    /* ========================================
       COLOR PALETTE - Neutrals (Text)
       ======================================== */
    /* Neutrals carry the brand's blue cast (Night / Muted), not a flat grey. */
    --rame-text-primary: var(--gyro-night, #0A0E1A);
    --rame-text-secondary: #5A6B8A;
    --rame-text-tertiary: #7A8BAA;
    --rame-text-muted: #97A5BE;
    --rame-text-chat: #12182A;
    --rame-text-meta: #6B7C99;

    /* ========================================
       COLOR PALETTE - Backgrounds
       ======================================== */
    /* ========================================
       INVERTED SURFACES
       ========================================
       A deliberately dark panel inside a light UI — the highlighted price card,
       a designer's preview strip. Components used to reach for
       `--rame-text-primary` as a background to get this, which works by luck in
       light and inverts in dark: the panel turns white and its white text
       disappears. This is the real token for that intent, and it stays dark in
       both themes; only its elevation changes.
       ======================================== */
    --rame-surface-inverse: var(--gyro-night, #0A0E1A);
    --rame-surface-inverse-soft: var(--gyro-surface-3, #182140);
    --rame-on-inverse: var(--gyro-off, #F0F4FF);
    --rame-on-inverse-muted: #A9B8CE;

    /* Filled placeholder blocks: avatars without a photo, skeleton bars. */
    --rame-placeholder-bg: #C7D2E2;

    /* Neutral surfaces, tinted toward the brand's blue cast. */
    --rame-bg-primary: #ffffff;
    --rame-bg-secondary: #F6F8FC;
    --rame-bg-tertiary: #EDF1F8;
    --rame-bg-chat: #F6F8FC;
    --rame-bg-hover: #EDF1F8;
    --rame-bg-input: #EDF1F8;

    /* ========================================
       COLOR PALETTE - Borders
       ======================================== */
    --rame-border-light: #E2E8F2;
    --rame-border-medium: #D5DEEB;
    --rame-border-dark: #C2CEE0;
    --rame-border-focus: var(--rame-primary);

    /* ========================================
       COLOR PALETTE - Scrollbar
       ======================================== */
    --rame-scrollbar-thumb: #C7D2E2;
    --rame-scrollbar-thumb-hover: #A9B8CE;
    --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: var(--gyro-teal-tint, #E3FAF3);
    --rame-message-received-bg: var(--rame-bg-primary);
    --rame-message-status-sent: var(--gyro-blue, #4E9BF5);

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

    /* ========================================
       COLOR PALETTE - Workflow Designer block types
       Three roles that must stay tellable apart at a glance.
       Drawn from the brand palette so the canvas belongs to
       the same system as the rest of the app.
       ======================================== */
    --rame-block-trigger: var(--gyro-blue-ink, #2B6FC4);
    --rame-block-trigger-end: var(--gyro-blue, #4E9BF5);
    --rame-block-action: var(--gyro-teal-ink, #0A8368);
    --rame-block-action-end: var(--gyro-teal, #2CE0B4);
    --rame-block-condition: var(--gyro-amber-ink, #9A6206);
    --rame-block-condition-end: var(--gyro-amber, #F5A623);

    /* ========================================
       COLOR PALETTE - AI flow node categories
       Six categories, so six values that must stay tellable apart at a glance.
       The brand offers four accents, so two of the six use a deeper step of an
       existing hue rather than borrowing a colour from outside the palette.
       ======================================== */
    --rame-flow-trigger: var(--gyro-blue-ink, #2B6FC4);
    --rame-flow-llm: var(--gyro-blue-ink-pressed, #1A4A88);
    --rame-flow-knowledge: var(--gyro-teal-ink, #0A8368);
    --rame-flow-control: #5A6B8A;
    --rame-flow-action: var(--gyro-amber-ink, #9A6206);
    --rame-flow-terminal: #0E6E58;

    /* ========================================
       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: var(--gyro-grad-brand, linear-gradient(135deg, #2CE0B4, #4E9BF5));

    /* ========================================
       TYPOGRAPHY
       ======================================== */
    --rame-font-family: var(--gyro-font-body, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif);
    --rame-font-display: var(--gyro-font-display, 'Bebas Neue', 'Arial Narrow', sans-serif);
    --rame-font-mono: var(--gyro-font-mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);

    --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
       ======================================== */
    /* Raw shadow tint, for components that compose their own box-shadow.
       It has to be a token: a hardcoded rgba(0,0,0,…) is invisible on Night. */
    --color-shadow: rgba(10, 14, 26, 0.06);
    --color-shadow-strong: rgba(10, 14, 26, 0.14);

    --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(78, 155, 245, 0.28);
    --rame-shadow-focus-success: 0 0 0 2px rgba(44, 224, 180, 0.32);

    /* Colored shadows */
    --rame-shadow-primary: 0 2px 8px rgba(43, 111, 196, 0.35);
    --rame-shadow-success: 0 2px 8px rgba(10, 131, 104, 0.35);
    --rame-shadow-error: 0 2px 8px rgba(192, 48, 74, 0.35);
    --rame-shadow-brand: 0 6px 20px rgba(78, 155, 245, 0.30);

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