/* ============================================
   DESIGN TOKENS — Andy Jen Portfolio
   Stewart & Partners inspired minimalist system
   ============================================ */

:root {
  /* ── Colors ── */
  --c-bg:          #EFEEEA;
  --c-bg-dark:     #0A0A0A;
  --c-bg-card:     #E8E7E3;
  --c-text:        #1A1A1A;
  --c-text-light:  #FFFFFF;
  --c-text-muted:  #888888;
  --c-text-subtle: #AAAAAA;
  --c-border:      #D5D5D0;
  --c-border-dark: #333333;
  --c-overlay:     rgba(10, 10, 10, 0.95);
  --c-hover:       rgba(0, 0, 0, 0.04);

  /* ── Typography ── */
  --f-sans:   'Inter', -apple-system, 'Helvetica Neue', sans-serif;
  --f-serif:  'Noto Serif JP', 'Noto Serif TC', 'Georgia', serif;
  --f-zh:     'Noto Sans TC', 'PingFang TC', sans-serif;
  --f-mono:   'Geist Mono', 'SF Mono', 'Consolas', monospace;

  /* ── Font Sizes ── */
  --fs-xs:    0.6875rem;    /* 11px — metadata */
  --fs-sm:    0.8125rem;    /* 13px — labels */
  --fs-base:  0.9375rem;    /* 15px — body */
  --fs-md:    1.125rem;     /* 18px — lead */
  --fs-lg:    1.375rem;     /* 22px — subtitle */
  --fs-xl:    2rem;         /* 32px — heading */
  --fs-2xl:   3rem;         /* 48px — display */
  --fs-hero:  4.5rem;       /* 72px — hero */
  --fs-mega:  6rem;         /* 96px — menu nav */

  /* ── Font Weights ── */
  --fw-light:    300;
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-bold:     700;

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

  /* ── Layout ── */
  --page-mx:      clamp(1.5rem, 5vw, 4rem);
  --content-max:  1400px;
  --grid-gap:     0.5rem;   /* 8px — tight image grid */

  /* ── Borders ── */
  --border:       1px solid var(--c-border);
  --border-dark:  1px solid var(--c-border-dark);

  /* ── Transitions ── */
  --ease:         cubic-bezier(0.25, 0, 0.25, 1);
  --ease-out:     cubic-bezier(0, 0, 0.25, 1);
  --ease-in-out:  cubic-bezier(0.42, 0, 0.58, 1);
  --dur-fast:     0.3s;
  --dur-normal:   0.6s;
  --dur-slow:     1s;
  --dur-xslow:    1.4s;

  /* ── Z-Index Scale ── */
  --z-base:    1;
  --z-sticky:  100;
  --z-menu:    900;
  --z-overlay: 1000;

  /* ── Letter Spacing ── */
  --ls-tight:  -0.02em;
  --ls-normal:  0;
  --ls-wide:    0.05em;
  --ls-wider:   0.1em;
  --ls-widest:  0.15em;

  /* ── Line Height ── */
  --lh-tight:   1.1;
  --lh-snug:    1.3;
  --lh-normal:  1.6;
  --lh-relaxed: 1.8;
}

/* Dark mode override for specific sections */
[data-theme="dark"] {
  --c-bg:      #1F1F24; /* Soft textured dark indigo-grey */
  --c-text:    #FFFFFF;
  --c-border:  #333333;
  --c-hover:   rgba(255, 255, 255, 0.08);
}