import React from 'react';

export const inputStyle: React.CSSProperties = {
    width: '100%', padding: '10px 14px',
    border: '1.5px solid var(--border-input)', borderRadius: 8,
    background: 'var(--bg-input)', fontFamily: '"Inter","Segoe UI",sans-serif',
    fontSize: 14, color: 'var(--text-primary)', outline: 'none',
    boxSizing: 'border-box', transition: 'border-color 0.2s',
};

export const inputSm: React.CSSProperties = {
    ...inputStyle,
    padding: '9px 12px',
    fontSize: 13,
    background: 'var(--bg-input-sm)',
};

export const labelStyle: React.CSSProperties = {
    display: 'block', fontSize: 12, fontWeight: 700,
    color: 'var(--text-secondary)', textTransform: 'uppercase',
    letterSpacing: '0.6px', marginBottom: 6,
};

export const labelSm: React.CSSProperties = {
    ...labelStyle,
    fontSize: 10,
    color: 'var(--text-muted)',
    marginBottom: 4,
};

export const cardStyle: React.CSSProperties = {
    background: 'var(--bg-card)', borderRadius: 16,
    border: '1px solid var(--border-card)',
    boxShadow: 'var(--shadow-card)',
    overflow: 'hidden',
};

export const btnPrimary: React.CSSProperties = {
    display: 'flex', alignItems: 'center', gap: 8,
    padding: '11px 22px',
    background: 'linear-gradient(135deg,#6366f1,#4f46e5)',
    color: '#fff', border: 'none', borderRadius: 10,
    cursor: 'pointer', fontFamily: '"Inter","Segoe UI",sans-serif',
    fontSize: 14, fontWeight: 600,
    boxShadow: '0 4px 14px rgba(99,102,241,.4)',
    whiteSpace: 'nowrap',
};

export const btnSuccess: React.CSSProperties = {
    padding: '7px 16px', background: '#dcfce7', color: '#15803d',
    border: '1px solid #bbf7d0', borderRadius: 7, cursor: 'pointer',
    fontFamily: 'inherit', fontSize: 13, fontWeight: 600,
};

export const btnDanger: React.CSSProperties = {
    padding: '7px 16px', background: '#fee2e2', color: '#dc2626',
    border: '1px solid #fecaca', borderRadius: 7, cursor: 'pointer',
    fontFamily: 'inherit', fontSize: 13, fontWeight: 600,
};
