/* ============================================================
   PIEDRASANTA.SPACE — Design Tokens
   Material Design Dark — Clean Block Progression
   ============================================================ */

:root {
  /* Surface Elevation Scale */
  --surface-base:     #0A0A0C;
  --surface-01:       #121215;
  --surface-02:       #1A1A1F;
  --surface-03:       #222228;
  --surface-04:       #2A2A32;
  --surface-raised:   #1E1E25;

  /* Primary Accent */
  --accent:           #C8A96E;
  --accent-dim:       #9C7D48;
  --accent-bright:    #E2C98C;
  --accent-glow:      rgba(200, 169, 110, 0.12);
  --accent-border:    rgba(200, 169, 110, 0.25);

  /* Semantic Text */
  --text-primary:     #F0EDE8;
  --text-secondary:   #9E9A94;
  --text-tertiary:    #5C5955;
  --text-on-accent:   #0A0A0C;

  /* Borders / Dividers */
  --border-subtle:    rgba(255,255,255,0.06);
  --border-mid:       rgba(255,255,255,0.10);
  --border-strong:    rgba(255,255,255,0.18);

  /* Shadows (Material elevation) */
  --shadow-1: 0 1px 3px rgba(0,0,0,0.5), 0 1px 2px rgba(0,0,0,0.4);
  --shadow-2: 0 3px 6px rgba(0,0,0,0.6), 0 2px 4px rgba(0,0,0,0.4);
  --shadow-4: 0 8px 24px rgba(0,0,0,0.7), 0 4px 8px rgba(0,0,0,0.4);
  --shadow-8: 0 16px 40px rgba(0,0,0,0.8);

  /* Typography */
  --font-display: 'Playfair Display', Georgia, serif;
  --font-body:    'DM Sans', 'Helvetica Neue', sans-serif;
  --font-mono:    'DM Mono', 'Courier New', monospace;

  /* Type Scale */
  --text-xs:   0.6875rem;   /* 11px */
  --text-sm:   0.8125rem;   /* 13px */
  --text-base: 1rem;        /* 16px */
  --text-lg:   1.125rem;    /* 18px */
  --text-xl:   1.375rem;    /* 22px */
  --text-2xl:  1.75rem;     /* 28px */
  --text-3xl:  2.5rem;      /* 40px */
  --text-4xl:  3.5rem;      /* 56px */
  --text-5xl:  5rem;        /* 80px */

  /* Spacing */
  --sp-1:  0.25rem;
  --sp-2:  0.5rem;
  --sp-3:  0.75rem;
  --sp-4:  1rem;
  --sp-6:  1.5rem;
  --sp-8:  2rem;
  --sp-12: 3rem;
  --sp-16: 4rem;
  --sp-24: 6rem;
  --sp-32: 8rem;

  /* Layout */
  --max-w:        1200px;
  --max-w-narrow: 720px;
  --gutter:       clamp(1.25rem, 5vw, 3rem);

  /* Motion */
  --ease-out:     cubic-bezier(0.0, 0, 0.2, 1);
  --ease-in-out:  cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast:     150ms;
  --dur-base:     250ms;
  --dur-slow:     400ms;
  --dur-reveal:   600ms;

  /* Radius */
  --r-sm:   4px;
  --r-base: 8px;
  --r-lg:   12px;
  --r-xl:   20px;
}