@import "tailwindcss";
@import "./buttons.css";
@import "./peak.css";
@import "./typography.css";

@theme {
    --color-primary: #2C2523;
    --color-primary-hover: #433936;
    
    --color-accent: #B89368;
    --color-accent-hover: #A37E55;
    --color-accent-light: #F7F3EE;
    --color-accent-dark: #8F6D46;

    --color-canvas: #FAF8F5;
    --color-surface: #FFFFFF;
    --color-surface-warm: #F4EFEA;
    --color-surface-sand: #EDE7DF;

    --color-neutral: #2C2523;
    --color-neutral-50: #FAF8F5;
    --color-neutral-100: #F4EFEA;
    --color-neutral-200: #E6DFD5;
    --color-neutral-300: #D3C9BD;
    --color-neutral-400: #A89B8D;
    --color-neutral-500: #7F7365;
    --color-neutral-600: #5D5348;
    --color-neutral-700: #463E36;
    --color-neutral-800: #332D28;
    --color-neutral-900: #231E1B;
    --color-neutral-950: #14110F;

    --font-serif: "Cormorant Garamond", Georgia, Cambria, "Times New Roman", Times, serif;
    --font-sans: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif;

    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
}

@layer base {
    html {
        color: var(--color-neutral);
        font-family: var(--font-sans);
        background-color: var(--color-canvas);
    }

    h1, h2, h3, h4, .font-heading {
        font-family: var(--font-serif);
        letter-spacing: -0.01em;
    }

   ::selection,
   ::target-text {
        background-color: var(--color-primary);
        color: var(--color-white);
   }
}