/* ============================================
   VARIABLES.CSS — Anemoia Studios
   Brand design tokens as CSS custom properties
   ============================================ */

@import url('https://use.typekit.net/agu4vie.css');
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@100..900&display=swap');

:root {
  /* ── Brand Colors ── */
  --snow:  #FAEFDE;
  --mud:   #3D3506;
  --grass: #827210;
  --apple: #CC5919;
  --sun:   #E7C95B;
  --sky:   #607D82;

  /* ── Semantic Color Aliases ── */
  --bg-light:      var(--snow);
  --bg-dark:       var(--mud);
  --text-primary:  var(--mud);
  --text-light:    var(--snow);
  --accent-1:      var(--apple);
  --accent-2:      var(--grass);
  --accent-3:      var(--sun);
  --accent-4:      var(--sky);

  /* ── Typography ── */
  --font-body:    'Outfit', sans-serif;
  --font-display: "comrade", sans-serif;
  --font-heading: "comrade", sans-serif;

  --weight-light:     300;
  --weight-regular:   400;
  --weight-medium:    500;
  --weight-semibold:  600;
  --weight-bold:      700;
  --weight-black:     900;

  /* ── Type Scale ── */
  --text-xs:   0.75rem;    /*  12px */
  --text-sm:   0.875rem;   /*  14px */
  --text-base: 1rem;       /*  16px */
  --text-lg:   1.125rem;   /*  18px */
  --text-xl:   1.25rem;    /*  20px */
  --text-2xl:  1.5rem;     /*  24px */
  --text-3xl:  2rem;       /*  32px */
  --text-4xl:  2.75rem;    /*  44px */
  --text-5xl:  4rem;       /*  64px */
  --text-6xl:  6rem;       /*  96px */
  --text-7xl:  8rem;       /* 128px */

  /* ── Spacing ── */
  --space-xs:   0.5rem;
  --space-sm:   1rem;
  --space-md:   2rem;
  --space-lg:   4rem;
  --space-xl:   6rem;
  --space-2xl:  10rem;

  /* ── Layout ── */
  --container-max: 1320px;
  --container-pad: clamp(1.5rem, 5vw, 4rem);
  --nav-height:    72px;

  /* ── Border Radius (Sharp Corners) ── */
  --radius-sm: 0px;
  --radius-md: 0px;
  --radius-lg: 0px;

  /* ── Transitions ── */
  --transition-fast:   0.2s ease;
  --transition-base:   0.3s ease;
  --transition-slow:   0.5s ease;
}

/* ── Responsive type scale overrides ── */
@media (max-width: 768px) {
  :root {
    --text-5xl: 2.75rem;
    --text-6xl: 3.5rem;
    --text-7xl: 4.5rem;
    --space-xl: 4rem;
    --space-2xl: 6rem;
    --nav-height: 64px;
    --container-pad: 1.5rem;
  }
}