:root {
    --color-black: #000000;
    --color-white: #ffffff;
    --color-gray-100: #f5f5f5;
    --color-gray-200: #e5e5e5;
    --color-gray-300: #d4d4d4;
    --color-gray-400: #a3a3a3;
    --color-gray-500: #737373;
    --color-gray-600: #525252;
    --color-gray-700: #404040;
    --color-gray-800: #262626;
    --black: var(--color-black);
    --white: var(--color-white);
    --font-display: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
    --font-body: 'Syne', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

    /* -----------------------------------------------------------------------
       Typography – font sizes
       ----------------------------------------------------------------------- */
    --text-xs: 0.75rem;
    --text-sm: 0.875rem;
    --text-base: 1rem;
    --text-lg: 1.125rem;
    --text-xl: 1.25rem;
    --text-2xl: 1.5rem;
    --text-3xl: 2rem;
    --text-4xl: 2.5rem;
    --text-5xl: 3rem;

    /* -----------------------------------------------------------------------
       Transitions
       ----------------------------------------------------------------------- */
    --transition-fast: 0.2s ease;
    --transition-medium: 0.4s ease;
    --transition-smooth: 0.8s cubic-bezier(0.16, 1, 0.3, 1);

    /* -----------------------------------------------------------------------
       Buttons
       ----------------------------------------------------------------------- */
    --btn-padding-y: 18px;
    --btn-padding-x: 40px;
    --btn-font-size: var(--text-sm);
    --btn-font-weight: 600;
    --btn-letter-spacing: 0.1em;
    --btn-border-width: 2px;
    --btn-radius: 0;

    /* -----------------------------------------------------------------------
       Section Padding
       ----------------------------------------------------------------------- */
    --section-padding-desktop: 100px 0;
    --section-top-padding-desktop: 100px;
    --section-padding-mobile: 100px 0;
    --section-top-padding-mobile: 100px;
}