@import url('https://fonts.googleapis.com/css2?family=Baskervville:ital,wght@0,400..700;1,400..700&family=IBM+Plex+Sans:ital,wght@0,100..700;1,100..700&display=swap');

:root {
    /* Backgrounds */
    --color-bg-primary: #0f1110;      /* Charcoal black */
    --color-bg-secondary: #151816;    /* Slightly lifted charcoal */
    --color-bg-surface: #1c1f1c;      /* Cards / panels */

    /* Text */
    --color-text-primary: #e6e2d8;    /* Warm ivory */
    --color-text-secondary: #b7b2a6;  /* Muted parchment */
    --color-text-tertiary: #8f8b81;   /* Subdued captions */

    /* Accents */
    --color-accent-gold: #b8a46a;     /* Muted aged gold */
    --color-accent-bronze: #7a6a3a;   /* Oxidized bronze */
    --color-accent-umber: #5e4a32;    /* Deep umber */

    /* States */
    --color-state-hover: #d1c48b;
    --color-state-focus: #f1e6b6;
    --color-state-border: #2a2d2a;

    /* Font families */
  --font-serif: "Baskervville", serif;
  --font-sans: "IBM Plex Sans", sans-serif;

    /* Font sizes */
    --text-xs: 0.75rem;     /* 12px */
    --text-sm: 0.875rem;    /* 14px */
    --text-base: 1rem;      /* 16px */
    --text-md: 1.125rem;    /* 18px */
    --text-lg: 1.375rem;    /* 22px */
    --text-xl: 1.75rem;     /* 28px */
    --text-2xl: 2.25rem;    /* 36px */
    --text-3xl: 3rem;       /* 48px */
    --text-4xl: 4rem;       /* 64px */

    --leading-tight: 1.15;
    --leading-normal: 1.6;
    --leading-loose: 1.85;

    --tracking-tight: -0.02em;
    --tracking-normal: 0;
    --tracking-wide: 0.06em;

    /* Spacing scale */
    --space-2xs: 0.25rem;   /* 4px */
    --space-xs: 0.5rem;    /* 8px */
    --space-sm: 0.75rem;   /* 12px */
    --space-md: 1.25rem;   /* 20px */
    --space-lg: 2rem;      /* 32px */
    --space-xl: 3rem;      /* 48px */
    --space-2xl: 4.5rem;   /* 72px */
    --space-3xl: 6rem;     /* 96px */
    --space-4xl: 8rem;     /* 128px */
    --space-5xl: 10rem;    /* 160px */

    /* Widths */
    --container-max: 1280px;
    --container-narrow: 920px;

    /* Grid */
    --grid-gap-sm: 1.5rem;
    --grid-gap-md: 2.5rem;
    --grid-gap-lg: 4rem;

    /* Borders */
    --border-thin: 1px solid var(--color-state-border);
    --border-accent: 1px solid var(--color-accent-gold);

    /* Radius */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 14px;

    --shadow-soft: 0 10px 30px rgba(0, 0, 0, 0.35);

    --shadow-medium: 0 18px 50px rgba(0, 0, 0, 0.45);

    --shadow-elevated: 0 30px 80px rgba(0, 0, 0, 0.6);

    /* Transitions */
    --ease-standard: cubic-bezier(0.4, 0.0, 0.2, 1);
    --ease-gentle: cubic-bezier(0.25, 0.1, 0.25, 1);

    --duration-fast: 150ms;
    --duration-medium: 300ms;
    --duration-slow: 600ms;

    --button-height: 3rem;
    --button-padding-x: 1.5rem;

    --button-bg-primary: transparent;
    --button-text-primary: var(--color-text-primary);
    --button-border-primary: var(--border-accent);

    --z-base: 1;
    --z-overlay: 10;
    --z-modal: 100;
    --z-toast: 1000;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}


*:focus {
  outline: none;
  box-shadow: none;
}

:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--color-accent-gold);
  border-radius: var(--radius-sm);
}

::selection {
  background: var(--color-accent-gold);
  color: #111;
}

body {
  background: var(--color-bg-primary);
  color: var(--color-text-primary);
  font-family: var(--font-sans);
  line-height: var(--leading-normal);
}