/* Custom CSS for Ranko App */
.material-symbols-outlined {
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

.material-symbols-outlined.fill-icon {
    font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

:root {
    --primary: #000000;
    --primary-container: #3b3b3b;
    --secondary: #5e5e5f;
    --surface: #f9f9f9;
    --surface-container-low: #f3f3f3;
    --surface-container-highest: #e2e2e2;
    --surface-container-lowest: #ffffff;
    --on-surface: #1a1c1c;
    --on-surface-variant: #474747;
    --outline: #777777;
    --outline-variant: #c6c6c6;
    --error: #ba1a1a;
    --background: #f9f9f9;
}

@media (prefers-color-scheme: dark) {
    :root {
        --primary: #ffffff;
        --primary-container: #333333;
        --secondary: #777777;
        --surface: #141414;
        --surface-container-low: #1e1e1e;
        --surface-container-highest: #2a2a2a;
        --surface-container-lowest: #000000;
        --on-surface: #ffffff;
        --on-surface-variant: #a0a0a0;
        --outline: #444444;
        --outline-variant: #333333;
        --error: #ffb4ab;
        --background: #141414;
    }
    
    .glass-pill {
        background: rgba(30, 30, 30, 0.8) !important;
        border: 1px solid rgba(255, 255, 255, 0.08) !important;
    }
    
    .obsidian-cta {
        background: #ffffff !important;
        color: #000000 !important;
    }
    
    .obsidian-cta span, .obsidian-cta div { /* Also target spinner or icons */
        color: #000000 !important;
        border-color: #000000 !important;
    }
}

body {
    font-family: 'Manrope', -apple-system, sans-serif;
    min-height: max(884px, 100dvh);
    background-color: var(--surface);
    color: var(--on-surface);
}

h1, h2, h3, .font-headline {
    font-family: 'Manrope', sans-serif;
}

.glass-pill {
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.4);
}

.obsidian-cta {
    background: linear-gradient(45deg, #000000, #3B3B3B);
}

/* Custom fade animations */
.fade-in {
    transition: opacity 0.3s ease-in, transform 0.3s ease-out;
}

/* Security CSS hooks */
.secure-mode {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.secure-mode img {
    -webkit-user-drag: none;
    pointer-events: none;
}


@keyframes fadeIn {
    from { opacity: 0; transform: translateY(5px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Auto-OTP advance hide arrows */
input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button { 
  -webkit-appearance: none; 
  margin: 0; 
}
input[type=number] {
    appearance: textfield;
    -moz-appearance: textfield;
}

/* Safari Contact Autofill Icon Removal */
input::-webkit-contacts-auto-fill-button {
  visibility: hidden;
  display: none !important;
  pointer-events: none;
  position: absolute;
  right: 0;
}