/* 樹木管理ナビ Design Tokens v1.2
   Base palette: garden (index, diagnosis, checklist, pruning)
   Forest pages (traq, ctla, survey) override 8 vars in their own <style> */

:root {
  /* === Base Palette === */
  --ink:    #1A1208;
  --bark:   #2C1A0E;
  --forest: #1A2F1A;
  --moss:   #3D5A3E;
  --moss-l: #5A7A5B;
  --leaf:   #7AAE6E;
  --cream:  #F5F0E8;
  --pale:   #E8F0E1;
  --mist:   #D4DFD0;
  --amber:  #C8842A;
  --rust:   #8B3A2A;
  --sky:    #2A5A8A;
  --gold:   #C8A820;

  /* === Checklist Score Grades === */
  --score-a: #2E6B30;
  --score-b: #7AAE6E;
  --score-c: #C8842A;
  --score-d: #8B3A2A;

  /* === TRAQ Risk Matrix === */
  --risk-low:      #2E6B30;
  --risk-moderate: #7A9A20;
  --risk-high:     #C8842A;
  --risk-extreme:  #8B2A1A;
  --risk-imminent: #5A0A0A;

  /* === Pruning Guidance === */
  --best:    #3D5A3E;
  --good:    #7AAE6E;
  --caution: #C8842A;
  --avoid:   #8B3A2A;
  --neutral: #D4DFD0;

  /* === Border Radius Scale === */
  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 8px;
  --radius-full: 9999px;

  /* === Shadow Scale === */
  --shadow-sm: 0 1px 3px rgba(26,47,26,0.08);
  --shadow-md: 0 4px 12px rgba(26,47,26,0.10), 0 2px 4px rgba(26,47,26,0.05);
  --shadow-lg: 0 8px 24px rgba(26,47,26,0.13), 0 4px 8px rgba(26,47,26,0.07);
  --shadow-card: rgba(26,47,26,0.06) 0px 0px 0px 1px,
                 rgba(26,47,26,0.04) 0px 1px 2px;
  --shadow-card-hover: rgba(26,47,26,0.10) 0px 0px 0px 1px,
                       rgba(26,47,26,0.06) 0px 4px 12px;

  /* === Transition Timing === */
  --transition-fast: 0.12s ease;
  --transition-base: 0.20s ease;

  /* === Letter Spacing === */
  --tracking-display: -0.02em;  /* h1 大見出し 28px+ */
  --tracking-heading: -0.01em;  /* セクション見出し 20-28px */

  /* === Surface Hierarchy === */
  --surface-page:   var(--cream);  /* Level 0: ページ背景 */
  --surface-raised: var(--pale);   /* Level 1: セクション・ホバー背景 */
  --surface-card:   #ffffff;       /* Level 2: カード・フォーム */

  /* === Spacing Scale === */
  --gap-section: 64px;
  --gap-section-lg: 80px;
  --gap-element: 20px;

  /* === Image Asset Hooks ===
     Keep these as `none` until approved photos are added under assets/images/.
     Example: --image-hero-home: url('/assets/images/hero/tree-canopy.webp'); */
  --image-hero-home: url('/assets/images/hero/hero-tree-canopy.jpg');
  --image-tool-diagnosis: none;
  --image-tool-pruning: none;
  --image-tool-checklist: none;
  --image-use-civic: none;
  --image-use-homeowner: none;
  --image-use-pro: none;
  --photo-overlay-hero: linear-gradient(180deg, rgba(44,26,14,0.20), rgba(44,26,14,0.65));
}