sass-imobiliaria/frontend/src/index.css

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
    :root {
        /* Light theme tokens */
        --color-canvas: #f7f8fa;
        --color-panel: #fff;
        --color-surface: #f3f4f6;
        --color-surface-secondary: #e5e7eb;
        --color-text-primary: #18191a;
        --color-text-secondary: #3e3e44;
        --color-text-tertiary: #62666d;
        --color-text-quaternary: #8a8f98;
        --color-text-muted: #ababab;
        --color-brand: #5e6ad2;
        --color-accent: #7170ff;
        --color-accent-hover: #5e6ad2;
        --color-security: #7a7fad;
        --color-status-green: #27a644;
        --color-status-emerald: #10b981;
        --color-border-primary: #e5e7eb;
        --color-border-secondary: #d1d5db;
        --color-border-tertiary: #cbd5e1;
        --color-line-tint: #e5e7eb;
        --color-line-tertiary: #d1d5db;
        --border-subtle: rgba(0, 0, 0, 0.05);
        --border-standard: rgba(0, 0, 0, 0.08);
        /* RGB channels for opacity-modifier support (border-accent/60, ring-accent/30) */
        --color-accent-ch: 113 112 255;
        --color-brand-ch: 94 106 210;
        /* ─── Admin badge color — easy to swap ─── */
        --color-admin: #f5c518;
        /* Navbar backdrop */
        --navbar-bg: rgba(247, 248, 250, 0.85);
        /* Scrollbar */
        --scrollbar-track: #f3f4f6;
        --scrollbar-thumb: #d1d5db;
        --scrollbar-thumb-hover: #9ca3af;
    }

    .dark {
        /* Dark theme tokens */
        --color-canvas: #08090a;
        --color-panel: #0f1011;
        --color-surface: #191a1b;
        --color-surface-secondary: #28282c;
        --color-text-primary: #f7f8f8;
        --color-text-secondary: #d0d6e0;
        --color-text-tertiary: #8a8f98;
        --color-text-quaternary: #62666d;
        --color-text-muted: #ababab;
        --color-brand: #5e6ad2;
        --color-accent: #7170ff;
        --color-accent-hover: #828fff;
        --color-security: #7a7fad;
        --color-status-green: #27a644;
        --color-status-emerald: #10b981;
        --color-border-primary: #23252a;
        --color-border-secondary: #34343a;
        --color-border-tertiary: #3e3e44;
        --color-line-tint: #141516;
        --color-line-tertiary: #18191a;
        --border-subtle: rgba(255, 255, 255, 0.05);
        --border-standard: rgba(255, 255, 255, 0.08);
        /* ─── Admin badge color — easy to swap ─── */
        --color-admin: #f5c518;
        /* Navbar backdrop */
        --navbar-bg: rgba(8, 9, 10, 0.85);
        /* Scrollbar */
        --scrollbar-track: #0f1011;
        --scrollbar-thumb: #28282c;
        --scrollbar-thumb-hover: #3e3e44;
    }

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

    html {
        scroll-behavior: smooth;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }

    body {
        @apply bg-canvas text-textPrimary font-sans antialiased;
        font-feature-settings: "cv01", "ss03";
    }

    /* Focus ring — accessible but minimal */
    :focus-visible {
        outline: 2px solid rgba(113, 112, 255, 0.6);
        outline-offset: 2px;
    }

    /* Scrollbar styling — theme-aware */
    ::-webkit-scrollbar {
        width: 8px;
        height: 8px;
    }

    ::-webkit-scrollbar-track {
        background: var(--scrollbar-track);
    }

    ::-webkit-scrollbar-thumb {
        background: var(--scrollbar-thumb);
        border-radius: 4px;
    }

    ::-webkit-scrollbar-thumb:hover {
        background: var(--scrollbar-thumb-hover);
    }
}

@layer components {
    .btn-primary {
        @apply inline-flex items-center justify-center px-5 py-2.5 bg-brand hover:bg-accentHover text-white font-medium text-sm rounded transition-colors duration-200;
        font-feature-settings: "cv01", "ss03";
    }

    .btn-primary:focus-visible {
        outline: 2px solid rgba(113, 112, 255, 0.6);
        outline-offset: 2px;
    }

    /* Card theme-aware (substitui card-dark) */
    .card {
        @apply bg-panel border border-borderSubtle rounded-xl overflow-hidden;
    }

    /* Alias retrocompatível */
    .card-dark {
        @apply bg-panel border border-borderSubtle rounded-xl overflow-hidden;
    }

    /* Inputs de formulário theme-aware */
    .form-input {
        @apply w-full rounded-lg border border-borderPrimary bg-surface px-3 py-2 text-sm text-textPrimary placeholder:text-textQuaternary
               focus:border-accent/60 focus:outline-none focus:ring-1 focus:ring-accent/30
               transition-colors;
    }

    /* Labels de formulário theme-aware */
    .form-label {
        @apply text-xs font-medium text-textSecondary uppercase tracking-wide;
    }

    /* Seção de card em formulários */
    .form-section {
        @apply rounded-xl border border-borderSubtle bg-panel p-6 space-y-4;
    }
}

@layer utilities {
    /* Stagger entry animation for property cards */
    @keyframes fade-in-up {
        from {
            opacity: 0;
            transform: translateY(8px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    .animate-fade-in-up {
        animation: fade-in-up 0.25s ease both;
    }

    @media (prefers-reduced-motion: reduce) {
        .animate-fade-in-up {
            animation: none;
        }
    }
}