/* Design Tokens */

/* --------------------------------
   Shared / Global Tokens
   -------------------------------- */
:root {
  /* Typography */
  --font-family: 'Inter', sans-serif;

  /* Heading: 40px desktop, scales down to ~24px on mobile */
  --heading-size: clamp(1.5rem, 1rem + 2vw, 2.5rem);
  --heading-weight: 600;
  --heading-tracking: -0.03em;
  --heading-line-height: normal;

  --subtitle-size: 1rem;
  --subtitle-weight: 800;
  --subtitle-line-height: 1.25rem;

  --label-size: 0.6875rem;
  --label-weight: 600;
  --label-line-height: 1.5;
  --label-tracking: 0.08em;

  /* Statement: 22px desktop, scales down to ~18px on mobile */
  --statement-size: clamp(1.125rem, 0.95rem + 0.75vw, 1.375rem);
  --statement-weight: 400;
  --statement-line-height: 1.4;

  --body-size: 1rem;
  --body-weight: 400;
  --body-line-height: 1.4;

  /* Spacing (fluid 8pt scale — scales proportionally with typography) */
  --space-xs: 0.5rem;                                  /* 8px (fixed — too small to matter) */
  --space-sm: 1rem;                                    /* 16px (fixed — baseline unit) */
  --space-md: clamp(1.25rem, 1rem + 0.5vw, 1.5rem);   /* 20px → 24px */
  --space-lg: clamp(1.5rem, 1.25rem + 0.75vw, 2rem);  /* 24px → 32px */
  --space-xl: clamp(2rem, 1.5rem + 1.5vw, 3rem);      /* 32px → 48px */
  --space-2xl: clamp(2.5rem, 1.75rem + 2.5vw, 4rem);  /* 40px → 64px */
  --space-3xl: clamp(3.5rem, 2.5rem + 3.5vw, 6rem);   /* 56px → 96px */
}

/* --------------------------------
   Theme: Work (Light)
   -------------------------------- */
.theme-work {
  --bg: #FAFAFA;
  --text: #131616;
  --accent: #E93E1F;
  --placeholder: #EDEDF0;
  --hover: #E93E1F;
}

/* --------------------------------
   Theme: Studio (Vermillion)
   -------------------------------- */
.theme-studio {
  --bg: #E93F21;
  --text: #131616;
  --accent: #FFFFFF;
  --placeholder: #CF371B;
  --hover: #FFFFFF;
}