/* ==========================================================================
   Saso Designs — Design Tokens
   Modern, approachable residential architecture
   ========================================================================== */

:root {
  /* ---- COLOR: Core ---- */
  --color-black:        #1A1917;
  --color-white:        #FAF9F5;
  --color-pure-white:   #FFFFFF;

  /* ---- COLOR: Warm Neutrals ---- */
  --color-neutral-950:  #1A1917;
  --color-neutral-900:  #2E2A24;
  --color-neutral-800:  #433D34;
  --color-neutral-700:  #5C5345;
  --color-neutral-600:  #756A59;
  --color-neutral-500:  #8F8370;
  --color-neutral-400:  #AB9F8E;
  --color-neutral-300:  #C8BFAF;
  --color-neutral-200:  #DED8CC;
  --color-neutral-100:  #EFEBE3;
  --color-neutral-50:   #F8F6F0;

  /* ---- COLOR: Earth Accent ---- */
  --color-earth-800:    #5C4033;
  --color-earth-700:    #7A5544;
  --color-earth-600:    #956B55;
  --color-earth-500:    #A67D68;
  --color-earth-400:    #BF9C87;
  --color-earth-300:    #D4BBA9;
  --color-earth-200:    #E8D8CC;
  --color-earth-100:    #F3ECE5;

  /* ---- COLOR: Semantic ---- */
  --color-fg-primary:   var(--color-neutral-950);
  --color-fg-secondary: var(--color-neutral-700);
  --color-fg-tertiary:  var(--color-neutral-500);
  --color-fg-inverse:   var(--color-white);

  --color-bg-primary:   var(--color-white);
  --color-bg-secondary: var(--color-neutral-50);
  --color-bg-tertiary:  var(--color-neutral-100);
  --color-bg-inverse:   var(--color-neutral-950);

  --color-border:       var(--color-neutral-200);
  --color-border-strong:var(--color-neutral-300);
  --color-border-subtle:var(--color-neutral-100);

  /* ---- TYPOGRAPHY: Font Families ---- */
  --font-heading:       'Sora', sans-serif;
  --font-body:          'DM Sans', sans-serif;

  /* ---- TYPOGRAPHY: Font Sizes ---- */
  --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:   1.875rem;   /* 30px */
  --text-4xl:   2.25rem;    /* 36px */
  --text-5xl:   3rem;       /* 48px */
  --text-6xl:   3.75rem;    /* 60px */

  /* ---- TYPOGRAPHY: Line Heights ---- */
  --leading-tight:   1.15;
  --leading-snug:    1.3;
  --leading-normal:  1.5;
  --leading-relaxed: 1.65;

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

  /* ---- TYPOGRAPHY: Font Weights ---- */
  --weight-light:     300;
  --weight-regular:   400;
  --weight-medium:    500;
  --weight-semibold:  600;
  --weight-bold:      700;

  /* ---- SPACING ---- */
  --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 */

  /* ---- BORDERS & RADII ---- */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-2xl:  24px;
  --radius-full: 9999px;

  /* ---- SHADOWS ---- */
  --shadow-sm:   0 1px 2px rgba(26,26,26,0.05);
  --shadow-md:   0 2px 8px rgba(26,26,26,0.08);
  --shadow-lg:   0 4px 16px rgba(26,26,26,0.1);
  --shadow-xl:   0 8px 32px rgba(26,26,26,0.12);

  /* ---- TRANSITIONS ---- */
  --ease-out:    cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-in-out: cubic-bezier(0.42, 0, 0.58, 1);
  --duration-fast:   150ms;
  --duration-normal: 250ms;
  --duration-slow:   400ms;
}

/* ---- SEMANTIC TYPOGRAPHY ---- */
h1, .h1 {
  font-family: var(--font-heading);
  font-size: var(--text-5xl);
  font-weight: var(--weight-light);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--color-fg-primary);
}

h2, .h2 {
  font-family: var(--font-heading);
  font-size: var(--text-4xl);
  font-weight: var(--weight-regular);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--color-fg-primary);
}

h3, .h3 {
  font-family: var(--font-heading);
  font-size: var(--text-2xl);
  font-weight: var(--weight-medium);
  line-height: var(--leading-snug);
  color: var(--color-fg-primary);
}

h4, .h4 {
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-snug);
  color: var(--color-fg-primary);
}

p, .body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: var(--weight-regular);
  line-height: var(--leading-relaxed);
  color: var(--color-fg-secondary);
}

.body-lg {
  font-family: var(--font-body);
  font-size: var(--text-lg);
  line-height: var(--leading-relaxed);
  color: var(--color-fg-secondary);
}

.caption {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  color: var(--color-fg-tertiary);
}

.overline {
  font-family: var(--font-heading);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-fg-tertiary);
}

.label {
  font-family: var(--font-heading);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-wide);
  color: var(--color-fg-primary);
}