/* =========================================================================
   Asher Portfolio · Design Tokens
   Pacific-blue accent on white. Bilingual zh-Hant + en.
   Load Noto Sans TC + Plus Jakarta Sans + JetBrains Mono from Google Fonts:
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
   <link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&family=Noto+Sans+TC:wght@400;500;600;700&display=swap" rel="stylesheet">
   ========================================================================= */

:root {
  /* ---------- Color · Primary accent (Pacific blue) ---------- */
  --accent:           #185FA5;   /* brief-spec primary */
  --accent-700:       #0E3C6B;   /* hover, dense small text */
  --accent-500:       #2A78C0;   /* lighter hover for outlined */
  --accent-300:       #88B4DC;   /* underline rest, ghost border */
  --accent-100:       #CFE0F0;   /* chip hover */
  --accent-50:        #E8F0F9;   /* chip bg, soft panel */

  /* ---------- Color · Ink (text) ---------- */
  --ink-1:            #0F1A2C;   /* display, h1-h3 */
  --ink-2:            #36465C;   /* body */
  --ink-3:            #7A8699;   /* meta, captions, eyebrow */
  --ink-4:            #B3BCCB;   /* placeholder, hairline-ink */

  /* ---------- Color · Surface ---------- */
  --bg:               #FFFFFF;   /* page */
  --bg-alt:           #F6F8FB;   /* alternating section */
  --bg-elev:          #FFFFFF;   /* cards (same as page; we lift via border+shadow) */
  --hairline:         #E5EAF1;   /* dividers, card borders */
  --hairline-strong:  #D3DBE6;

  /* ---------- Color · Semantic (status pills only) ---------- */
  --success:          #1F8A5B;
  --success-bg:       #E6F4EE;
  --warning:          #B86E00;
  --warning-bg:       #FBEFDB;
  --danger:           #C0392B;
  --danger-bg:        #F8E1DE;

  /* ---------- Type · Stacks ---------- */
  --font-sans:        "Plus Jakarta Sans", "Noto Sans TC", -apple-system, BlinkMacSystemFont,
                      "Segoe UI", Roboto, "Helvetica Neue", Arial,
                      "PingFang TC", "Microsoft JhengHei", sans-serif;
  --font-mono:        "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo,
                      Consolas, "Liberation Mono", monospace;

  /* ---------- Type · Scale (desktop · clamps in body classes) ---------- */
  --fs-display:       64px;      /* hero name */
  --fs-h1:            48px;      /* section title */
  --fs-h2:            32px;      /* sub-section */
  --fs-h3:            22px;      /* card title */
  --fs-h4:            18px;      /* small heading / nav */
  --fs-body:          16px;      /* paragraph */
  --fs-small:         14px;      /* meta */
  --fs-micro:         12px;      /* eyebrow, tag */

  /* ---------- Type · Weight ---------- */
  --fw-regular:       400;
  --fw-medium:        500;
  --fw-semibold:      600;
  --fw-bold:          700;

  /* ---------- Type · Leading ---------- */
  --lh-display:       1.1;
  --lh-heading:       1.25;
  --lh-body:          1.7;
  --lh-tight:         1.4;

  /* ---------- Spacing · 8-point + one half-step ---------- */
  --sp-1:             4px;
  --sp-2:             8px;
  --sp-3:             12px;
  --sp-4:             16px;
  --sp-6:             24px;
  --sp-8:             32px;
  --sp-12:            48px;
  --sp-16:            64px;
  --sp-24:            96px;
  --sp-32:            128px;

  /* ---------- Layout ---------- */
  --container:        1120px;
  --container-wide:   1240px;
  --gutter:           24px;
  --gutter-md:        32px;
  --gutter-lg:        64px;
  --nav-height:       64px;

  /* ---------- Radius ---------- */
  --r-sm:             6px;
  --r-md:             8px;       /* buttons, inputs */
  --r-lg:             12px;      /* cards */
  --r-xl:             16px;      /* feature panels */
  --r-pill:           999px;

  /* ---------- Shadow (used sparingly) ---------- */
  --shadow-card-hover:0 6px 16px -8px rgba(15, 26, 44, 0.12);
  --shadow-nav-scroll:0 1px 0 rgba(15, 26, 44, 0.06);
  --shadow-pop:       0 12px 32px -12px rgba(15, 26, 44, 0.18);

  /* ---------- Motion ---------- */
  --ease:             cubic-bezier(.2, .6, .2, 1);
  --dur-fast:         120ms;
  --dur-base:         220ms;
  --dur-slow:         420ms;
}

/* =========================================================================
   Base · reset-ish
   ========================================================================= */
*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  font-weight: var(--fw-regular);
  line-height: var(--lh-body);
  color: var(--ink-2);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: "ss01";  /* stylistic alts if available */
}

::selection { background: var(--accent-100); color: var(--ink-1); }

/* =========================================================================
   Typography · semantic classes
   ========================================================================= */
.t-display,
.t-hero,
h1.t-hero {
  font-size: clamp(40px, 6vw, var(--fs-display));
  line-height: 1.15;
  letter-spacing: -0.005em;
  font-weight: var(--fw-medium);
  color: var(--ink-1);
  margin: 0;
}

.t-h1,
h1 {
  font-size: clamp(32px, 4vw, var(--fs-h1));
  line-height: var(--lh-heading);
  letter-spacing: -0.005em;
  font-weight: var(--fw-medium);
  color: var(--ink-1);
  margin: 0;
}

.t-h2,
h2 {
  font-size: clamp(24px, 3vw, var(--fs-h2));
  line-height: var(--lh-heading);
  font-weight: var(--fw-medium);
  color: var(--ink-1);
  margin: 0;
}

.t-h3,
h3 {
  font-size: var(--fs-h3);
  line-height: var(--lh-tight);
  font-weight: var(--fw-semibold);
  color: var(--ink-1);
  margin: 0;
}

.t-h4,
h4 {
  font-size: var(--fs-h4);
  line-height: var(--lh-tight);
  font-weight: var(--fw-semibold);
  color: var(--ink-1);
  margin: 0;
}

.t-body,
p {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--ink-2);
  margin: 0;
  text-wrap: pretty;
}

.t-small  { font-size: var(--fs-small); line-height: 1.6; color: var(--ink-2); }
.t-meta   { font-size: var(--fs-small); line-height: 1.5; color: var(--ink-3); }
.t-micro  { font-size: var(--fs-micro); line-height: 1.4;  color: var(--ink-3); }

/* Eyebrow — small caps, accent, +tracking — used above section titles */
.t-eyebrow {
  font-size: var(--fs-micro);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  line-height: 1.2;
}

/* Accent run inside a heading — used to color the key phrase */
.accent { color: var(--accent); }

/* Numbers everywhere */
.num,
.tabular,
.t-display,
.t-h1,
.t-h2,
.t-h3 { font-variant-numeric: tabular-nums; }

/* Mono */
code, kbd, samp, pre, .t-mono {
  font-family: var(--font-mono);
  font-size: 0.92em;
}

/* Links */
a {
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color var(--dur-base) var(--ease),
              border-color var(--dur-base) var(--ease);
}
a:hover {
  color: var(--accent-700);
  border-bottom-color: currentColor;
}

/* Section divider · faded hairline */
hr.divider {
  border: 0;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    var(--hairline) 20%,
    var(--hairline) 80%,
    transparent 100%);
  margin: 0;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}