@import url("https://fonts.googleapis.com/css2?

family=Inter:wght@400;500;600;700;800&display=swap");

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

@layer base {
* {
@apply box-border list-none p-0 m-0 scroll-smooth;
}

body {
@apply bg-dark-1 text-white min-h-screen font-inter;
}
}

@layer utilities {
/* TYPOGRAPHY */
.h1-bold {
@apply text-[36px] font-bold leading-[140%] tracking-tighter;
}

.h1-semibold {
@apply text-[36px] font-semibold leading-[140%] tracking-tighter;
}

.h2-bold {
@apply text-[30px] font-bold leading-[140%] tracking-tighter;
}

.h3-bold {
@apply text-[24px] font-bold leading-[140%] tracking-tighter;
}

.base-semibold {
@apply text-[16px] font-semibold leading-[140%] tracking-tighter;
}

.base-medium {
@apply text-[16px] font-medium leading-[140%];
}

.base-regular {
@apply text-[16px] font-normal leading-[140%];
}

.body-bold {
@apply text-[18px] font-bold leading-[140%];
}

.body-medium {
@apply text-[18px] font-medium leading-[140%];
}

.small-semibold {
@apply text-[14px] font-semibold leading-[140%] tracking-tighter;
}
 .small-medium {
@apply text-[14px] font-medium leading-[140%];
}

.small-regular {
@apply text-[14px] font-normal leading-[140%];
}

.subtle-semibold {
@apply text-[12px] font-semibold leading-[140%];
}

.tiny-medium {
@apply text-[10px] font-medium leading-[140%];
}

/* UTILITIES */
.invert-white {
@apply invert brightness-0 transition;
}

.flex-center {
@apply flex justify-center items-center;
}

.flex-between {
@apply flex justify-between items-center;
}

.flex-start {
@apply flex justify-start items-center;
}

.custom-scrollbar::-webkit-scrollbar {
width: 3px;
height: 3px;
border-radius: 2px;
}

.custom-scrollbar::-webkit-scrollbar-track {
background: #09090a;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
background: #5c5c7b;
border-radius: 50px;
}

.custom-scrollbar::-webkit-scrollbar-thumb:hover {
background: #7878a3;
}

.common-container {
@apply flex flex-col flex-1 items-center gap-10 overflow-scroll py-10 px-5
md:px-8 lg:p-14 custom-scrollbar;
}

/* All Users */
.user-container {
 @apply max-w-5xl flex flex-col items-start w-full gap-6 md:gap-9;
}

.user-grid {
@apply w-full grid grid-cols-1 xs:grid-cols-2 md:grid-cols-2 lg:grid-cols-2
xl:grid-cols-3 gap-7 max-w-5xl;
}

/* Explore */
.explore-container {
@apply flex flex-col flex-1 items-center overflow-scroll py-10 px-5 md:p-14
custom-scrollbar;
}

.explore-inner_container {
@apply max-w-5xl flex flex-col items-center w-full gap-6 md:gap-9;
}

.explore-search {
@apply h-12 bg-dark-4 border-none placeholder:text-light-4 focus-visible:ring-0
focus-visible:ring-offset-0 ring-offset-0 !important;
}

/* Home */
.home-container {
@apply flex flex-col flex-1 items-center gap-10 overflow-scroll py-10 px-5
md:px-8 lg:p-14 custom-scrollbar;
}

.home-posts {
@apply max-w-screen-sm flex flex-col items-center w-full gap-6 md:gap-9;
}

.home-creators {
@apply hidden xl:flex flex-col w-72 2xl:w-465 px-6 py-10 gap-10 overflow-
scroll custom-scrollbar;
}

/* Post Details */
.post_details-container {
@apply flex flex-col flex-1 gap-10 overflow-scroll py-10 px-5 md:p-14 custom-
scrollbar items-center;
}

.post_details-card {
@apply bg-dark-2 w-full max-w-5xl rounded-[30px] flex-col flex xl:flex-row
border border-dark-4 xl:rounded-l-[24px];
}

.post_details-img {
@apply h-80 lg:h-[480px] xl:w-[48%] rounded-t-[30px] xl:rounded-l-[24px]
xl:rounded-tr-none object-cover p-5 bg-dark-1;
}

.post_details-info {
@apply bg-dark-2 flex flex-col gap-5 lg:gap-7 flex-1 items-start p-8 rounded-
[30px];
}
 .post_details-delete_btn {
@apply p-0 flex gap-3 hover:bg-transparent hover:text-light-1 text-light-1
small-medium lg:base-medium;
}

/* Profile */
.profile-container {
@apply flex flex-col items-center flex-1 gap-10 overflow-scroll py-10 px-5
md:p-14 custom-scrollbar;
}

.profile-inner_container {
@apply flex items-center md:mb-8 xl:items-start gap-8 flex-col xl:flex-row
relative max-w-5xl w-full;
}

.profile-tab {
@apply flex-center gap-3 py-4 w-48 bg-dark-2 transition flex-1 xl:flex-
initial;
}

/* Saved */
.saved-container {
@apply flex flex-col flex-1 items-center gap-10 overflow-scroll py-10 px-5
md:p-14 custom-scrollbar;
}

/* Bottom bar */
.bottom-bar {
@apply z-50 flex-between w-full sticky bottom-0 rounded-t-[20px] bg-dark-2 px-5
py-4 md:hidden;
}

/* File uploader */
.file_uploader-img {
@apply h-80 lg:h-[480px] w-full rounded-[24px] object-cover object-top;
}

.file_uploader-label {
@apply text-light-4 text-center small-regular w-full p-4 border-t border-t-
dark-4;
}

.file_uploader-box {
@apply flex-center flex-col p-7 h-80 lg:h-[612px];
}

/* Grid Post List */

.grid-container {
@apply w-full grid grid-cols-1 sm:grid-cols-2 md:grid-cols-1 lg:grid-cols-2
xl:grid-cols-3 gap-7 max-w-5xl;
}

.grid-post_link {
@apply flex rounded-[24px] border border-dark-4 overflow-hidden cursor-pointer
w-full h-full;
}

.grid-post_user {
 @apply absolute bottom-0 p-5 flex-between w-full bg-gradient-to-t from-dark-3
to-transparent rounded-b-[24px] gap-2;
}

/* Left sidebar */
.leftsidebar {
@apply hidden md:flex px-6 py-10 flex-col justify-between min-w-[270px] bg-
dark-2;
}

.leftsidebar-link {
@apply rounded-lg base-medium hover:bg-primary-500 transition;
}

/* Post Card */
.post-card {
@apply bg-dark-2 rounded-3xl border border-dark-4 p-5 lg:p-7 w-full max-w-
screen-sm;
}

.post-card_img {
@apply h-64 xs:h-[400px] lg:h-[450px] w-full rounded-[24px] object-cover mb-5;
}

/* Topbar */
.topbar {
@apply sticky top-0 z-50 md:hidden bg-dark-2 w-full;
}

/* User card */
.user-card {
@apply flex-center flex-col gap-4 border border-dark-4 rounded-[20px] px-5 py-
8;
}
}

@layer components {
/* SHADCN COMPONENTS */
/* Form */
.shad-form_label {
@apply text-white !important;
}

.shad-form_message {
@apply text-red !important;
}

.shad-input {
@apply h-12 bg-dark-4 border-none placeholder:text-light-4 focus-visible:ring-1
focus-visible:ring-offset-1 ring-offset-light-3 !important;
}

.shad-textarea {
@apply h-36 bg-dark-3 rounded-xl border-none focus-visible:ring-1 focus-
visible:ring-offset-1 ring-offset-light-3 !important;
}

/* Button */
.shad-button_primary {
 @apply bg-primary-500 hover:bg-primary-500 text-light-1 flex gap-2 !important;
}

.shad-button_dark_4 {
@apply h-12 bg-dark-4 px-5 text-light-1 flex gap-2 !important;
}

.shad-button_ghost {
@apply flex gap-4 items-center justify-start hover:bg-transparent hover:text-
white !important;
}
}

/** @type {import('tailwindcss').Config} */

const defaultTheme = require("tailwindcss/defaultTheme");

module.exports = {
darkMode: ["class"],
content: [
"./pages/**/*.{ts,tsx}",
"./components/**/*.{ts,tsx}",
"./app/**/*.{ts,tsx}",
"./src/**/*.{ts,tsx}",
],
theme: {
container: {
center: true,
padding: "2rem",
screens: {
"2xl": "1400px",
},
},
extend: {
colors: {
"primary-500": "#877EFF",
"primary-600": "#5D5FEF",
"secondary-500": "#FFB620",
"off-white": "#D0DFFF",
"red": "#FF5A5A",
"dark-1": "#000000",
"dark-2": "#09090A",
"dark-3": "#101012",
"dark-4": "#1F1F22",
"light-1": "#FFFFFF",
"light-2": "#EFEFEF",
"light-3": "#7878A3",
"light-4": "#5C5C7B",
},
screens: {
 "xs": "480px",
},
width: {
"420": "420px",
"465": "465px",
},
fontFamily: {
inter: ["Inter", "sans-serif"],
},
keyframes: {
"accordion-down": {
from: { height: 0 },
to: { height: "var(--radix-accordion-content-height)" },
},
"accordion-up": {
from: { height: "var(--radix-accordion-content-height)" },
to: { height: 0 },
},
},
animation: {
"accordion-down": "accordion-down 0.2s ease-out",
"accordion-up": "accordion-up 0.2s ease-out",
},
},
},
plugins: [require("tailwindcss-animate")],
};