/* ============================================================
   GRACE AFTER GRIT — Design Tokens
   ============================================================ */

:root {
  /* ---- Color Palette: Up Top Studio Aligned ---- */
  --md-primary: #0D4F5F;
  --md-on-primary: #FFFFFF;
  --md-primary-container: #D1E8ED;
  --md-on-primary-container: #063440;

  --md-secondary: #C09570;
  --md-on-secondary: #FFFFFF;
  --md-secondary-container: #F5EDE4;
  --md-on-secondary-container: #7A5A3C;

  --md-tertiary: #4DBC8B;
  --md-on-tertiary: #FFFFFF;
  --md-tertiary-container: #D4F0E4;
  --md-on-tertiary-container: #0A6644;

  --md-surface: #FFFAF1;
  --md-surface-dim: #FFF3E6;
  --md-surface-bright: #FFFAF1;
  --md-surface-container: #FFF3E6;
  --md-surface-container-low: #FFFDF7;
  --md-surface-container-high: #F0E8DC;
  --md-on-surface: #2A3C44;
  --md-on-surface-variant: #6B7C85;

  --md-outline: rgba(13, 79, 95, 0.25);
  --md-outline-variant: rgba(13, 79, 95, 0.08);
  --md-error: #BA1A1A;
  --md-on-error: #FFFFFF;

  /* ---- Typography Scale ---- */
  --font-display: 'Playfair Display', serif;
  --font-body: 'Inter', sans-serif;

  /* Display */
  --text-display-lg: 3.5rem;       /* 56px */
  --text-display-md: 2.75rem;      /* 44px */
  --text-display-sm: 2.25rem;      /* 36px */

  /* Headline */
  --text-headline-lg: 2rem;        /* 32px */
  --text-headline-md: 1.75rem;     /* 28px */
  --text-headline-sm: 1.5rem;      /* 24px */

  /* Title */
  --text-title-lg: 1.375rem;       /* 22px */
  --text-title-md: 1rem;           /* 16px */
  --text-title-sm: 0.875rem;       /* 14px */

  /* Body */
  --text-body-lg: 1.125rem;        /* 18px */
  --text-body-md: 1rem;            /* 16px */
  --text-body-sm: 0.875rem;        /* 14px */

  /* Label */
  --text-label-lg: 0.875rem;       /* 14px */
  --text-label-md: 0.75rem;        /* 12px */

  /* Line Heights */
  --leading-tight: 1.2;
  --leading-normal: 1.6;
  --leading-relaxed: 1.8;

  /* Letter Spacing */
  --tracking-tight: -0.02em;
  --tracking-normal: 0;
  --tracking-wide: 0.04em;
  --tracking-wider: 0.1em;

  /* ---- Spacing (4px grid) ---- */
  --space-1: 0.25rem;    /* 4px */
  --space-2: 0.5rem;     /* 8px */
  --space-3: 0.75rem;    /* 12px */
  --space-4: 1rem;       /* 16px */
  --space-5: 1.25rem;    /* 20px */
  --space-6: 1.5rem;     /* 24px */
  --space-8: 2rem;       /* 32px */
  --space-10: 2.5rem;    /* 40px */
  --space-12: 3rem;      /* 48px */
  --space-16: 4rem;      /* 64px */
  --space-20: 5rem;      /* 80px */
  --space-24: 6rem;      /* 96px */

  /* ---- Shape (Border Radius) ---- */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 28px;
  --radius-full: 9999px;

  /* ---- Elevation (Box Shadows) ---- */
  --elevation-0: none;
  --elevation-1: 0 1px 3px 1px rgba(0, 0, 0, 0.06), 0 1px 2px 0 rgba(0, 0, 0, 0.03);
  --elevation-2: 0 2px 6px 2px rgba(0, 0, 0, 0.06), 0 1px 2px 0 rgba(0, 0, 0, 0.03);
  --elevation-3: 0 4px 8px 3px rgba(0, 0, 0, 0.06), 0 1px 3px 0 rgba(0, 0, 0, 0.04);
  --elevation-4: 0 6px 10px 4px rgba(0, 0, 0, 0.06), 0 2px 3px 0 rgba(0, 0, 0, 0.04);

  /* ---- Motion ---- */
  --motion-standard: cubic-bezier(0.2, 0, 0, 1);
  --motion-emphasized: cubic-bezier(0.2, 0, 0, 1);
  --motion-decelerate: cubic-bezier(0, 0, 0, 1);
  --motion-accelerate: cubic-bezier(0.3, 0, 1, 1);

  --duration-short: 150ms;
  --duration-medium: 300ms;
  --duration-long: 500ms;

  /* ---- Layout ---- */
  --container-max: 1200px;
  --container-narrow: 800px;
  --nav-height: 72px;
}