/**
 * VIBE × Shoelace Theme
 * Maps Shoelace design tokens to VIBE design system.
 * Import this AFTER Shoelace's base styles.
 *
 * Shoelace docs: https://shoelace.style/getting-started/customizing#design-tokens
 */

:root {
    /* === Colors === */
    /* Primary = VIBE accent blue (#1A0DFF) */
    --sl-color-primary-50: rgba(26, 13, 255, 0.03);
    --sl-color-primary-100: rgba(26, 13, 255, 0.06);
    --sl-color-primary-200: rgba(26, 13, 255, 0.10);
    --sl-color-primary-300: rgba(26, 13, 255, 0.15);
    --sl-color-primary-400: rgba(26, 13, 255, 0.30);
    --sl-color-primary-500: rgba(26, 13, 255, 0.70);
    --sl-color-primary-600: #1A0DFF;
    --sl-color-primary-700: #1409CC;
    --sl-color-primary-800: #0F0699;
    --sl-color-primary-900: #0A0466;
    --sl-color-primary-950: #050233;

    /* Success = VIBE green */
    --sl-color-success-600: #36F141;

    /* Warning = VIBE orange */
    --sl-color-warning-600: #F1A836;

    /* Danger = VIBE red */
    --sl-color-danger-600: #F13641;

    /* Neutral = VIBE grays */
    --sl-color-neutral-0: #FFFFFF;
    --sl-color-neutral-50: #F2F2F7;
    --sl-color-neutral-100: #EEEEF3;
    --sl-color-neutral-200: #E8E8ED;
    --sl-color-neutral-300: #C7C7CC;
    --sl-color-neutral-400: #AEAEB2;
    --sl-color-neutral-500: #5C5C60;
    --sl-color-neutral-600: #48484A;
    --sl-color-neutral-700: #3A3A3C;
    --sl-color-neutral-800: #2C2C2E;
    --sl-color-neutral-900: #1C1C1E;
    --sl-color-neutral-950: #000000;
    --sl-color-neutral-1000: #000000;

    /* === Typography === */
    --sl-font-mono: var(--font-data, 'JetBrains Mono', monospace);
    --sl-font-sans: var(--font-ui, 'Inter', sans-serif);
    --sl-font-serif: var(--font-ui, 'Inter', sans-serif);

    --sl-font-size-x-small: var(--text-sm);   /* 13px */
    --sl-font-size-small: var(--text-sm);      /* 13px */
    --sl-font-size-medium: var(--text-base);   /* 15px */
    --sl-font-size-large: var(--text-lg);      /* 17px */
    --sl-font-size-x-large: var(--text-xl);    /* 20px */

    --sl-font-weight-normal: var(--weight-regular);   /* 400 */
    --sl-font-weight-semibold: var(--weight-semibold); /* 600 */
    --sl-font-weight-bold: var(--weight-semibold);     /* 600 — VIBE не использует 700 */

    --sl-line-height-dense: var(--leading-tight);   /* 1.2 */
    --sl-line-height-normal: var(--leading-normal); /* 1.35 */

    /* === Border Radius — VIBE flat style === */
    --sl-border-radius-small: 0;
    --sl-border-radius-medium: 0;
    --sl-border-radius-large: 0;
    --sl-border-radius-x-large: var(--radius-lg); /* 8px — для модалок */
    --sl-border-radius-circle: 50%;
    --sl-border-radius-pill: 9999px;

    /* === Spacing === */
    --sl-spacing-3x-small: var(--space-xxs); /* 2px */
    --sl-spacing-2x-small: var(--space-xs);  /* 4px */
    --sl-spacing-x-small: var(--space-sm);   /* 8px */
    --sl-spacing-small: var(--space-md);     /* 12px */
    --sl-spacing-medium: var(--space-lg);    /* 16px */
    --sl-spacing-large: var(--space-xl);     /* 24px */

    /* === Shadows === */
    --sl-shadow-x-small: var(--shadow-sm);
    --sl-shadow-small: var(--shadow-sm);
    --sl-shadow-medium: var(--shadow-md);
    --sl-shadow-large: var(--shadow-lg);
    --sl-shadow-x-large: var(--shadow-lg);

    /* === Focus Ring === */
    --sl-focus-ring-width: 2px;
    --sl-focus-ring-color: var(--accent-focus-ring);
    --sl-focus-ring: var(--focus-ring);

    /* === Input / Control === */
    --sl-input-height-small: var(--control-height);  /* 28px */
    --sl-input-height-medium: 36px;
    --sl-input-height-large: 44px;

    --sl-input-font-family: var(--font-data);
    --sl-input-font-size-small: var(--text-xs);
    --sl-input-font-size-medium: var(--text-sm);
    --sl-input-font-size-large: var(--text-base);

    --sl-input-border-color: var(--separator-opaque);
    --sl-input-border-color-hover: var(--accent-primary);
    --sl-input-border-color-focus: var(--accent-primary);
    --sl-input-background-color: var(--bg-secondary);
    --sl-input-placeholder-color: var(--text-tertiary);

    /* === Overlay / Z-index === */
    --sl-overlay-background-color: rgba(0, 0, 0, 0.4);
    --sl-z-index-dialog: 1000;
    --sl-z-index-dropdown: 900;
    --sl-z-index-tooltip: 1100;

    /* === Transition === */
    --sl-transition-x-fast: 100ms;
    --sl-transition-fast: 150ms;
    --sl-transition-medium: 250ms;
    --sl-transition-slow: 400ms;
}

/* === Shoelace button helpers === */

/* Square icon-only button */
sl-button.sq::part(base) {
    padding-inline: 0;
    min-width: var(--sl-input-height-small);
}

/* Material Icons inside sl-button */
sl-button .material-icons-outlined {
    font-size: var(--icon-sm);
    margin-right: 4px;
}
sl-button.sq .material-icons-outlined {
    margin-right: 0;
}