:root {
  
  --tea-n-l1: #fffdf8;  --tea-n-l2: #f7f4ee;  --tea-n-l3: #f2ecdf;  --tea-n-l4: #ede6d7;
  --tea-n-l5: #e8e0cf;  --tea-n-l6: #e3dac7;  --tea-n-l7: #cebfa4;  --tea-n-l8: #bbac94;
  --tea-n-l9: #a89a83;  --tea-n-l10: #90826b; --tea-n-l11: #776953; --tea-n-l12: #3a3126;
  
  --tea-n-d1: #191410;  --tea-n-d2: #221b14;  --tea-n-d3: #2b2318;  --tea-n-d4: #32291e;
  --tea-n-d5: #392f24;  --tea-n-d6: #40352a;  --tea-n-d7: #524535;  --tea-n-d8: #6e604c;
  --tea-n-d9: #8a7a63;  --tea-n-d10: #9e907a; --tea-n-d11: #b3a690; --tea-n-d12: #f0e7d5;
  
  --tea-s-l1: #fdf3f1;  --tea-s-l2: #fbe6e2;  --tea-s-l3: #f6cfc7;  --tea-s-l4: #f1beb4;
  --tea-s-l5: #ecaca0;  --tea-s-l6: #e79b8d;  --tea-s-l7: #d06a56;  --tea-s-l8: #c25542;
  --tea-s-l9: #b3402e;  --tea-s-l10: #9c3626; --tea-s-l11: #8a2f20; --tea-s-l12: #4d1a12;
  
  --tea-s-d1: #22110d;  --tea-s-d2: #2e1712;  --tea-s-d3: #3d1e17;  --tea-s-d4: #4c251c;
  --tea-s-d5: #5b2d22;  --tea-s-d6: #6a3427;  --tea-s-d7: #8f4234;  --tea-s-d8: #a84634;
  --tea-s-d9: #c04a34;  --tea-s-d10: #d15f48; --tea-s-d11: #e6836e; --tea-s-d12: #f8cfc4;
  
  --tea-brown-l: #8a5a24;    --tea-brown-d: #cb9a5c;
  --tea-brown-dk-l: #6e461a; --tea-brown-dk-d: #d8ab6e;
  --tea-green-l: #3f7d5a;    --tea-green-d: #5aa87c;
  --tea-gold-l:  #a9790f;    --tea-gold-d:  #e0b843;

  
  --tea-r-sm: 4px;
  --tea-r: 6px;
  --tea-r-lg: 8px;

  
  --tea-font-head: "Noto Serif TC", "PMingLiU", "MingLiU", serif;
  --tea-font-body: "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", sans-serif;
  --tea-base: 16px;

  --tea-gap: 18px;
  --tea-pad: 20px;
}


:root {
  --tea-brown: var(--tea-brown-l);
  --tea-brown-dk: var(--tea-brown-dk-l);
  --tea-seal: var(--tea-s-l9);
  --tea-seal-dk: var(--tea-s-l11);
  --tea-green: var(--tea-green-l);
  --tea-bg: var(--tea-n-l2);
  --tea-paper: var(--tea-n-l1);
  --tea-paper-2: var(--tea-n-l3);
  --tea-line: var(--tea-n-l6);
  --tea-line-strong: var(--tea-n-l7);
  --tea-ink: var(--tea-n-l12);
  --tea-mute: var(--tea-n-l11);
  --tea-gold: var(--tea-gold-l);
  --tea-shadow: 0 3px 14px rgba(90, 70, 40, .09);
  --tea-shadow-sm: 0 1px 5px rgba(90, 70, 40, .07);
}



[data-mode="dark"] {
  --tea-brown: var(--tea-brown-d);
  --tea-brown-dk: var(--tea-brown-dk-d);
  --tea-seal: var(--tea-s-d9);
  --tea-seal-dk: var(--tea-s-d11);
  --tea-green: var(--tea-green-d);
  --tea-bg: var(--tea-n-d1);
  --tea-paper: var(--tea-n-d2);
  --tea-paper-2: var(--tea-n-d3);
  --tea-line: var(--tea-n-d6);
  --tea-line-strong: var(--tea-n-d7);
  --tea-ink: var(--tea-n-d12);
  --tea-mute: var(--tea-n-d11);
  --tea-gold: var(--tea-gold-d);
  --tea-shadow: 0 4px 18px rgba(0, 0, 0, .5);
  --tea-shadow-sm: 0 1px 6px rgba(0, 0, 0, .4);
}



@media (prefers-color-scheme: dark) {
  :root:not([data-mode="light"]) {
    --tea-brown: var(--tea-brown-d);
    --tea-brown-dk: var(--tea-brown-dk-d);
    --tea-seal: var(--tea-s-d9);
    --tea-seal-dk: var(--tea-s-d11);
    --tea-green: var(--tea-green-d);
    --tea-bg: var(--tea-n-d1);
    --tea-paper: var(--tea-n-d2);
    --tea-paper-2: var(--tea-n-d3);
    --tea-line: var(--tea-n-d6);
    --tea-line-strong: var(--tea-n-d7);
    --tea-ink: var(--tea-n-d12);
    --tea-mute: var(--tea-n-d11);
    --tea-gold: var(--tea-gold-d);
    --tea-shadow: 0 4px 18px rgba(0, 0, 0, .5);
    --tea-shadow-sm: 0 1px 6px rgba(0, 0, 0, .4);
  }
}