/* ==========================================================================
   華南溫室設計 / HWA-NAN ENGINEERING CO.LTD — Foundation tokens
   --------------------------------------------------------------------------
   Palette anchored on the actual brand logo:
     #499114 — dark grass green (stripes, stem) — PRIMARY
     #74C723 — vivid lime/melon green (accent, hover)
   The full scale below is built around these two anchors.
   Typography: all-sans for honesty and clarity (engineering, not editorial).
   ========================================================================== */

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

:root {
  /* ============================ COLOUR =================================== */

  /* Brand green — muted sage palette (designer reference: 181–186 swatches).
     700 = #478058 (primary), 500 = #7C9788 (accent), softer and less saturated
     than logo's vivid #499114 / #74C723 (those remain canonical for the icon
     itself; the broader UI palette is the calmer sage version below). */
  --green-950: #14291E;
  --green-900: #1F3A2C;
  --green-800: #2F5840;
  --green-700: #478058;   /* PRIMARY — buttons, brand surfaces, links (ref 186) */
  --green-600: #678F74;   /* hover-down / secondary brand (ref 185) */
  --green-500: #7C9788;   /* fresh accent / success (ref 184) */
  --green-400: #889F8B;   /* (ref 183) */
  --green-300: #ADB5AB;   /* tints (ref 181) */
  --green-200: #CFD6CC;   /* badge / card tint */
  --green-100: #E3E8DF;   /* soft section backgrounds */
  --green-050: #F2F4ED;

  /* Steel grey — slightly warm/olive-leaning neutrals (engineering surfaces) */
  --steel-950: #0E110A;
  --steel-900: #1A1E16;
  --steel-800: #2A2F26;
  --steel-700: #3D423A;
  --steel-600: #555A52;
  --steel-500: #7C8278;
  --steel-400: #A0A69B;
  --steel-300: #C4C9BF;
  --steel-200: #DDE1D8;
  --steel-100: #F2F4ED;
  --steel-050: #F8F9F4;

  /* Earth — warm editorial accent only, sparingly */
  --soil-900: #3F2818;
  --soil-700: #8B5A3C;
  --soil-500: #B5825E;
  --soil-300: #D9B695;

  /* Sun — warmth + warning */
  --sun-700: #B0822A;
  --sun-500: #E8B547;
  --sun-300: #F2D286;

  --white: #FFFFFF;
  --black: #000000;

  /* ----- Semantic surfaces ----- */
  --bg:           var(--steel-100);
  --bg-raised:    var(--white);
  --bg-sunken:    var(--steel-200);
  --bg-inverse:   var(--green-900);
  --bg-overlay:   rgba(31, 58, 44, 0.55);   /* green-900 @ 55% */

  /* ----- Semantic foreground ----- */
  --fg-1:         var(--steel-900);
  --fg-2:         var(--steel-700);
  --fg-3:         var(--steel-500);
  --fg-disabled:  var(--steel-400);
  --fg-inverse:   var(--steel-100);
  --fg-inverse-2: var(--steel-300);
  --fg-brand:     var(--green-700);

  /* ----- Borders ----- */
  --border:         #D8DDD0;
  --border-subtle:  #E6EADC;
  --border-strong:  var(--steel-400);
  --border-brand:   var(--green-700);

  /* ----- Status / semantic ----- */
  --success:    var(--green-500);
  --success-bg: var(--green-100);
  --warning:    var(--sun-500);
  --warning-bg: #FBF1D6;
  --danger:     #C5462C;
  --danger-bg:  #FBE9E4;
  --info:       #2C6E8A;
  --info-bg:    #E1EEF3;

  --focus-ring: 0 0 0 3px rgba(71, 128, 88, 0.32);

  /* ============================ SPACING ================================== */
  --space-0:   0;
  --space-1:   4px;
  --space-2:   8px;
  --space-3:   12px;
  --space-4:   16px;
  --space-5:   24px;
  --space-6:   32px;
  --space-7:   48px;
  --space-8:   64px;
  --space-9:   96px;
  --space-10:  128px;
  --space-section: 96px;
  --space-section-sm: 64px;

  --container-max: 1280px;
  --container-pad: 24px;

  /* ============================ RADII ==================================== */
  --radius-xs:  2px;
  --radius-sm:  4px;
  --radius-md:  8px;
  --radius-lg:  16px;
  --radius-xl:  24px;
  --radius-pill: 9999px;

  /* ============================ SHADOWS ================================== */
  /* All shadows tinted with --green-900 — keeps elevation organic. */
  --shadow-xs: 0 1px 1px rgba(31, 58, 44, 0.04);
  --shadow-sm: 0 1px 2px rgba(31, 58, 44, 0.06), 0 1px 3px rgba(31, 58, 44, 0.04);
  --shadow-md: 0 4px 12px rgba(31, 58, 44, 0.08), 0 2px 4px rgba(31, 58, 44, 0.04);
  --shadow-lg: 0 16px 40px rgba(31, 58, 44, 0.12), 0 4px 12px rgba(31, 58, 44, 0.06);
  --shadow-xl: 0 32px 64px rgba(31, 58, 44, 0.16), 0 8px 24px rgba(31, 58, 44, 0.08);

  --inset-pressed: inset 0 2px 0 rgba(31, 58, 44, 0.18);

  /* ============================ MOTION =================================== */
  --ease:        cubic-bezier(0.32, 0.72, 0, 1);
  --dur-micro:   150ms;
  --dur-base:    240ms;
  --dur-page:    480ms;

  /* ============================ TYPOGRAPHY ============================== */
  /* Sans-only: the wordmark is sans, the brand is engineering-honest. */
  --font-display: "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", system-ui, sans-serif;
  --font-sans:    "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", system-ui, sans-serif;
  --font-mono:    "JetBrains Mono", "SF Mono", ui-monospace, Menlo, monospace;

  --text-display-xl: 64px;
  --text-display-lg: 48px;
  --text-display-md: 36px;
  --text-h1:  32px;
  --text-h2:  24px;
  --text-h3:  20px;
  --text-h4:  18px;
  --text-body-lg: 18px;
  --text-body:    16px;
  --text-body-sm: 14px;
  --text-caption: 12px;

  --lh-display: 1.15;
  --lh-heading: 1.3;
  --lh-body:    1.7;
  --lh-tight:   1.4;

  --tracking-display: -0.015em;
  --tracking-heading: -0.005em;
  --tracking-body:    0;
  --tracking-caps:    0.1em;

  --w-regular: 400;
  --w-medium:  500;
  --w-bold:    700;
  --w-black:   900;
}

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

html {
  -webkit-text-size-adjust: 100%;
  font-feature-settings: "palt";
}

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--text-body);
  line-height: var(--lh-body);
  font-weight: var(--w-regular);
  color: var(--fg-1);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ==========================================================================
   Semantic typography
   ========================================================================== */
.display-xl,
.display-lg,
.display-md,
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: var(--w-bold);
  line-height: var(--lh-heading);
  letter-spacing: var(--tracking-heading);
  color: var(--fg-1);
  margin: 0;
  text-wrap: balance;
}

.display-xl {
  font-size: var(--text-display-xl);
  font-weight: var(--w-black);
  line-height: var(--lh-display);
  letter-spacing: var(--tracking-display);
}

.display-lg {
  font-size: var(--text-display-lg);
  font-weight: var(--w-black);
  line-height: var(--lh-display);
  letter-spacing: var(--tracking-display);
}

.display-md {
  font-size: var(--text-display-md);
  font-weight: var(--w-bold);
  line-height: var(--lh-heading);
}

h1 { font-size: var(--text-h1); }
h2 { font-size: var(--text-h2); }
h3 { font-size: var(--text-h3); font-weight: var(--w-medium); }
h4 { font-size: var(--text-h4); font-weight: var(--w-medium); }

p, .body {
  margin: 0;
  font-size: var(--text-body);
  line-height: var(--lh-body);
  color: var(--fg-1);
  text-wrap: pretty;
}

.body-lg { font-size: var(--text-body-lg); line-height: var(--lh-body); }
.body-sm { font-size: var(--text-body-sm); line-height: var(--lh-body); }

.caption,
small {
  font-size: var(--text-caption);
  line-height: var(--lh-tight);
  color: var(--fg-3);
}

.eyebrow {
  font-family: var(--font-sans);
  font-size: var(--text-caption);
  font-weight: var(--w-medium);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--fg-brand);
}

code, .mono, kbd, samp {
  font-family: var(--font-mono);
  font-size: 0.92em;
  font-feature-settings: "tnum";
}

a {
  color: var(--fg-brand);
  text-decoration: none;
  transition: color var(--dur-micro) var(--ease);
}
a:hover {
  color: var(--green-500);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}
a:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: var(--radius-xs);
}

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

::selection {
  background: var(--green-200);
  color: var(--green-900);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}