/* ============================================================
   Peakstar (品得時光) — Design Tokens
   Colors · Type · Spacing · Radius · Shadow · Motion
   ============================================================ */

/* Fonts are enqueued via WordPress (see functions.php) for performance. */

:root {
  /* ---------- BRAND CORE (sampled from logo) ---------- */
  --peak-ink:    #22577A; /* deepest — top of logo */
  --peak-teal:   #2E8C8C; /* mid teal */
  --peak-jade:   #43B2A1; /* signature hue */
  --peak-green:  #50C39C; /* balanced green-teal */
  --peak-mint:   #80EDA5; /* brightest highlight */

  /* ---------- EXPANDED SCALES ---------- */
  /* Jade scale (primary) */
  --jade-50:  #ECF9F5;
  --jade-100: #D0F0E6;
  --jade-200: #A6E3D0;
  --jade-300: #7CD5BA;
  --jade-400: #56C4AB;
  --jade-500: #43B2A1;   /* = --peak-jade */
  --jade-600: #35968A;
  --jade-700: #297770;
  --jade-800: #215D5A;
  --jade-900: #1A4745;

  /* Ink scale (deep brand neutrals) */
  --ink-50:  #F2F6F8;
  --ink-100: #DDE7EB;
  --ink-200: #B8CCD3;
  --ink-300: #8EAAB4;
  --ink-400: #5E8392;
  --ink-500: #3D6676;
  --ink-600: #22577A;    /* = --peak-ink */
  --ink-700: #1B4662;
  --ink-800: #13303F;
  --ink-900: #0B1416;

  /* Neutrals — cool gray with faint teal undertone */
  --gray-0:   #FFFFFF;
  --gray-50:  #FAFBFC;
  --gray-100: #F4F6F7;
  --gray-200: #E4ECEC;
  --gray-300: #C9D6D6;
  --gray-400: #9AAEB0;
  --gray-500: #6B8083;
  --gray-600: #4E6467;
  --gray-700: #384A4D;
  --gray-800: #1F2D30;
  --gray-900: #0F1719;

  /* Semantic */
  --success:  #35968A;   /* jade-600 */
  --info:     #3885B5;
  --warning:  #D99530;
  --danger:   #D9455F;

  /* ---------- SURFACES / FG ---------- */
  --bg-paper: var(--gray-50);
  --bg-mist:  #F0F5F5;
  --bg-card:  var(--gray-0);
  --bg-ink:   var(--ink-900);

  --fg-1: var(--gray-900); /* primary text */
  --fg-2: var(--gray-700); /* secondary text */
  --fg-3: var(--gray-500); /* tertiary / meta */
  --fg-4: var(--gray-400); /* placeholder */
  --fg-on-brand: #FFFFFF;

  --border-subtle: var(--gray-200);
  --border-strong: var(--gray-300);

  /* ---------- GRADIENTS ---------- */
  --grad-brand: linear-gradient(158deg, #22577A 0%, #2E8C8C 35%, #43B2A1 65%, #80EDA5 100%);
  --grad-brand-soft: linear-gradient(158deg, rgba(34,87,122,.9) 0%, rgba(67,178,161,.9) 60%, rgba(128,237,165,.9) 100%);
  --grad-mist:  linear-gradient(180deg, rgba(67,178,161,0.08) 0%, rgba(67,178,161,0) 100%);
  --grad-ink:   linear-gradient(180deg, #0B1416 0%, #13272E 100%);
  --grad-aurora: radial-gradient(60% 50% at 30% 20%, rgba(67,178,161,.35) 0%, rgba(67,178,161,0) 60%),
                 radial-gradient(50% 40% at 80% 30%, rgba(128,237,165,.25) 0%, rgba(128,237,165,0) 60%);

  /* ---------- TYPOGRAPHY ---------- */
  --font-display: 'Manrope', 'Noto Sans TC', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body:    'Inter', 'Noto Sans TC', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-zh:      'Noto Sans TC', 'PingFang TC', 'Microsoft JhengHei', sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* Type scale (1.250 major third) */
  --fs-xs:   12px;
  --fs-sm:   14px;
  --fs-base: 16px;
  --fs-md:   18px;
  --fs-lg:   20px;
  --fs-xl:   24px;
  --fs-2xl:  30px;
  --fs-3xl:  38px;
  --fs-4xl:  48px;
  --fs-5xl:  60px;
  --fs-6xl:  76px;

  --lh-tight: 1.1;
  --lh-snug:  1.25;
  --lh-normal:1.5;
  --lh-loose: 1.7;

  --tracking-tight:  -0.02em;
  --tracking-snug:   -0.01em;
  --tracking-normal: 0;
  --tracking-wide:   0.04em;
  --tracking-caps:   0.08em;

  /* ---------- SPACING (4pt grid) ---------- */
  --sp-0:   0px;
  --sp-1:   4px;
  --sp-2:   8px;
  --sp-3:   12px;
  --sp-4:   16px;
  --sp-5:   20px;
  --sp-6:   24px;
  --sp-8:   32px;
  --sp-10:  40px;
  --sp-12:  48px;
  --sp-16:  64px;
  --sp-20:  80px;
  --sp-24:  96px;
  --sp-32:  128px;

  /* ---------- RADII ---------- */
  --radius-xs:   4px;
  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-lg:   16px;
  --radius-xl:   24px;
  --radius-2xl:  32px;
  --radius-pill: 999px;

  /* ---------- SHADOWS (cool-tinted) ---------- */
  --shadow-xs:   0 1px 1px rgba(15,40,50,.04);
  --shadow-sm:   0 1px 2px rgba(15,40,50,.06), 0 1px 1px rgba(15,40,50,.04);
  --shadow-md:   0 8px 24px -8px rgba(15,40,50,.12), 0 2px 6px rgba(15,40,50,.05);
  --shadow-lg:   0 24px 64px -16px rgba(15,40,50,.18), 0 8px 24px -8px rgba(15,40,50,.08);
  --shadow-xl:   0 40px 96px -24px rgba(15,40,50,.24), 0 16px 32px -12px rgba(15,40,50,.10);
  --shadow-glow: 0 0 0 4px rgba(67,178,161,.2);
  --shadow-inner: inset 0 1px 2px rgba(15,40,50,.08);

  /* ---------- MOTION ---------- */
  --ease-out-quart: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-standard:  cubic-bezier(0.4, 0, 0.2, 1);
  --ease-in:        cubic-bezier(0.4, 0, 1, 1);
  --dur-fast:   150ms;
  --dur-base:   240ms;
  --dur-slow:   400ms;
  --dur-hero:   600ms;
}

/* ============================================================
   Semantic element styles
   ============================================================ */

html { font-family: var(--font-body); color: var(--fg-1); background: var(--bg-paper); }
body { font-size: var(--fs-base); line-height: var(--lh-normal); -webkit-font-smoothing: antialiased; }

h1, .h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-5xl);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-1);
}

h2, .h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-4xl);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-1);
}

h3, .h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-2xl);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-snug);
  color: var(--fg-1);
}

h4, .h4 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-xl);
  line-height: var(--lh-snug);
  color: var(--fg-1);
}

p, .p {
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
  color: var(--fg-2);
}

.eyebrow {
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--peak-jade);
}

small, .small {
  font-size: var(--fs-sm);
  color: var(--fg-3);
}

code, .mono, pre {
  font-family: var(--font-mono);
  font-size: 0.92em;
}

code {
  background: var(--gray-100);
  padding: 2px 6px;
  border-radius: var(--radius-xs);
  color: var(--ink-700);
}

a {
  color: var(--peak-teal);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-standard);
}
a:hover { color: var(--peak-ink); text-decoration: underline; text-underline-offset: 3px; }

hr {
  border: 0;
  border-top: 1px solid var(--border-subtle);
  margin: var(--sp-8) 0;
}

/* ---------- Reusable helpers ---------- */
.text-gradient {
  background: var(--grad-brand);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}