@import "tailwindcss";

@theme {
    /* === Colors === */
    --color-primary: #FFFFFF;
    /* --color-primary-light: ;
    --color-primary-dark: ; */

    --color-secondary: #000000;  /* its seams like black */
    /* --color-secondary-light: ; */
    /* --color-secondary-dark: ; */

    --color-tertiary: #39393A;    /* it also button hover bg colour */
    /* --color-tertiary-dark: ; */

    /* --color-success: ;
    --color-danger: ;
    --color-warning: ;                           */
    
    --color-background: #FFFFFF;
    
    --color-page-bg-light: #FFFFFF;
    --color-page-bg-dark: #F3F4F6;
    
    --color-hover-bg: #FFFFFF;
    --color-hover-bg-light: #F6F6F8;
    --color-hover-bg-dark: #39393A;


    --color-btn-bg: #489FB5;
    /* --color-btn-hover-bg: #39393A; */

    --color-border-bg: #D1D5DB;


    /* --color-text: ;
    --color-text-dark: ; */


    /* === Text Sizes (Custom) === */
    --text-hero: 3rem;
    /* 48px */
    --text-heading: 2.25rem;
    /* 36px */
    --text-subheading: 1.5rem;
    /* 24px */
    --text-body: 1rem;
    /* 16px */
    --text-small: 0.875rem;
    /* 14px */
    --text-tiny: 0.75rem;
    /* 12px */


    /* === Button Sizes === */
    --btn-height-sm: 2rem;
    --btn-height-md: 2.5rem;
    --btn-height-lg: 3rem;

    --btn-width-sm: 6rem;
    --btn-width-md: 8rem;
    --btn-width-lg: 10rem;


    /* === Fonts === */
    /* --font-sans: 'Inter', sans-serif;
    --font-serif: 'Merriweather', serif;
    --font-mono: 'Fira Code', monospace; */


    /* === Spacing === */
    /* --spacing-0: 0rem;
    --spacing-1: 0.25rem;
    --spacing-2: 0.5rem;
    --spacing-4: 1rem;
    --spacing-8: 2rem;
    --spacing-16: 4rem; */

    /* === Border Radius === */
    /* --radius-none: 0px;
    --radius-sm: 0.125rem;
    --radius: 0.25rem;
    --radius-md: 0.375rem;
    --radius-lg: 0.5rem;
    --radius-xl: 0.75rem;
    --radius-2xl: 1rem;
    --radius-full: 9999px; */

    /* === Shadows === */
    /* --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.15); */

    /* === Z-Index === */
    /* --z-10: 10;
    --z-50: 50;
    --z-100: 100; */

    /* === Breakpoints === */
    /* --screen-xs: 400px;
    --screen-sm: 640px;
    --screen-md: 768px;
    --screen-lg: 1024px;
    --screen-xl: 1280px;
    --screen-2xl: 1536px; */
}