/* ============================================================
   SHARED RESET CSS — Spygram Upsells HTML
   Reset moderno + variáveis CSS globais (extraídas do Tailwind)
   ============================================================ */

*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    -webkit-tap-highlight-color: transparent;
}

body {
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    background: oklch(0.08 0.01 280);
    color: oklch(0.95 0.005 280);
    min-height: 100vh;
    overflow-x: hidden;
}

img,
picture,
video,
canvas,
svg {
    display: block;
    max-width: 100%;
}

input,
button,
textarea,
select {
    font: inherit;
    color: inherit;
}

button {
    background: none;
    border: none;
    cursor: pointer;
    outline: inherit;
}

a {
    color: inherit;
    text-decoration: none;
}

ul,
ol {
    list-style: none;
}

p,
h1,
h2,
h3,
h4,
h5,
h6 {
    overflow-wrap: break-word;
}

/* Previne auto-zoom do iOS Safari em inputs (font-size >= 16px) */
@media (max-width: 640px) {

    input,
    select,
    textarea {
        font-size: 16px !important;
    }
}

/* ===== VARIÁVEIS GLOBAIS ===== */
:root {
    /* Paleta principal Spygram */
    --color-bg: oklch(0.08 0.01 280);
    --color-fg: oklch(0.95 0.005 280);
    --color-card: oklch(0.15 0.01 280 / 60%);
    --color-card-fg: oklch(0.95 0.005 280);
    --color-popover: oklch(0.15 0.01 280);
    --color-muted: oklch(0.2 0.01 280);
    --color-muted-fg: oklch(0.6 0.01 280);
    --color-border: oklch(1 0 0 / 10%);
    --color-input: oklch(1 0 0 / 12%);

    /* Spygram custom */
    --color-ig-pink: #E1306C;
    --color-ig-purple: #833AB4;
    --color-ig-orange: #F77737;

    /* Terminal */
    --color-terminal-green: #22c55e;
    --color-terminal-red: #ef4444;
    --color-terminal-yellow: #facc15;
    --color-terminal-blue: #3b82f6;
    --color-terminal-purple: #a855f7;

    /* Estados */
    --color-success: #22c55e;
    --color-success-dark: #16a34a;
    --color-success-darker: #15803d;
    --color-warning: #f59e0b;
    --color-warning-light: #facc15;
    --color-danger: #ef4444;
    --color-danger-dark: #dc2626;
    --color-danger-darker: #991b1b;

    /* Glass */
    --color-glass: oklch(0.15 0.01 280 / 50%);
    --color-glass-border: oklch(1 0 0 / 8%);

    /* Border radius (Tailwind: 0.75rem base) */
    --radius: 0.75rem;
    --radius-sm: 0.5rem;
    --radius-md: 0.625rem;
    --radius-lg: 0.75rem;
    --radius-xl: 1rem;

    /* Fontes */
    --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-mono: 'JetBrains Mono', 'Courier New', monospace;
}

/* ===== UTILITIES (mínimo necessário) ===== */
.glass-card {
    background: var(--color-glass);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--color-glass-border);
    border-radius: var(--radius-xl);
}

.ig-gradient {
    background: linear-gradient(135deg, var(--color-ig-pink), var(--color-ig-purple), var(--color-ig-orange));
}

.ig-gradient-text {
    background: linear-gradient(135deg, var(--color-ig-pink), var(--color-ig-purple), var(--color-ig-orange));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
}

/* Container mobile-first */
.container-app {
    width: 100%;
    max-width: 480px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 1rem;
    padding-right: 1rem;
    position: relative;
    z-index: 10;
}

@media (min-width: 640px) {
    .container-app {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }
}

/* Scrollbar styling */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: oklch(0.1 0.01 280);
}

::-webkit-scrollbar-thumb {
    background: oklch(0.3 0.01 280);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: oklch(0.4 0.01 280);
}