/* ============================================
   DESIGN TOKENS — Amir Abuhajer Portfolio
   ============================================ */

:root {
  /* ── Colors ── */
  --bg:             hsl(40, 30%, 97%);
  --bg-subtle:      hsl(40, 20%, 94%);
  --card-teal:      hsl(158, 28%, 64%);
  --card-mint:      hsl(150, 30%, 72%);
  --card-yellow:    hsl(38, 78%, 60%);
  --card-peach:     hsl(20, 60%, 85%);
  --accent:         hsl(170, 55%, 38%);
  --accent-hover:   hsl(170, 55%, 30%);
  --accent-light:   hsl(170, 55%, 92%);
  --text-heading:   hsl(210, 18%, 20%);
  --text-body:      hsl(210, 8%, 50%);
  --text-light:     hsl(210, 6%, 68%);
  --white:          hsl(0, 0%, 100%);
  --shadow-color:   hsl(210, 15%, 70%);

  /* ── Glassmorphism ── */
  --glass-bg:       hsla(0, 0%, 100%, 0.55);
  --glass-border:   1px solid hsla(0, 0%, 100%, 0.35);
  --glass-blur:     blur(18px);
  --glass-shadow:   0 8px 32px hsla(210, 15%, 70%, 0.12);

  /* ── Typography ── */
  --font-heading:   'Outfit', sans-serif;
  --font-body:      'Inter', sans-serif;

  --fs-display:     4.5rem;    /* 72px */
  --fs-h2:          2.625rem;  /* 42px */
  --fs-h3:          1.5rem;    /* 24px */
  --fs-body:        1.0625rem; /* 17px */
  --fs-caption:     0.875rem;  /* 14px */
  --fs-button:      0.9375rem; /* 15px */

  --fw-regular:     400;
  --fw-medium:      500;
  --fw-semi:        600;
  --fw-bold:        700;

  --lh-display:     1.05;
  --lh-heading:     1.15;
  --lh-subheading:  1.3;
  --lh-body:        1.65;
  --lh-caption:     1.5;

  --ls-display:     -0.02em;
  --ls-heading:     -0.01em;
  --ls-body:        0.01em;
  --ls-button:      0.04em;
  --ls-caption:     0.02em;

  /* ── Spacing (8px base) ── */
  --sp-1:  0.25rem;   /* 4px  */
  --sp-2:  0.5rem;    /* 8px  */
  --sp-3:  0.75rem;   /* 12px */
  --sp-4:  1rem;      /* 16px */
  --sp-5:  1.5rem;    /* 24px */
  --sp-6:  2rem;      /* 32px */
  --sp-7:  3rem;      /* 48px */
  --sp-8:  4rem;      /* 64px */
  --sp-9:  6rem;      /* 96px */
  --sp-10: 8rem;      /* 128px */

  /* ── Border Radii ── */
  --radius-sm:    8px;
  --radius-md:    16px;
  --radius-lg:    24px;
  --radius-xl:    32px;
  --radius-full:  9999px;

  /* ── Shadows ── */
  --shadow-sm:    0 2px 8px hsla(210, 15%, 70%, 0.08);
  --shadow-md:    0 8px 24px hsla(210, 15%, 70%, 0.12);
  --shadow-lg:    0 16px 48px hsla(210, 15%, 70%, 0.16);
  --shadow-glow:  0 0 0 4px hsla(170, 55%, 38%, 0.15);

  /* ── Easings ── */
  --ease-smooth:  cubic-bezier(0.4, 0, 0.2, 1);
  --ease-spring:  cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-out:     cubic-bezier(0, 0, 0.2, 1);
  --ease-expo:    cubic-bezier(0.22, 1, 0.36, 1);

  /* ── Durations ── */
  --duration-fast:    150ms;
  --duration-normal:  250ms;
  --duration-slow:    500ms;
  --duration-entrance: 700ms;
}

/* ── Responsive token overrides ── */
@media (max-width: 1024px) {
  :root {
    --fs-display:  3rem;     /* 48px */
    --fs-h2:       2rem;     /* 32px */
    --fs-body:     1rem;     /* 16px */
  }
}

@media (max-width: 768px) {
  :root {
    --fs-display:  2.5rem;   /* 40px */
    --fs-h2:       1.75rem;  /* 28px */
    --fs-h3:       1.25rem;  /* 20px */
    --fs-body:     0.9375rem;/* 15px */
    --fs-caption:  0.8125rem;/* 13px */
  }
}

@media (max-width: 480px) {
  :root {
    --fs-display:  2rem;     /* 32px */
    --fs-h2:       1.5rem;   /* 24px */
    --fs-h3:       1.125rem; /* 18px */
    --fs-body:     0.875rem; /* 14px */
    --fs-caption:  0.75rem;  /* 12px */
  }
}