/* =========================================================
   Forest Design System — Colors & Type
   Accounting firm: incorporation + tax services
   Brand feel: professional, trustworthy, fast, organic-modern
   ========================================================= */

/* ---------- Fonts ---------- */
/* Pairing:
   - Libre Baskerville (serif) for editorial display — trust, tradition
   - Montserrat (sans) for UI, nav, body — clarity, speed
   - Noto Sans TC for Traditional Chinese
   - JetBrains Mono for receipts / filing numbers */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap');

/* Brand serif display — uploaded Libre Baskerville variable */
@font-face {
  font-family: 'Libre Baskerville';
  src: url('fonts/LibreBaskerville-VariableFont_wght.ttf') format('truetype-variations');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

/* Brand Traditional Chinese face — uploaded Noto Sans TC variable */
@font-face {
  font-family: 'Noto Sans TC';
  src: url('fonts/ChironGoRoundTC-VariableFont_wght.ttf') format('truetype-variations');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* =========================================================
     COLOR PRIMITIVES — the full palette
     ========================================================= */

  /* Core brand palette (from palette.jpeg + brief) */
  --color-teal-midnight: #051914;   /* deepest ground, headings on cream */
  --color-evergreen:     #6B7A3E;   /* secondary — deep moss/olive, warm distinct hue from Forest */
  --color-coach-green:   #0A2E26;   /* depth — near-black teal, clearly darker than Forest */
  --color-forest:        #0A5F36;   /* PRIMARY — buttons, links, brand */
  --color-forest-deep:   #074A29;   /* pressed / hover-dark */
  --color-forest-soft:   #0E7A46;   /* hover-light / accent */

  --color-lettuce:       #AADD66;   /* accent — energy, "fast" */
  --color-lettuce-soft:  #C9E89B;   /* tints */

  --color-cream:         #FCF6EB;   /* PRIMARY surface */
  --color-cream-deep:    #F5ECD8;   /* alt surface */
  --color-asparagus:     #ECEABE;   /* warm tint, highlight bands */

  --color-ink:           #1F2937;   /* text on cream — dark slate, softer than pure black */
  --color-ink-2:         #374151;   /* secondary text */
  --color-ink-3:         #6B7280;   /* tertiary / meta */
  --color-ink-4:         #9CA3AF;   /* disabled / caption */

  --color-paper:         #FFFDF7;   /* slight-warm white */
  --color-line:          #E6DFCB;   /* hairline on cream */
  --color-line-strong:   #C9C2A7;

  /* Status / semantic */
  --color-success:       #0A5F36;   /* same as primary — "done" */
  --color-warning:       #E0A235;   /* aged-gold, on cream */
  --color-danger:        #B23A2E;   /* terracotta on cream */
  --color-info:          #6B7A3E;   /* moss, ties to asparagus family */

  /* =========================================================
     SEMANTIC COLOR TOKENS
     ========================================================= */

  /* Surfaces */
  --bg:                var(--color-paper);       /* lightest surface — warm white */
  --bg-paper:          #FFFFFF;
  --bg-alt:            var(--color-cream);        /* cream as secondary band */
  --bg-inverse:        var(--color-teal-midnight);
  --bg-brand:          var(--color-forest);
  --bg-brand-deep:     var(--color-coach-green);
  --bg-accent:         var(--color-lettuce);
  --bg-highlight:      var(--color-asparagus);

  /* Foreground */
  --fg1:               var(--color-ink);         /* primary text */
  --fg2:               var(--color-ink-2);       /* body */
  --fg3:               var(--color-ink-3);       /* meta, captions */
  --fg4:               var(--color-ink-4);       /* disabled */
  --fg-on-dark:        var(--color-cream);
  --fg-on-dark-dim:    #B8C7BF;
  --fg-on-brand:       var(--color-cream);
  --fg-brand:          var(--color-forest);
  --fg-accent:         var(--color-teal-midnight);

  /* Borders */
  --border:            var(--color-line);
  --border-strong:     var(--color-line-strong);
  --border-brand:      var(--color-forest);
  --border-dark:       rgba(5, 25, 20, 0.12);

  /* =========================================================
     TYPOGRAPHY
     ========================================================= */
  --font-display: 'Libre Baskerville', 'Noto Sans TC', Georgia, 'Times New Roman', serif;
  --font-serif:   'Chiron GoRound TC','Libre Baskerville', 'Noto Sans TC', Georgia, 'Times New Roman', serif;
  --font-sans:    'Chiron GoRound TC','Montserrat', 'Noto Sans TC', -apple-system, 'Segoe UI', 'PingFang TC', 'Microsoft JhengHei', sans-serif;
  --font-mono:    'JetBrains Mono', 'Menlo', 'Consolas', 'Noto Sans TC', monospace;
  --font-zh:      'Noto Sans TC', 'PingFang TC', 'Microsoft JhengHei', sans-serif;

  /* Type scale (modular, 1.25 at desktop) */
  --t-display-2xl: clamp(56px, 7vw, 104px);
  --t-display-xl:  clamp(44px, 5.5vw, 80px);
  --t-display-lg:  clamp(36px, 4.2vw, 60px);
  --t-display-md:  clamp(30px, 3.2vw, 44px);
  --t-display-sm:  clamp(24px, 2.4vw, 32px);

  --t-body-xl:     20px;
  --t-body-lg:     18px;
  --t-body:        16px;
  --t-body-sm:     14px;
  --t-caption:     13px;
  --t-micro:       12px;

  /* Leading */
  --lh-tight: 1.04;
  --lh-snug:  1.18;
  --lh-body:  1.55;
  --lh-loose: 1.7;

  /* Letter spacing */
  --ls-tight:    -0.02em;
  --ls-tighter:  -0.035em;
  --ls-normal:   0;
  --ls-wide:     0.05em;    /* uppercase English — +0.05em per brand guidance */
  --ls-eyebrow:  0.14em;

  /* Weights */
  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semi:    600;
  --fw-bold:    700;
  --fw-black:   800;

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

  /* =========================================================
     RADII
     ========================================================= */
  --r-xs:   4px;
  --r-sm:   8px;
  --r-md:   12px;
  --r-lg:   16px;
  --r-xl:   24px;
  --r-2xl:  32px;
  --r-pill: 999px;

  /* =========================================================
     SHADOWS / ELEVATION
     Soft, warm, low-contrast — paper-like, not tech-y
     ========================================================= */
  --shadow-xs: 0 1px 2px rgba(5, 25, 20, 0.06);
  --shadow-sm: 0 2px 6px rgba(5, 25, 20, 0.06), 0 1px 2px rgba(5, 25, 20, 0.04);
  --shadow-md: 0 6px 18px rgba(5, 25, 20, 0.08), 0 2px 4px rgba(5, 25, 20, 0.04);
  --shadow-lg: 0 18px 40px rgba(5, 25, 20, 0.12), 0 4px 8px rgba(5, 25, 20, 0.05);
  --shadow-xl: 0 32px 64px rgba(5, 25, 20, 0.16);
  --shadow-inset: inset 0 1px 0 rgba(255, 253, 247, 0.5);

  /* Focus ring */
  --ring: 0 0 0 3px rgba(10, 95, 54, 0.25);

  /* Motion */
  --ease-out:     cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out:  cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring:  cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast:   120ms;
  --dur-base:   220ms;
  --dur-slow:   420ms;

  /* Layout */
  --container:     1200px;
  --container-sm:  920px;
  --gutter:        24px;
}

/* =========================================================
   SEMANTIC TEXT STYLES
   Apply via classes or compose in components
   ========================================================= */

html { color-scheme: light; }

body {
  font-family: var(--font-sans);
  font-size: var(--t-body);
  line-height: var(--lh-body);
  color: var(--fg1);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.h-display-2xl, h1.display {
  font-family: var(--font-display);
  font-size: var(--t-display-2xl);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tighter);
  font-weight: var(--fw-bold);
  color: var(--fg1);
}

.h-display-xl, h1 {
  font-family: var(--font-display);
  font-size: var(--t-display-xl);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tighter);
  font-weight: var(--fw-bold);
  color: var(--fg1);
}

.h-display-lg, h2 {
  font-family: var(--font-display);
  font-size: var(--t-display-lg);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-tight);
  font-weight: var(--fw-bold);
  color: var(--fg1);
}

.h-display-md, h3 {
  font-family: var(--font-display);
  font-size: var(--t-display-md);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-tight);
  font-weight: var(--fw-bold);
  color: var(--fg1);
}

.h-display-sm, h4 {
  font-family: var(--font-sans);
  font-size: var(--t-display-sm);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-tight);
  font-weight: var(--fw-bold);
  color: var(--fg1);
}

.h-nav {
  font-family: var(--font-sans);
  font-size: var(--t-body-sm);
  font-weight: var(--fw-medium);
  color: var(--fg1);
}

.h-eyebrow {
  font-family: var(--font-sans);
  font-size: var(--t-caption);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  font-weight: var(--fw-semi);
  color: var(--fg-brand);
}

.t-lead {
  font-size: var(--t-body-xl);
  line-height: var(--lh-body);
  color: var(--fg2);
  font-weight: var(--fw-regular);
}

.t-body {
  font-size: var(--t-body);
  line-height: var(--lh-body);
  color: var(--fg2);
}

.t-body-sm {
  font-size: var(--t-body-sm);
  line-height: var(--lh-body);
  color: var(--fg2);
}

.t-caption {
  font-size: var(--t-caption);
  line-height: var(--lh-body);
  color: var(--fg3);
  letter-spacing: 0.01em;
}

.t-micro {
  font-size: var(--t-micro);
  color: var(--fg3);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  font-weight: var(--fw-semi);
}

.t-mono {
  font-family: var(--font-mono);
  font-feature-settings: "zero", "ss01";
}

/* Utility: uppercase English heading — adds wide tracking for premium feel */
.t-caps {
  text-transform: uppercase;
  letter-spacing: var(--ls-wide);
  font-weight: var(--fw-bold);
}